Wordpress Themes - WP Forum at BFA - How To add Bold and Underline to Page and Category Menu Bar Hovers

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - How To add Bold and Underline to Page and Category Menu Bar Hovers (http://forum.bytesforall.com/showthread.php?t=2045)

How To add Bold and Underline to Page and Category Menu Bar Hovers

After studying some tips and code snippets from Flynn on a couple different threads I worked out how tell Hover to Bold and Underline the Page and Menu bar text when the cursor is, well, hovering over it.

There may well be a way to do a CSS Insert and accomplish the same thing but I haven't figured that tool out yet (what it does and doesn't does). Anyway, here's the code for 3.3.3's Style.css file -- my simple changes in red:

Code:

/* "current" page and hover */

ul.rMenu li.current_page_item a:link, 

ul.rMenu li.current_page_item a:active, 

ul.rMenu li.current_page_item a:hover, 

ul.rMenu li.current_page_item a:visited, 

ul.rMenu li a:hover

        {

        font-weight: bold;

        text-decoration: underline;

        }

/*added*/

/* "current" category and hover */

ul#rmenu li.current-cat a:link, 

ul#rmenu li.current-cat a:active, 

ul#rmenu li.current-cat a:hover, 

ul#rmenu li.current-cat a:visited, 

ul#rmenu li a:hover

        {

        font-weight: bold;

        text-decoration: underline;

        }

P.S. Don't forget the semi-colons.
P.S.S. Make a backup copy of this file before making the changes.

Hope this helps.

Sigh. Minor correction.

The bold doesn't work as written. Because of the colors I was using for text and hover it appeared so at first ... but ... then I took a closer look. :o

After a bit of research it seems that header.php is "stepping on" (to use the phrase loosely) the font-weight property:

Code:

font: <?php echo $bfa_ata['cat_menu_font'];

At least the underline works neatly for hover.

Code:

/* "current" page and hover */

ul.rMenu li.current_page_item a:link, 

ul.rMenu li.current_page_item a:active, 

ul.rMenu li.current_page_item a:hover, 

ul.rMenu li.current_page_item a:visited, 

ul.rMenu li a:hover

        {

        text-decoration: underline;

        }

/*added*/

/* "current" category and hover */

ul#rmenu li.current-cat a:link, 

ul#rmenu li.current-cat a:active, 

ul#rmenu li.current-cat a:hover, 

ul#rmenu li.current-cat a:visited, 

ul#rmenu li a:hover

        {

        text-decoration: underline;

        }

Maybe someone else can figure out how to sneak in Bold on Hover only.

i am using this

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover {text-decoration: underline},
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
font-weight: bold;
}

it makes the page menu bold with an underline hover

to get bold and underline on hover maybe you could try this

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover {text-decoration: underline; font-weight: bold},
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active

in the end i used this,,,,maybe a little long winded but it seems to work ok. you can just a few options to suit yourself

div#menu1 ul.rMenu li a:link {text-decoration: none; font-weight: bold;},
div#menu1 ul.rMenu li a:hover {text-decoration: underline; font-weight: bold;},
div#menu1 ul.rMenu li a:visited {text-decoration: none; font-weight: bold;},
div#menu1 ul.rMenu li a:active {text-decoration: none; font-weight: bold;}

OK, so this may be a silly question, but I can't find a way to change the color on the category heading on the sidebar. I thought it would be in the widget, but I can't find it for the life of me.

I've changed the background color of the sidebar and have all the actual links and hovers set up and colored appropriately, but the actual header on the sidebar that says "category" is still the same color as my background. There MUST be a way to change this, right?

It's the same case with all the headers in my sidebars on both sides. Help please!

Here's my site: http://www.outfrontcolorado.com/blog/

did you try ATO->Style WIDGETS->Widget Title?

hey,
I also needed this, and it works, thanks for this thread!
One issue I'm having, I wonder if anyone else had this and knows a fix?

In some versions of firefox (not mine) some menu links are underlined and others aren't?
I do have this issue when I check my site in IE, and in IE the hover underline doesn't work at all?

Anyone have any suggestions ?

thanks in advance

I have a similar problem but I have a blue underline on my links only showing on Firefox (the link font is green). I added no underline in CSS Inserts after changing it in ATO > Body text Links, and it works in IE, but can't seem to get rid of the line in Firefox.