Make the Links in the Sidebar to Change Color and/or Be Underlined when the Mouse Hovers on them

Make the Links in the Sidebar to Change Color and/or Be Underlined when the Mouse Hovers on them

Make the Links in the Sidebar to Change Color and/or Be Underlined when the Mouse Hovers on them

How to make the links in the sidebar to change color and/or be underlined when the mouse hovers on them?

There are different ways to implement such behavior but the recommended and cleanest way to do that when using Ad Flex Blog or Ad Flex Niche is described below. It’s the best way because it ensures your custom changes will remain effective even after an upgrade to a later minor or major version.

The recommended way is as follows:
- On the server, located the folder:
WP_ROOT/wp-content/themes/ad-flex-blog/syndication (in the case of Ad Flex Blog) or WP_ROOT/wp-content/themes/ad-flex-niche/syndication (in the case of Ad Flex Niche)
- In the folder, you’ll see the filename “_syndication_custom_stylesheet.css”
- Rename the file “_syndication_custom_stylesheet.css” to “syndication_custom_stylesheet.css”
- Open the file “syndication_custom_stylesheet.css”
- Add the following code at the end of the file content “syndication_custom_stylesheet.css”:
a) To make the sidebar links change color when the mouse hovers on them:

#sidebar li a:hover {
color: #FF0000;
}

Of course, you will have to change the color value “FF0000″ in the above example to the color value you want to be used. The color value must be in RGB HEX format and preceding by the symbol #. For instance: #FFFFFF, #00FF00, #ABCDEF, etc.
b) To make the sidebar links be underlined when the mouse hovers on them:

#sidebar li a:hover {
text-decoration: underline;
}

c) To make the sidebar links change color and be underlined when the mouse hovers on them:

#sidebar li a:hover {
color: #FF0000;
text-decoration: underline;
}

As said previously, you will have to change the color value “FF0000″ in the above example to the color value you want to be used. The color value must be in RGB HEX format and preceding by the symbol #. For instance: #FFFFFF, #00FF00, #ABCDEF, etc.
- Save the file “syndication_custom_stylesheet.css”
- Connect to the WordPress Dashboard and go to the Ad Flex Blog/Niche “Theme Options”
- Locate the section “General Page Layout Options”
- Scroll down to the parameter “Custom Stylesheet Code” and enable it.
- Click on “Update All Options”

Now you can connect to your blog URL and you should see the results.

Note: Depending on your web browser and your current caching setting, your may need to refresh/reload the web page or restart your web browser.

No comments yet. Be the first.

Leave a reply