font size and capitalization

• 

  sarahwbartlett · Member · Nov 14, 2015 at 12:27 pm

  • Copy link
  • Add topic to favorites

  I am using the Sela theme on writinginsideVT.com and have premium package.

  Can you please help me with the CSS required to:
  1 – change the font size on a post; and
  2 – change the page titles so that they are all lower case rather than all upper case

  Thanks so much for your help!
  Sarah

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

• 

  kavyagokul · Staff · Nov 14, 2015 at 2:22 pm

  • Copy link

  Hi there,

  You can try this css

  .entry-content {
    font-size: 120%; /*Change this to whatever size you like */
  }
  .entry-title {
    text-transform: lowercase;
  }

• 

  sarahwbartlett · Member · Nov 14, 2015 at 8:21 pm

  • Copy link

  I appreciate the suggestion, grvrulz.

  Two follow-up questions:
  1 – do I use this code on the page itself? or under ‘customize’; or both? and
  2 – where does the actual content I’m changing go? is it between the /* */ or somewhere else??

  Thanks much!

• 

  thesacredpath · Member · Nov 15, 2015 at 7:58 am

  • Copy link

  @sarahwbartlett, the code that @grvrulz is CSS, so your would add it at the CSS tab in Customizer.

  Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS.

• 

  kavyagokul · Staff · Nov 15, 2015 at 8:00 am

  • Copy link

  Hi sarahwbartlett,

  1. You have to use this code in the custom css section, under customize.
  2. The content you have to change is the size. I have written 120% just for reference. You can change it to whatever ratio you want. e.g. if you want the text to be twice as large as the default, you would be using 200% instead of 120%. I hope that’s clearer.

  Cheers :)

• 

  sarahwbartlett · Member · Nov 16, 2015 at 9:57 pm

  • Copy link

  Thank you.

  I want to be sure I understand:
  1 – to change ALL the titles – pages and posts – I put ‘.entry-title {
  text-transform: lowercase;}’ into the customize css section. That’s all.

  2 – to change the font size on a single page, I should use ‘.entry-content {
  font-size: 120%; /*Change this to whatever size you like */}’ in the HTML section of that particular entry? It’s not for everything – just one single instance. Don’t I need to put the actual words I want to change in somewhere???

• 

  sarahwbartlett · Member · Nov 16, 2015 at 10:05 pm

  • Copy link

  OK – so I used the CSS for the lower case; it makes all titles lowercase which is perfect. Now . . .

  How can I also make the menu names across the top lowercase; and the titles of the widgets??

• 

  thesacredpath · Member · Nov 17, 2015 at 5:36 am

  • Copy link

  Hi, to change the menu items to lower case as well, modify the first line of your current custom CSS rule (the selector) to look like the following.

  .entry-title, .main-navigation a {
      text-transform: lowercase;
  }

• 

  sarahwbartlett · Member · Nov 17, 2015 at 2:42 pm

  • Copy link

  Thanks, SacredPath!

  Last question in this thread: to make a font size change just on a single post – surely I don’t change the CSS on the customize page? isn’t that a more ‘local’ change, done with the HTML on the specific post itself?

• 

  sarahwbartlett · Member · Nov 17, 2015 at 3:07 pm

  • Copy link

  Ummmm . . .the menu is now lowercase . . . but where did all my widgets go?!!!

• 

  sarahwbartlett · Member · Nov 17, 2015 at 3:13 pm

  • Copy link

  problem solved – grid page overrides widgets :-)

• 

  sarahwbartlett · Member · Nov 17, 2015 at 4:44 pm

  • Copy link

  OK – almost there . . .

  How to get the drop-down menu titles to also be lowercase?

  AND

  I am still unclear where to put the code to change font size on a single post.

  Otherwise, this thread is nearly done :-)

  With huge thanks to all who have contributed.

• 

  thesacredpath · Member · Nov 17, 2015 at 9:18 pm

  • Copy link

  Oh, they were sneaky on the uppercase. Change the code I had given to the following.

  .entry-title, .main-navigation a {
      text-transform: lowercase !important;
  }

  Note the !important after the lowercase. In general, using the !important keyword is not the best way to do things, but in this case, I see no drawbacks.

• 

  sarahwbartlett · Member · Nov 17, 2015 at 11:02 pm

  • Copy link

  Yes, YES! That works!

  And now to that last niggly question: about changing font size on a single entry/post . . . is that something I do under HTML editor, marking the relevant text somehow???

  Thanks, SacredPath. This is terrific :-)

• 

  thesacredpath · Member · Nov 19, 2015 at 7:19 pm

  • Copy link

  If you only want to change the font size of the title on a specific post, we have to use the post id, which is a unique class. Which post are you wanting to change the title size on?

• 

  sarahwbartlett · Member · Nov 20, 2015 at 12:30 am

  • Copy link

  Sacredpath,

  I was originally thinking of changing the font on the ‘home ‘and ‘support women’s words’ pages where I have quotes – either changing just the size (bigger for the stats on ‘home’ and potentially smaller for the two quotes); or possibly the font itself, to distinguish it from regular paragraph look but not as overpowering as headline.

  Now I’m not sure whether that would be too much going on. Still, I’d love to learn how to do it in case I choose to!

  Thanks,
  Sarah

• 

  thesacredpath · Member · Nov 20, 2015 at 2:51 am

  • Copy link

  For quotes, I would suggest doing a blockquote on those. You would select all the text in the quote and then click the blockquote button at the top of the editor (quote mark). The change is sort of subtle. It indents the text and puts a light grey vertical borderline down the left side of the quote. We can create CSS rules to style the blockquotes as you desire. Doing it that way would make blockquotes consistent visually throughout your site.

• 

  sarahwbartlett · Member · Nov 22, 2015 at 8:32 pm

  • Copy link

  I like that suggestion, SacredPath! I don’t use block quotes much, although I’d like to… perhaps I would with the flexibility of a different look.

  Do you have a professional option about serif vs sans serif for block quote readability? and whether the font should remain the same but perhaps just be different size/italicized? I need the copy to be readable (our audience is largely middle-age women so our eyesight is not the keenest!!).

  IN order to decide about the specific font, I wonder if there is another way to see the options other than through ‘customize’? I need to go back and forth through so many iterations to see them there – and of course, do NOT see how the block would look different . . . Any suggestions greatly appreciated, as it is the home page and feels like important presentation. [We are, for the first time, soliciting financial support from our readers.]

  Many thanks, Sarah

• 

  thesacredpath · Member · Nov 23, 2015 at 8:45 pm

  • Copy link

  Personally, since the body text is serif, I would suggest sticking with that and then using italic, like you have now. Serif – at least before the web really took off, was the choice for body text because it is supposedly easier to read and sans-serif was used basically only for headings and such. Personally I like serif for body text, but the web has mostly walked away from the old conventions in typography.

  I used the web inspector built into my browser to find the relevant CSS. and I can also try out changes in realtime with it. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.