Add shadow or border around all images in help center articles

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

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

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

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

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

Thank you Duke! The code worked just fine. 

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):

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?

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 

typo

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

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.

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

@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! 

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