Add shadow or border around all images in help center articles

6 Comments

  • Duke Oliver
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

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

    1
  • Rchittoor
    Comment actions Permalink

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

    1
  • Jennifer Rowe
    Comment actions Permalink

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

    1
  • Rchittoor
    Comment actions Permalink

    Thank you Duke! The code worked just fine. 

    1

Please sign in to leave a comment.

Powered by Zendesk