Font Size - type and colour easy, help font!

[bizint 0]

Hiya - I've done a deep search on changing font size - I really dont know where to start with changing font size. I guess as much that I'm going to have to use css (why? If you have global controls for ?colour and type...why not size? With CSS for little areas) I've changed my main-content size...but what about headers etc...how many different areas will I have to tweak...is there a global size? I cant see anything that can help with this - I want to change the font size in absolutely every area....but also universally (all headers, all posts, all widgets etc...)...your confused! many thanks!

[catrina 103]

Which theme are you using?

[pgcook 0]

I have the same question, I am using Platform Pro, latest version. I would like to change size of the post title. Thanks Peter

[catrina 103]

Peter, To change the font size of the post title, add this CSS to the custom CSS area in the settings or activate the child theme and add it to your base.css file:

h2.entry-title {font-size: #px;}

Change # to the number size you want.

[bizint 0]

Hi Catrina - I'm Pagelines Pro also...I see from a previous post how to change "main-content"...and now I can see how to change post titles...but wouldnt it be better to have a list of most commonly used titles and contents? Or should we just ask every time we want to change a specifica title....For example I want to change main Nav font....also font within the posts not just the header....also the links in the widgets in my footer....also the text in my widgets in my footer to match?!

[Kate 3]

Hi bizint, If you're using Firebug you can pick out the classes or IDs for each of those elements and use it to change the links. You can group those you want to share styles together. Something like:

.style1 a, .style2 a, .style3 a{color:#000000;}

[bizint 0]

Mmm well I used firebug to find the box header and and box content and tried this: #fboxtitle {font-size 10px} #fboxtext {font-size 10px} Which didnt work - I did see the "style" area in firebug (not l,2 etc... and played with the font sixe there to give 10px and the whole site changed...everything...which looked primising...how did I do that? This is the full list! html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td Do I have to specify font for each of these?! Losing will to live. I thought templates and themes were supposed to help avoid coding?!

[cmunns 16]

Crash course. So the reason why #fboxtitle isn't working is because of many reasons. First of all it's a class which corresponds to a `.` you have a `#` which corresponds to an id so `

` will be `.fboxtitle {font-size:10px;}` in CSS (note the colon and semi-colon markup too) However, the rule for font-size is actually inside of the HTML markup where the .fboxtitle is applied...where the `H3` is If you click the H3 you'll see in FireBug you get `#boxes h3 {font-size:1.3em;}` This is the CSS you would have to modify or rewrite. Does that help?

[bizint 0]

Hi! Well I put in #boxes h3 {font-size:1.0em;} and tried #boxes h3 {font-size:10px;}...and nothing changed smaller(except the layout which had to be "reset" again?!)... I'm assuming h3 mean Header 3? P Paragraph etc..? I'm guessing these are global settings somewhere? I can see when I'm writing text in the comment box that I can choose these various settings (heading 1 2 3 etc...). But I'm still not clear how I can change the font size. I'm starting to undertsand how I can change specific boxes - lioke main content, or these boxes... but I really want one font for most of the website...not lots of different size...I dont really want to have to change font for every widget, header, nav etc...(unless I specifically need to)...it seems this css targetted on a box say is only for specific details? Rather than a global approach? Or am I wrong? Font size seems such a basic "theme" choice. Like text colour or font type - I really dont understand why I'm learning how to code to make such a "basic" changes. (Not basic if you dont know css!) But committed now and pressing on! For Pagelines reference - it would really help to have a font css tutorial iof this is the way it has to be - or some global font changing leavers in typography... Thanks for help...all my fonts are about 20percent/2 pixels too large...

[pgcook 0]

Catrina I pasted in the script you provided above for the h2 post title, but it does not make any change. Below is the extract from my base.css /* ============================== */ /* = Start Your Custom CSS Here = */ /* ============================== */ #nav_row {border-bottom: 1px solid #528B8B;} h3.widget-title {border-bottom: 1px solid #528B8B;} h2.entry-title {font-size: 20px;} /* @ CSS corresponding to the hook used in functions.php; adds a stumbleupon icon to branding section

Can you advise what I am doing wrong? Incidentally, the colour setting for the main menu border is not working either, as advised in separate post). Thanks for your patience Peter

[timlinson 3]

Peter, `!important` should do the trick here as well.

[bizint 0]

Guys is it easy to change the BASE FONT only? If I got to Base Font of 10 instead of 12 or 14 I think this will work for me - this is an interesting video

[Kate 3]

Hi bizint, By changing the font percentage or em value in the body tag, the values should be changed globally.

[bizint 0]

#body {font-size; 10px} ? Put this in and nothing happens?

[cmunns 16]

` body, .font1, .font-primary, .commentlist { font-size: 10px; } ` Try the above?

[tulipgirl85 0]

Hello, I'm also using Platform Pro and want to change the size of the body text. When I put in the above code

body, .font1, .font-primary, .commentlist {
	font-size: 10px;
	}

It changed the size of all the fonts - navigation, side widget etc, when I just want to change the body text for the pages I am editing. I can't figure out what class the font is either, it is just the standard 'paragraph' class in the backend. Do I need to assign a proper class to it (H2, 3 etc) or can I fix it with a particular code? Thanks for your help. http://dgv2.docksidegroup.com.au/news-offer/press-release-newsletters/

[catrina 103]

div.entry_content {font-size: 10px;}

will change the body text in the pages. Is this what you're looking for?

[tulipgirl85 0]

No luck with that code, is it meant to go inside the body{} ?

[Kate 3]

Hi Sophie, No, Catrina's code should not go inside of the body tag brackets. It should be a line of its own.

[tulipgirl85 0]

It still isn't changing? I've checked across 3 different types of broswers as well. I'm putting the code in the custom code css section of the platform pro settings. http://dgv2.docksidegroup.com.au/news-offer/press-release-newsletters/

[tulipgirl85 0]

I've tried to see if it were working by changing the font to eg. 20px so the change would be obvious, but no change. :S

[timlinson 3]

Override with !important: `div.entry_content {font-size: 10px !important;}`

[tulipgirl85 0]

WINNER! Thank you everyone for you help!

[bizint 0]

Sorry guys...it still doesnt work for me... www.businessinteriors.co.uk/betatest/wordpress I've put both in and no changes...

[bizint 0]

Hey I got it to work...I put this at the top of my custom css: body{font-size:11px} It really was that easy?!