How to Make Font Bigger for all Titles on Home Page

  • Author
    Posts
  • #1492644

    I am using the Twenty-Eleven theme. With this theme, the titles of the widgets (“Quick Links,” Contact”) in the showcase sidebar as well as the title of my featured post (“Featured Post”) and recent posts (“Recent Posts”) on the home page are super small by default. Is there any way using css to increase the font size for all of these titles? Check out my home page and you will see what I mean.

    Thanks!

    The blog I need help with is enviroethics.org.

    #1492724

    Hi, it does indeed have small widget titles. :)

    Add the following CSS to yours and adjust as desired.

    .wf-active .widget-title {
        font-size: 9px;
    }
    #1492725

    Super. Now, how do I do it for the featured posts and the recent posts on the front page?

    #1492726

    And for all category archives, e.g., http://enviroethics.org/category/blog/

    ;)

    #1492730

    Scratch the category archives: I decided to hide that header and found the css for twenty-eleven to do so.

    But I would still like to increase the font size of the other two headers (featured posts and recent posts ) on the home page. Thanks!

    #1492733

    This will change both the recent and featured titles on the main page.

    .wf-active h1.showcase-heading {
        font-size: 9px;
        font-weight: 400;
    }
    #1492740

    Thanks, sacredpath. Look great!

    #1492749

    You are welcome.

    #1492753

    I am amazed at how many tweaks and improvements one can make to WP’s themes using css, and how much better one’s posts can look with just a little bit of html coding. Although I don’t have time to get into this on a regular basis, I see the attraction. I could easily spend hours and hours, days and days, tweaking and building websites and/or web products. Cheers!

    #1492754

    You are welcome, and yes, it can be a lot of fun. :)

    #1492787

    A couple of more spots that the miniature text pops up.

    (1) In the header of a category: “Featured” (http://enviroethics.org/category/blog/ );
    and (2) if you click page two of the current blog post, in the header above replies, it reads “One thought on “US Press Not Reporting on Urgency of the Climate Change Problem” “

    Thanks!

    #1492810

    Sneaky, aren’t they with those tiny fonts. :)

    For category pages:

    .entry-header .entry-format {
    font-size: 9px;
    }

    For the line above the comments:

    .wf-active #comments-title {
    font-size: 9px;
    font-weight: 400;
    }
    #1492811

    Works like a charm. I decided that I don’t need the line above comments and made it disappear by changing the font size to 0:

    .wf-active #comments-title { font-size: 0px; font-weight: 400; }

    I am sure that my solution is a work around. Is there a better way to do this, or am I fine?

    #1492812

    I would suggest this instead.

    .wf-active #comments-title {
    display: none;
    }
    #1492814

    Got it.

    Lots of little improvements add up to one aesthetically appealing and streamlined site. I’m not quite there yet, but am getting closer. Tx!

    #1492817

    You are welcome and it is looking very good!

    #1492835

    One more: how about the subtitle “Advancing the Field of Environmental Ethics and Philosophy since 1990” that is above the header image on every page?

    #1492836

    That would be here for changing color and text size.

    #site-description {
        color: #7A7A7A;
        font-size: 14px;
    }
    #1492838

    Got it. Also, how do I nudge up my site’s name and tagline? I don’t know the css handle for the name, though I am guessing that the css will look something like:

    #site- _____________ {
    color: #___________;
    font-size: __px;
    margin-top: __px;
    }

    Close?

    #1492839

    Yup, that will work. You will likely have to add !important to the font size since it is set with the Typekit fonts and the !important will override that setting.

    On moving the site title and description up or down, there is padding on the top of the site title, so I would use this and adjust the top padding (3.65625em) to position the two vertically.

    #site-title {
    padding: 3.65625em 0 0;
    }

The topic ‘How to Make Font Bigger for all Titles on Home Page’ is closed to new replies.