Wordpress Themes - WP Forum at BFA

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)

fromtheranks Jun 14, 2009 08:53 PM

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.

fromtheranks Jun 14, 2009 09:27 PM

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.

Geoff Sep 4, 2009 08:25 PM

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

Geoff Sep 4, 2009 09:44 PM

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;}

sunnivie Sep 14, 2009 12:01 PM

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/

juggledad Sep 14, 2009 01:56 PM

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

WesleyTack May 22, 2010 02:12 PM

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

simseuss Aug 4, 2010 06:29 PM

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.

juggledad Aug 5, 2010 05:07 AM

what is the url?


All times are GMT -6. The time now is 11:59 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.