WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Twelve Header font size (13 posts)

  1. Bodacious
    Member
    Posted 1 year ago #

    Can anyone tell me how to simply change the font size in the header of the twenty twelve template?

    I want to change the "site title" font size and the "site description" font size.

    Can't seem to find the right place in the files to edit them. Help would be greatly appreciated.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Do you have a child theme or custom CSS plugin installed? That's the first step so that your changes won't be erased when WP is updated. Once you have that done, post a link to your site and someone can likely help you.

    Or try using a tool such as Firebug to work with CSS.

  3. Bodacious
    Member
    Posted 1 year ago #

    Hi-

    No child theme or custom CSS installed. This is basic site nothing fancy -- but it would be nice to figure out where in the CSS I can quickly edit to change the font size. It doesn't matter if template is updated, the site is a temporary one. I figure this is something quickly and easily done in the editor -- you just have to know know where. Everything I've tried so far in the CSS doesn't work so I must be missing something. Adding a child theme or a custom CSS is just a lot more work for very little need (for me and my particular circumstance). I looked a Firebug and it doesn't point to the right bit of CSS -- tells me where the font type is, but not what is controlling its size.

    I thought this should be relatively easy to do.

  4. Bodacious
    Member
    Posted 1 year ago #

    Here is the css that I think is supposed to work:

    `.site-header h1 {
    font-size: 24px;
    font-size: 1.714285714rem;
    line-height: 1.285714286;
    margin-bottom: 14px;
    margin-bottom: 1rem;
    }
    .site-header h2 {
    font-weight: normal;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #757575;`

    I can get it to alter h2, for the site description, but any changes to h1 in this part of the css don't seem to have any affect on the site title.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Sorry but with a default theme, especially, it is imperative that you not modify theme files - as you need an unchanged copy for troubleshooting purposes. Installing a custom CSS plugin is easy and fast -- once you do that, someone can help you with the changes you need to make.

  6. Bodacious
    Member
    Posted 1 year ago #

    How do I install a "custom CSS plugin", then if that's the only way to do it?

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    These are two possibilities:

    http://wordpress.org/extend/plugins/jetpack/ - a bit more complicated to install but have other useful features

    http://wordpress.org/extend/plugins/my-custom-css/

    Go to plugins and install from that dashboard screen.

  8. Bodacious
    Member
    Posted 1 year ago #


  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Once you have the custom CSS set up - put this CSS in it and change the font size to whatever works for you:

    .site-header h1 {
        font-size: XXrem;
    }
  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Just to explain a bit more, using Firebug shows this CSS for that element:

    .site-header h1 {
        font-size: 1.85714rem;
        line-height: 1.84615;
        margin-bottom: 0;
    }

    So you can use that - by copying the part you want to change to the Custom CSS - in this case only the font size -- and change the size to whatever you want. Then that CSS will override the existing CSS for that element.

  11. Bodacious
    Member
    Posted 1 year ago #

    Yes. Just figured it out (by trial and error) on my own before I saw your post. Thanks.

  12. Bodacious
    Member
    Posted 1 year ago #

    Interestingly, I couldn't get Firebug to show me that.

  13. p5systems
    Member
    Posted 1 year ago #

    Hi

    You can use firebug option to check the class name of the title.
    Then you can apply the css for the class with your stylish parameters.

    The class name: site_title.
    so you can apply the css to that class.

Topic Closed

This topic has been closed to new replies.

About this Topic