Add shadow or border around all images in help center articles

Answered

16 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
  • 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
  • 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
  • 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
  • Jon Rosenberger

    When I add the border with

    img {
    border: 2px solid black;
    }

    It puts a border around my company logo and the user's avatar on the homepage as well. Is there a way to have this only apply to images in articles? 

    I'm on the hudson base theme

    0
  • Dave Dyson
    Zendesk Community Team

    Hi Jon -

    Your CSS code doesn't specify a class or id to apply it to, so as written it will apply that border to any img that can have one. If you look at the example code that Chris Stock shared in their comment right above yours, you'll see that instead of starting with "img {", it starts with ".article-body img {", so that his border CSS will only apply to img elements that include class="article-body". I'd suggest adding .article-body to your code and see if that helps.

    0
  • Jon Rosenberger

    Dave Dyson Thanks! I was frustrated because .article-body wasn't working for me but I decided on some trial testing and found out just .article worked fine! I also jazzed it up by changing it from a border to a shadow with

    .article img {
    box-shadow: 10px 10px 5px #ccc;

    so I'm feeling pretty great. thanks to you and everyone else in this thread for the help! 

    0
  • Dave Dyson
    Zendesk Community Team

    Awesome, Jon – I'm glad we were able to help!

    0

Please sign in to leave a comment.

Powered by Zendesk