Sela – format pictures on front page

• 

  ashrouten · Member · Jul 7, 2017 at 3:18 pm

  • Copy link
  • Add topic to favorites

  I’m looking to manipulate the photos on the front page widget of my site.

  Is it possible to custom CSS to round the edges, or present them in a certain shape?

  Many thanks

  The blog I need help with is: (visible only to logged in users)

• 

  garysixtyeight · Member · Jul 7, 2017 at 3:28 pm

  • Copy link

  Hi there,

  Do you want to target the 3 images in the widgets below the hero section?

  If you do, please try adding the CSS below to your site in My Sites → Customize → CSS.

  The 50px value can be changed if you want to make the corners more or less rounded.

  .home #secondary img {
      border-radius: 50px;
  }

  https://en.support.wordpress.com/custom-design/editing-css/

• 

  ashrouten · Member · Jul 7, 2017 at 3:33 pm

  • Copy link

  Hi Gary,

  That worked a treat, thank you ever so much. Looks good now.

  Ash

• 

  garysixtyeight · Member · Jul 7, 2017 at 3:34 pm

  • Copy link

  You’re welcome, glad I could help :)

• 

  ashrouten · Member · Jul 7, 2017 at 4:13 pm

  • Copy link

  While you’re here Gary, is it possible to do so on other pages?

  E.g. https://ashrouten.com/expeditions

  Many thanks

• 

  garysixtyeight · Member · Jul 7, 2017 at 4:35 pm

  • Copy link

  For that section, please add:

  .child-page .entry-thumbnail img {
      border-radius: 50px;
  }

  If there are any other images on the site you want to target, please let me know. If there’s more, I can bundle the css into one rule instead of having several doing the same thing.

  Thanks :)

• 

  ashrouten · Member · Jul 7, 2017 at 5:12 pm

  • Copy link

  Hi John, again thank you this works very well.

  There are other pages but I don’t want to do all. Instead is there a way I can find out how to refer to individual pages and then I can do it myself. For example, this page:

  https://ashrouten.com/writing/

• 

  garysixtyeight · Member · Jul 7, 2017 at 5:16 pm

  • Copy link

  For images on that page, the css would be:

  .page-id-1519 .entry-content img {
      border-radius: 50px;
  }

• 

  ashrouten · Member · Jul 7, 2017 at 5:56 pm

  • Copy link

  Perfect, got it thanks Gary. Apologies I was typing another email to a John, hence referring you to as John in my previous post.

  Thanks again, learnt a lot!

• 

  garysixtyeight · Member · Jul 7, 2017 at 5:59 pm

  • Copy link

  You’re welcome :)