Add shadow or border around all images in help center articles

6 Comentários

  • 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

  • Jason

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

  • Rchittoor

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

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

  • Jennifer Rowe
    Zendesk Documentation Team

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

  • Rchittoor

    Thank you Duke! The code worked just fine. 


Por favor, entrar para comentar.

Powered by Zendesk