How do I change heading size??

  • jessica@violetcrownyoga.com

    (@jessicavioletcrownyogacom)


    11 years ago

    I am using the Vortex theme, and I CANNOT figure out how to modify heading sizes. I modified the CSS content for “Headings,” (H1, H2, etc). I played around with it to make sure it was in the right section, and I was able to successfully modify the font, but the sizes don’t change. I assume this is due to some other content style or something. The heading I’d like to change is based on a menu, which is populated by page name, so I think it might be something related to PHP? I don’t know. I don’t totally understand CSS or PHP. Here’s one of the pages:

    http://www.violetcrownyoga.com/

    I’d really just like to modify the giant “Welcome” to be smaller than the logo font.

    Do I need to paste code here? Just in case, here’s the heading section. This is as it comes straight from the stylesheet. I modified in the CSS Edit section. Basically changed the font to Courier. I also had to change the individual H1, H2, etc. sections to have a B after them because that seemed to be causing an error since they were already defined previously. Anyway, modifying Font Size does nothing.

    /**
    |————————
    | =Headings
    |————————
    */

    h1, h2, h3, h4, h5, h6 {
    font-family: ‘Vidaloka’, serif;
    color: #2f2f2f;
    font-weight: normal;
    clear: both;
    }

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }

    h1 {
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 14px;
    }

    h2 {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 20px;
    }

    h3 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 20px;
    }

    h4 {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 22px;
    }

    h5 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
    }

    h6 {
    font-size: 12px;
    line-height: 19px;
    margin-bottom: 25px;
    }

    /**

    Thanks for any insight!

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    (@esmi)

    11 years ago

    Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin. There’s no way to do what you want without knowing at least some CSS and I’d recommend that you try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

    Once you have located the CSS you need to change, add the new CSS to your custom CSS plugin or or child theme’s style.css file.

    Thread Starter jessica@violetcrownyoga.com

    (@jessicavioletcrownyogacom)

    11 years ago

    Well, I understand it a little, just not enough to determine if there is some other place I should be looking to change it. WordPress has a section where you can copy and paste from the main theme and make changes. It overrides anything in the main style sheet. That’s where I’m working. Anyway, does the code above not look like where I should change the heading size? It seems like that’s what would change it, but nothing is happening. It does allow me to change font type, so I’m confused about why one aspect is changing but not another.

    esmi

    (@esmi)

    11 years ago

    just not enough to determine if there is some other place I should be looking to change it.

    That’s what Firebug is for. It will help you to determine what CSS needs to be over-written.

    WordPress has a section where you can copy and paste from the main theme and make changes.

    Not be default, it doesn’t. Only if you have a custom CSS plugin already installed.

    Thread Starter jessica@violetcrownyoga.com

    (@jessicavioletcrownyogacom)

    11 years ago

    Hmm, I must have a CSS plugin. There’s a section with this text:
    /*
    Welcome to Custom CSS!

    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.

    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don’t need to copy all
    your theme’s stylesheet content.
    */
    So I copied from the theme CSS and made changes here.

    I’ll check out the Firebug thing. Sounds like it would be helpful.

    WPyogi

    (@wpyogi)

    11 years ago

    Yes, a few themes do have that as an option – all the better for you!

    And yes, Firebug is terrific – it shows this is the CSS you’d need to use:

    .entry-title {
   font-size: XXpx;
}

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How do I change heading size??’ is closed to new replies.