WordPress.org

Forums

Customizr
[resolved] How to change font sizes of the theme's different text areas? (14 posts)

  1. Semanticfield
    Member
    Posted 1 year ago #

    Hi,

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

  2. ElectricFeet
    Member
    Posted 1 year ago #

    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>

  3. Semanticfield
    Member
    Posted 1 year ago #

    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!

  4. ElectricFeet
    Member
    Posted 1 year ago #

    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.

  5. Semanticfield
    Member
    Posted 1 year ago #

    Thank you very much!

  6. Semanticfield
    Member
    Posted 1 year ago #

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

  7. ElectricFeet
    Member
    Posted 1 year ago #

    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)

  8. Nora2014
    Member
    Posted 1 year ago #

    Thank you @ElectricFeet!

  9. ElectricFeet
    Member
    Posted 1 year ago #

    You're welcome!

  10. Alex518
    Member
    Posted 1 year ago #

    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?

  11. rdellconsulting
    Member
    Posted 1 year ago #

    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.

  12. carrion215
    Member
    Posted 1 year ago #

    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.

  13. rdellconsulting
    Member
    Posted 1 year ago #

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

    Add a link to your site too please.

  14. carrion215
    Member
    Posted 1 year ago #

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

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic