Jump to content


Photo
- - - - -

Font Size - type and colour easy, help font!


  • Please log in to reply
24 replies to this topic

#1 bizint

bizint

    Advocate

  • Members
  • 389 posts
  • Country: Country Flag

Posted 16 April 2011 - 01:31 PM

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!

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 16 April 2011 - 04:08 PM

Which theme are you using?

#3 pgcook

pgcook

    Member

  • Members
  • PipPip
  • 17 posts

Posted 17 April 2011 - 05:02 AM

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 17 April 2011 - 04:10 PM

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.

#5 bizint

bizint

    Advocate

  • Members
  • 389 posts
  • Country: Country Flag

Posted 18 April 2011 - 08:33 AM

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

#6 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 18 April 2011 - 12:39 PM

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


#7 bizint

bizint

    Advocate

  • Members
  • 389 posts
  • Country: Country Flag

Posted 18 April 2011 - 03:01 PM

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

#8 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 18 April 2011 - 08:06 PM

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?

#9 bizint

bizint

    Advocate

  • Members
  • 389 posts
  • Country: Country Flag

Posted 18 April 2011 - 10:40 PM

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

#10 pgcook

pgcook

    Member

  • Members
  • PipPip
  • 17 posts

Posted 18 April 2011 - 11:31 PM

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[quote]

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

#11 timlinson

timlinson

    Advocate

  • Members
  • PipPipPipPipPip
  • 1032 posts

Posted 19 April 2011 - 03:14 AM

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

#12 bizint

bizint

    Advocate

  • Members
  • 389 posts
  • Country: Country Flag

Posted 19 April 2011 - 09:06 AM

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

#13 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 19 April 2011 - 10:52 AM

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

#14 bizint

bizint

    Advocate

  • Members
  • 389 posts
  • Country: Country Flag

Posted 19 April 2011 - 11:34 AM

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

#15 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 19 April 2011 - 07:31 PM

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

#16 tulipgirl85

tulipgirl85

    Member

  • Members
  • PipPip
  • 15 posts

Posted 06 May 2011 - 07:16 AM

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.dockside...se-newsletters/

#17 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 06 May 2011 - 03:16 PM

 div.entry_content {font-size: 10px;}
will change the body text in the pages. Is this what you're looking for?

#18 tulipgirl85

tulipgirl85

    Member

  • Members
  • PipPip
  • 15 posts

Posted 10 May 2011 - 07:43 AM

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

#19 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 10 May 2011 - 12:52 PM

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

#20 tulipgirl85

tulipgirl85

    Member

  • Members
  • PipPip
  • 15 posts

Posted 11 May 2011 - 01:20 AM

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.dockside...se-newsletters/