Changing body & links fonts in Twenty Ten theme

  • Unknown's avatar

    I am familiar with basic CSS so purchsed the stylesheet editor …

    I was hoping/expecting to see somthing like this …

    p {color: #333333; font-size: 10pt; text-align: left; line-height: 20px; font-family: Helvetica, verdana, sans-serif}
    h1 {color: #333333; font-size: 14pt; text-align: left; font-family: Helvetica, verdana, sans-serif}
    h2 {color: #333333; font-size: 10pt; text-align: left; font-family: Helvetica, verdana, sans-serif}
    h3 {color: #333333; font-size: 10pt; text-align: center; font-family: Helvetica, verdana, sans-serif}
    h4 {color: #333333; font-size: 10pt; text-align: center; font-family: Helvetica, verdana, sans-serif}

    Then I figured I could juts change the fonts to what I wanted …

    But in the style sheet that comes with the Twenty Ten theme I can’t find where to change the fonts for the key text styles …

    Could anyone point me in the right direction please :-)

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

  • Unknown's avatar

    CSS is above my pay grade – but you want to “add to the existing sheet” based on what I have seen in the Forum – don’t replace the whole style sheet, that seems to give more problems than it solves – your additions are scanned last and change what was ahead of your additions.

    Hope this helps a bit –

  • Unknown's avatar

    Ah … I have already done that … is there a way to revert?

  • Unknown's avatar

    If I put this at the end of the style sheet it switches the body font …

    p {font-family: Helvetica, verdana, sans-serif}

    But I don’t know all the names of the other styles used for the links & roll overs?

    Are these set as a default in the style sheet somewhere?

  • Unknown's avatar
  • Unknown's avatar

    Not sure how much CSS stuff is here – but lots of help: http://wpbtips.wordpress.com/

  • Unknown's avatar

    AH .. right that has helped … I have revereted and have just been adding bits to the end of the style sheet.

    Such as:

    body {
    font:normal .8em Verdana, Arial, Sans;
    }

    This changes all the fonts to a sans serif font which is what Iwanted to do but the body copy of a post is too big and it seems to be scalled off what I set with the above.

    So if I change the above to say .5em the font in the widgets is getting scaled too …

  • Unknown's avatar

    Note: further experimentation shows that the size I set with this:

    body {
    font:normal .8em Verdana, Arial, Sans;
    }

    Dosn’t change the size of the body copy in a post but it does chage the font and it does change the size of the text in the widgets.

    How do I change the text size of the post body copy?

  • Unknown's avatar

    I could fix this if I just could work out what the style name of the post title, body & link was … I have been experimenting with the various names but can’t work it out.

    I have managed to change the size of the size of the fonts for the titles & widgets and the font of the above but it seems the size is set via another variable that I can’t fathom …

  • Unknown's avatar

    Think of the font and other settings in the body section as a “base” setting. Generally then the designer will set different fonts and sizes as needed in the individual ID’s and classes for each specific element.

    The overall font setting for the content (posts and sidebar) are defined under
    #content, #content input, #content textarea

    If you want to set a font or font size only for the post content then you can define that in .entry-content, .entry-summary

  • Unknown's avatar

    Thanks … I’ll give that a go tomorrow …

  • Unknown's avatar
  • Unknown's avatar

    My next question is going to be how to reduce the amount of white space between the header image and the top of the page/screen in which the title text resides

  • Unknown's avatar

    My curiosity got me and I have had a dabble tonight and I now have control of the entry body copy with:

    .entry-content {
    font:normal 14px Verdana, Arial, Sans;
    }

    Excellent thank you … so what is the name for the style of the heading that features just above each post? … I did try entry-summary but that is not it …?

    On my page … http://rickslejog.wordpress.com/

    it is the text

    £2,184.99 raised on-line for AMR so far .. thanks everyone :-)

    That I want to make a bit smaller ….

  • Unknown's avatar

    That is actually determined by the site-description (tagline) at right. The longer the tagline, the more lines and the further down the header element is pushed. There are several choices.

    1. Shorten the tagline
    2. increase the width of the tagline element and move it to the left under the title
    3. decrease the font size

    There are some other options as well using positioning that can move the tagline up, but it appears strange to have it start above the site title.

  • Unknown's avatar

    Just look to my eye that there is a little too much white space between the site title

    “Rick Perkins is cycling from Land’s End to John O’Groats”

    … and the top of the image …

    Tried fiddling with the entry-summary variable to no success :-(

  • Unknown's avatar

    I have cracked the summary heading font size with

    #content .entry-title {
    color:#000;
    font-size:16px;
    }

    Needed the #content not just .entry-title .. .dunno why?

    Results … now for that white space …

  • Unknown's avatar
    #header {padding-top:5px;}
    #site-description {margin:0 0 5px;}
  • Unknown's avatar

    Excellent … thanks that does exactly what I was looking to do …

    I now have this templated tweaked to look as I want it with just the below additions to the style sheet.

    Thank you to all those who chipped in help :-)

    #header {
    padding-top:20px;
    }

    #site-description {
    margin:0;
    }

    body {
    font:normal 14px Verdana, Arial, Sans;
    }

    #content .entry-content {
    font:normal 14px Verdana, Arial, Sans;
    }

    #content .entry-title {
    color:#000;
    font-size:16px;
    }

    #site-title {
    font-size:24px;
    }

  • The topic ‘Changing body & links fonts in Twenty Ten theme’ is closed to new replies.