• Duke Oliver

  • 29 de janeiro de 2016 18:05
  • Editado

  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

  • 29 de janeiro de 2016 18:04

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

• Rchittoor

  • 20 de julho de 2016 10:23

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

• Duke Oliver

  • 20 de julho de 2016 13:51

  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

• Jennifer Rowe

  • 20 de julho de 2016 17:58

  Zendesk Documentation Team

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

• Rchittoor

  • 26 de julho de 2016 07:10

  Thank you Duke! The code worked just fine. 

Por favor, entrar para comentar.