how to target an element to edit the CSS

• 

  averagelon · Member · Aug 11, 2014 at 4:36 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I have the CSS editing feature. I want to edit the author box styling, but don’t know how to target it. I do have firebug and that helped me identify the .author-box-description, but this doesn’t seem to be what I need in order to change the font size and line height for the author box. Advise?

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

• 

  jeremeylduvall · Member · Aug 12, 2014 at 7:49 pm

  • Copy link

  Howdy Lon!

  This should give you the ability to edit both of those attributes:

  #author-box .author-box-description p {
  font-size: 18px;
  line-height: 3px;
  }

  Just input that under Appearance -> Customize -> CSS.

  Let me know if you need anything else!

• 

  averagelon · Member · Aug 12, 2014 at 9:18 pm

  • Copy link

  Thank you. That did allow me to edit the description. I have two further questions:

  1. I’d like to edit the styling of comments too. How do I target that?

  2. The CSS above did not let me edit the “Website” and “Posts” link styling in the author box. Actually, I would prefer to remove these if possible. But I can’t find anywhere in the admin that controls those links. Thanks, Lon

• 

  jeremeylduvall · Member · Aug 13, 2014 at 4:00 pm

  • Copy link

  Hey Lon!

  See below:

  I’d like to edit the styling of comments too. How do I target that?

  Give this a try!

  #main .comment p {
  	font-size: 12px;
  }

  Actually, I would prefer to remove these if possible.

  This should do the trick!

  small.author-box-url a {
  display: none;
  }

• 

  averagelon · Member · Aug 13, 2014 at 7:58 pm

  • Copy link

  awesome. Thank you. I wish I knew how to find these declarations in the CSS myself. do you just look at the original theme CSS or at my site using firebug? I’m not very good with firebug.

• 

  jeremeylduvall · Member · Aug 13, 2014 at 11:05 pm

  • Copy link

  Hey Lon,

  Honestly, the comment styling actually took a bit of trial and error. I just used the Inspect Element tool (in Chrome) and played around with different selectors. Normally, I can get the right selector on the first or second try. This time around, it was more like 5-6 before I added the #main tag.

  If you’d like to check out some CSS resources, we have a handful here:

  http://en.support.wordpress.com/custom-design/editing-css/#css-help

• 

  averagelon · Member · Aug 14, 2014 at 6:05 pm

  • Copy link

  pay dirt! Thanks, Lon

• 

  averagelon · Member · Aug 14, 2014 at 8:21 pm

  • Copy link

  shoot! still trouble. I want to style the footer widget tag cloud links so that they’re not #dd0000. But when I changed them to #666, all the links on my site changed too. I haven’t figured out how to target just the tag cloud links.

• 

  jeremeylduvall · Member · Aug 15, 2014 at 12:23 am

  • Copy link

  Can you give this a try?

  .wp_widget_tag_cloud a {
  color: #000;
  }

• 

  averagelon · Member · Aug 15, 2014 at 3:43 pm

  • Copy link

  yep. totally makes sense. I should have thought of that. Have a great w/e.

• 

  jeremeylduvall · Member · Aug 15, 2014 at 5:34 pm

  • Copy link

  You as well Lon! Glad that worked.