Sign in to follow this  
Followers 0

Font Size - type and colour easy, help font!

25 posts in this topic

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

Which theme are you using?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?!

Share this post


Link to post
Share on other sites

Posted · Report post

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;}

Share this post


Link to post
Share on other sites

Posted · Report post

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?!

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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...

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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/

Share this post


Link to post
Share on other sites

Posted · Report post

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

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

WINNER! Thank you everyone for you help! :)

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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?!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0