CSS body size changes not shown

• 

  saraohara · Member · May 21, 2012 at 8:23 pm

  • Copy link
  • Add topic to favorites

  I paid $30 for the CSS upgrade and went into Custom CSS and changed the body size from 14 to 20 just to test it – and nothing is different. I did clear the cache. Here’s the site: http://saraohara.wordpress.com/home/
  Blog url: http://saraohara.wordpress.com/

• 

  staff-blorbo · Staff · May 21, 2012 at 8:36 pm

  • Copy link

  Edit that particular page, then switch to the HTML editor tab.

  You’re using a lot of paragraph and span styles, which are overriding your set CSS.

• 

  saraohara · Member · May 21, 2012 at 9:01 pm

  • Copy link

  Yes, I know it’s a mess – I was trying to NOT have to upgrade to change font sizes, etc.

  But on this page: http://saraohara.wordpress.com/home/ please look at the paragraph starting with Rob Bell…Format used is just Paragraph – shouldn’t changing the body font to 20 (from 14) in CSS Style Sheet effect the Paragraph font?
  Thanks for your help!

• 

  staff-blorbo · Staff · May 21, 2012 at 10:03 pm

  • Copy link

  Technically, yes, but I have a feeling the padding call may just be overriding everything. Working with CSS always carries a bit of trial and error.

  A good way to check out be to publish a new page of straight text, no styling, and see if it picks up what it should from your custom CSS.

• 

  saraohara · Member · May 21, 2012 at 10:11 pm

  • Copy link

  Good idea but sadly it didn’t work. See the new page here: http://saraohara.wordpress.com/body/

  Isn’t this what I paid $30 for?

  Please advise – and thanks!

• 

  designsimply · Member · May 21, 2012 at 11:31 pm

  • Copy link

  CSS works in a cascade, and the specificity of each rule you add determines whether it will be the final rule used or not. When you use the Appearance → Custom Design → Fonts page to set font family or size (as you’ve done), WordPress.com adds a really specific rule to make that setting override the theme CSS. If you then want to add another even more specific rule to your custom CSS after that, you need to do something to make that rule more important than all the other rules that have already been set. In this case, all you need to do is add an “!important” attribute to the font property in your CSS, like this:

  body {
  	font:20px Georgia, Times, Serif !important;
  }

  Or, if you wanted that particular CSS rule to work without “!important”, then you could unset the font and size settings for Body Text on your Appearance → Custom Design → Fonts page and that would allow your original example to work.

• 

  saraohara · Member · May 21, 2012 at 11:40 pm

  • Copy link

  Ok, changing the fonts back to Default allows the new body font size to work – THANKS Ms. Happiness!

• 

  designsimply · Member · May 21, 2012 at 11:41 pm

  • Copy link

  Yay!

  If you have additional CSS questions, please feel free to post in our CSS forum at https://en.forums.wordpress.com/forum/css-customization/ any time.