WordPress.org

Support

Support » Themes and Templates » [Resolved] How to change font sizes of the theme's different text areas?

[Resolved] How to change font sizes of the theme's different text areas?

  • Semanticfield
    Member

    @semanticfield

    Hi,

    How do I change the font sizes of different text areas of this theme?

Viewing 13 replies - 1 through 13 (of 13 total)
  • ElectricFeet
    Participant

    @electricfeet

    Here are some font size/styling changes I’ve made in my site:

    /* Change menu font/navbar padding: 2nd and 4th for horiz padding */
    .navbar .nav > li > a {
      padding: 5px 16px 5px 16px;
    /* and change font in menu */
      font-size: 16px;
      text-shadow: none;
    }
    
    /* Change font size of first letters in menu */
    .navbar .nav > li > a:first-letter {
      font-size: 16px;
      text-shadow: none;
    }
    /* Change heading weights */
    h1,h2,h3,h4,h5,h6 {
    margin: 0;
    text-shadow: none;
    font-weight: 300;
    }
    /* Change heading text sizes */
    h1 {
    font-size: 28px;
    }
    h2 {
    font-size: 25px;
    }
    h3 {
    font-size: 18px;
    }
    /* Change the h2 text size on front page under the featured pages circles */
    .marketing h2 {
    margin: 0;
    font-weight: 300;
    font-size: 25px;
    line-height: normal;
    }

    You can enter these in the Custom CSS panel of Customiz’it!

    If you want to understand more:

    1. Install firebug.
    2. Watch this video to learn how to use it.
    3. Right-click the text you’re interested in changing and select “Inspect Element with Firebug”
    4. Look at the CSS that was used to get it that way.

    @nikeo, could you add this to “other styling” in the FAQ?
    <li><a href="http://wordpress.org/support/topic/how-to-change-font-sizes-of-the-themes-different-text-areas">change font sizes?</a></li>

    Semanticfield
    Member

    @semanticfield

    Hello,

    Thanks for the help.

    I just want to change to default paragraph font-size of my:

    1. pages.
    2. and post.
    3. and sidebar text.
    4. and front-page paragraph text.
    5. and front-page featured page area text.
    6. and slider area text

    Any more help on that would be much appreciated, thank you!

    ElectricFeet
    Participant

    @electricfeet

    For 1-5, try:

    body {
        font-size: 12px;
        line-height: 18px;
    }

    (it was 14px and 20px).

    The problem for 6—the slider—is that there is no “default paragraph font-size”. It changes as the window shrinks in size. For the large-sized window, you could add:

    h1 {
        font-size: 28px;
    }
    .lead {
        font-size: 19px;
    }

    (it was 38.5px and 21px)

    You could also try playing around with font-weight: 300; (values can be 100 (very light) to 700 (superbold)), which may give you the effect you want as well/in addition.

    Semanticfield
    Member

    @semanticfield

    Thank you very much!

    Semanticfield
    Member

    @semanticfield

    And how to change the font-size of the widget area please?

    ElectricFeet
    Participant

    @electricfeet

    Now you’ve watched the firebug video, you should be able to answer that for yourself 🙂

    It depends on the widget area. The footer widgets are:

    footer#footer p, footer#footer a {
        color: #FAFAFA;
        font-size: 11px;
        line-height: 21px;
        margin-bottom: 2px;
        text-align: center;
    }

    But this css only “takes” if you select the “automatically add paragraphs” option (or you insert them yourself)

    Thank you @electricfeet!

    ElectricFeet
    Participant

    @electricfeet

    You’re welcome!

    hi, i went to custom css and added:
    h1 {font-family: “arial”;
    font-size: 28px;
    }

    hoping to make that title change a bit but it didn’t work.
    is there a custom css that i can add, wich will allow me to change the titile size and font (plus other effects like underline), directly from wp page posting menu?asking too much for a noob?

    rdellconsulting
    Participant

    @rdellconsulting

    Lots of noobs around on this Forum!

    Suggest you try reading the documentation and snippets which should give you what you need.

    Start a new thread if you have any further questions.

    carrion215
    Member

    @carrion215

    Hi all, I’m not sure if this is the right place to ask but I have a plugin (appointment+) and I’ve been going crazy trying to figure out how to edit the background color of it. Thanks to this thread I was able to use firebug to get a lot going on the website, but this plugin is not being cooperative. Any ideas or a push to the right thread would be appreciated, thanks.

    rdellconsulting
    Participant

    @rdellconsulting

    Start a new thread, and we’ll try to help.

    Add a link to your site too please.

    carrion215
    Member

    @carrion215

    Sure but don’t mind the mess lol, I’m still working on it.

    http://www.outofsitepeaceofmind.com/make-an-appointment

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Resolved] How to change font sizes of the theme's different text areas?’ is closed to new replies.