Add shadow or border around all images in help center articles

Answered

12 Comments

  • Duke Oliver

    Hi Jason,

    You have a lot of ways to achieve this! I'll show you what it's like in my own theme. 

    In my theme editor on the Article page, I have {{article.body}} inside of a div with the classes "article-body" and "markdown":

    {{article.body}} renders the entire article, including the images I placed with the article editor. If I go to any of my articles and use my browser's 'inspect' tool (right-click > inspect) I can see that there is indeed an image inside my "article-body markdown" div:



    So now I need to go into my css and figure out how to target the image so I can give it a shadow. I believe the original theme I built on top of used "markdown" as the go-to classname for these kinds of edits, so I'll do just that. Here's the css selector:

    This is selecting all img tags inside of the "markdown" class. Here's my shadow edit. I went ahead and targeted every single browser I could think of (except older opera versions, woops!), but really all you'll likely need are the ones I underlined:

    Now if I preview my changes, I can see all my article images have shadows!

     

    I hope this helps. Let me know if you'd like to know more

    6
  • Duke Oliver

    Depends on what kind of border, though it would most likely be the css "border" property instead of the "box-shadow" property. For example,

    .markdown img {
    border: 1px solid black;
    }

    You can read more about borders and border styles at these places:

    http://www.w3schools.com/css/css_border.asp

    https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

    4
  • Jason

    This is exactly what I was looking for. Thank you!

    1
  • Rchittoor

    Thank you for the insightful post. what is the customization needed to add borders to an image?

    1
  • Jennifer Rowe
    Zendesk Documentation Team

    Thanks for helping out, Duke. Always nice to see you!

    1
  • Rchittoor

    Thank you Duke! The code worked just fine. 

    1
  • Angela Frey

    Added this to article_page.hbs:

    <div class="article-body markdown">
    {{article.body}}
    </div>

    Added this to style.css:

    .markdown img {
    border: 1px solid #f2f2f2;
    }

    Result (that I'm loving):

    0
  • William Grote

    Is there a way to do this with the HTML source code so you could add them to images on a per-article basis and not change the CSS for everything?

     

    0
  • Brett Bowser
    Zendesk Community Team

    Hey William,

    This should be possible by adding the HTML to your article source code. I'd recommend checking out this article: How can I format the text of the article with the source code?

    I hope this points you in the right direction!

    0
  • William Grote

    Hi Brett, thanks, I have been doing just that, but now I want to do what Angela suggested and just add the 

    <div class="article-body markdown">
    {{article.body}}
    </div>

    Added this to style.css:

    .markdown img {
    border: 1px solid #003366;
    }

     

    to the article.hbs and css page - I tried it and it is not putting borders on the new articles I import from Google Docs ???

    (the articles already have borders in GD, but these get removed when imported and I have to add them back by adding this  

    style="border: 1px solid #0;”) 

    to every img reference in each article. it would save time if it were universal 

    0
  • William Grote

    typo

    style="border: 1px solid #003366;"

     

    0
  • Chris Stock
    Community Moderator

    Hey William Grote, try adding:

    border: 1px solid #003366;

    to the .article-body img selector.

    On the current Copenhagen theme this will look like:

    .article-body img {
    height: auto;
    max-width: 100%;
    border: 1px solid #003366;
    }

    That will apply a border to every image added to an article.

    0

Please sign in to leave a comment.

Powered by Zendesk