Change CSS Hover Effect of WordPress Title Without Altering Theme

Posted in Tutorials

Here we show the default WordPress TwentyThirteen theme with the default hover effect. When mouse is over the title, an underline is applied…

Let’s say that we want to change the CSS hover effect so that when hovered the title color changes to blue and no underline appears.

There are may ways to alter your theme’s style.  While some themes offer an option in their settings to add your custom code, other times you’ll have to edit the theme’s style.css. If the styling is in the plugin files, then it may require finding which file(s) are used for the styling. This can be cumbersome and time consuming.  Another drawback is that it requires altering the theme file.

For a simple CSS style change, one easy way is to use a plugin that allows you to put in CSS code in the WordPress dashboard such that it overrides the current style.  One such plugin is Simple Custom CSS plugin.  Another is Custom CSS Manager plugin.  For the purpose of this tutorial, we’ll use the Simple Custom CSS plugin linked here (version 2.0 at the time of this writing).

After installing this plugin, click the “Settings” link in the “Plugins -> Installed Plugins” …

After clicking the “Settings” link, you get the “Simple Custom CSS” page where you can enter your CSS rules.

For future reference, you can also arrive at this page from menu “Appearance -> Custom CSS”.

We entered the CSS rule as shown…

h1.site-title:hover {
   text-decoration: none !important;
   color: blue;
}

If you refresh the home page in another browser window, you can see that the CSS hover effect of the title is now blue with no underline.

Try to avoid using double quotes in your CSS rule.  If you must, then you should checkmark the box “Allow Double Quotes”.

The CSS Hover Code

The question is how did we come up with this CSS rule.  First we use the browser’s code inspector to determine the CSS selector for the title …

Here we show Firebug in Firefox.  But using Developer Tools in Chrome is similar.   Right-click and select “Inspect Element” in the browser shows that our website title can be targeted using h1 of class “site-title” …

h1.site-title {

}

Then we try the CSS rules as follow …

h1.site-title:hover {
   text-decoration: none;
   color: blue;
}

Testing the hover effect on another browser window, we see that hover turns the title blue but the underline remains.  It must be that there is another CSS rule that is higher in precedence.   Our “text-decoration: none” rule is not strong enough.  In this case, add !important to our rule as shown below in order to give our rule higher CSS precedence…

h1.site-title:hover {
   text-decoration: none !important;
   color: blue;
}

Testing this rule it works.

While it is true that you still need to be somewhat familiar with CSS in order to customize style, the Simple Custom CSS plugin allows you to do so without needing to go and alter the theme files (which sometimes can be locked).

An alternative method without using the Simple Custom CSS plugin, is to modify the theme’s style.css file.  Adding the same rule to the button of style.css would have the same effect.

 

---