• Hey everyone!

    How would I go about changing the font size site wide (except for the homepage, that I already figured out). I would like the main paragraph content larger than the default size and the html editor doesn’t give you many choices. I’d also like to change the headers or title sizes as well but again, only have the html editor choices to work with.

    I would also like to change the hover color site wide for both buttons and text as well.

    Thanks in advance for the help!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • What do you mean by “html editor?” Hopefully you are not going through Appearance > Editor. In general, you should not be making changes to the theme files directly. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if changes need to be made to the theme in order to accommodate changes to WordPress, then your modifications will be lost. Instead, either create a child theme or use a CSS plugin like Jetpack or Custom CSS Manager. In your case, just making changes to the CSS is all you need, so I would recommend just installing a plugin.

    I would also recommend learning how to use a web debugging tool like Firebug or Chrome Developer Tools (comes built-in with Chrome). Then, all you need to do is to right-click on an object on your web page, select Inspect element, and you can see the CSS rule(s) which affect that element. You can then add your own overriding CSS through a plugin. If you don’t understand CSS, there’s a good tutorial here.

    As an example, if you open up your site in Chrome, right-click on a link and select Inspect element, the DevTools window will open up at the bottom of the browser, and you’ll see a rule on the right pane that reads:

    .basic a {
      color: #428BCA;
    }

    So this is the default color for links. If you want to see the rule for hovered links, you right-click on the highlighted element on the left-pane, select Force element state > :hover and the element will act like the mouse is hovered over it. Then you’ll see the rule on the right-pane for a hovered link:

    .basic a:hover {
      color: #2A6496;
    }

    In your CSS plugin, then, you would just add an identical rule, but using whatever color value you want. #ff0000 would give you red, for example.

    Thread Starter roncarletonaudio

    (@roncarletonaudio)

    Hey CrouchingBruin,

    Thanks for the reply. I guess I should have elaborated. I have created a child theme already and yes that is where I am making my changes. I have been using firebug to locate the code and making the appropriate changes in the child theme. It has been working great for most of the changes but I cannot locate the code to change the font size site wide including the main menu (other than the homepage, there are blocks set up on the homepage with different size fonts and those pulled up right away and was able to make changes) but on the rest of the pages throughout the site, firebug is only showing font style and color, I cant locate the font size for some reason. Same with the font hover color for hyperlinks and the button hover colors. Ive scrolled through style.css to see if I locate the code but dont see it.

    What I mean by the html editor was since I couldnt find the font size in firebug or style.css I could just change the font size in the editor but those are not ideal size options and do not help me with the button hover color and header sizes either so it was just a less than ideal solution.

    Im looking at the tutorial you linked to… so if I want to change the body and header font size site wide (excluding homepage) then all I need to do is paste this code in the child theme’s style.css, change to the size I want instead, and it will override the current font size? I dont actually need to locate the code myself in the parent theme? I was under there impression that each theme was coded a little differently so I needed to find the exact code for the theme im using.

    h1 {
    font-size: 40px;
    }

    h2 {
    font-size: 30px;
    }

    p {
    font-size: 14px;
    }

    Thank you very much for the help!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change font size size & hover colors wide?’ is closed to new replies.