Custom CSS for Site Title

So the rule that you posted only works for the color property because the selector for the rule doesn’t have a high enough specificity. That is, there is this rule in the theme’s style.css file:

#logo h1, #logo-sticky h1 {
    font-size: 22px;
    line-height: 1.4;
    font-weight: bold;
    margin-top: 10px;
}

So the use of the ID logo gives the rule a higher specificity than the use of the class name site-title, which is why the font size remains 22px. What you should do is use the same selector as the theme, and as long as your rule comes after the theme’s rule, then your rule will override the theme’s rule:

#logo h1 {
   font-size: 50px;
   color: #0000ff
}

If you are using the theme’s Custom CSS option (Appearance → Customize → Theme Options → General Settings → Custom CSS), then your rules will come after the theme’s style.css file, so it’s just a matter of using the same selector as the rule you are trying to override.

Do not edit the theme’s style.css file (or any other theme file). If you do, then your changes will be lost the next time you update the theme.

If you are trying to figure out what existing rules are in place for a particular element, then learn to use a web debugging tool like Firebug (a Firefox extension) or Chrome Developer Tools (which is already a part of Chrome). I personally like Chrome DevTools, it’s as easy as right-clicking on an element and doing a inspect element.

• This reply was modified 8 years ago by CrouchingBruin.

Dude your the man, I appreciate the help and the explanation!!! Crouching Bruin for President!!!

@crouchingbruin Hey man is there anyway you can help me out with the featured button on the slider. I have been using chrome inspect tool to figure out a lot on my own but this one has me stumped. Im trying to adjust the vertical.align from the default baseline position to the bottom of the slide. My current site is https://www.herkimer.com

Thanks man your the best, or anybody else who has a sweet answer too.

You can try adding these two rules:

#slider .featured {
   vertical-align: bottom;
}
#slider .featured-link {
   margin-bottom: 35px;
}

The first rule will move the button (and the caption on the other slide) to the bottom. The second rule will move the button off the very bottom so it’s not behind the slide tabs. You can adjust this spacing as you like.

@crouchingbruin You are the best, like a CSS wizard lol. Any chance I can get your email or another way of direct contact with you. I have lots of little questions like this and maybe we can work something out??

Glad it worked.

Unfortunately, forum rules prohibit the posting of contact information. Just post your question on this forum and someone will more than likely be able to help you. You should open a new thread, though, for each problem.