Different CSS for article templates | Community
Skip to main content

Different CSS for article templates

  • February 16, 2022
  • 3 replies
  • 0 views
K

I'm trying to create a new article template in my Guide theme, and I'm wondering how/if I can use different CSS for the new template.

Specifically, my default article template includes a small border around any images in the article. It's coded in the style.css file as:

.article-body img {
  height: auto;
  max-width: 100%;
  border: 1px solid #ECECEC;
  border: 1px solid rgba(0, 0, 0, 0.07);
  padding: 3px;
}

I have a couple of articles for which I'd like to remove the borders around images. I thought having a different article template in the theme that I could use for those articles would solve the problem, but I'm not sure what to put in style.css that would distinguish between the two different article templates. 

    3 replies

    Christopher15

    Hi @kimber, you could add an additional css selector to the div that currently has the .article-body selector. Then add something like the following to your stylesheet:

    .article-body img {
      height: auto;
      max-width: 100%;
      border: 1px solid #ECECEC;
      border: 1px solid rgba(0, 0, 0, 0.07);
      padding: 3px;
    }

    .the-new-class img {
      border: none !important;
    }

    Your html would look like this:

    <div class="article-body the-new-class">
      <img>
    </div>
      K
      • Kimber
      • Author
      • February 17, 2022

      Thank you so much! 

      Joseph41
      • Joseph41
      • February 19, 2022

      Thanks Christopher Stock

      Terms & ConditionsCookie settingsAccessibility statement