Add shadow or border around all images in help center articles
Answered
Posted Jan 28, 2016
I would like all my images in help center articles to have some sort of border or shadow around them because many of my images are screen captures with white background and they would look better with some sort of delineation between the image and the article background. I've searched the CSS and article html for a way to perhaps add something but I'm not sure where.
Thank you for any guidance or suggestions!
1
16
16 comments
Dave Dyson
Awesome, Jon – I'm glad we were able to help!
0
Jon Rosenberger
3924127 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!
1
Dave Dyson
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
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
Christopher Stock
Hey 376835980013, try adding:
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
William Grote
typo
style="border: 1px solid #003366;"
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
Brett Bowser
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
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
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
Sign in to leave a comment.