Wordpress Themes - WP Forum at BFA - [SOLVED] how to style menus...

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

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] how to style menus... (http://forum.bytesforall.com/showthread.php?t=11303)

[SOLVED] how to style menus...

How do I make the menus entirely transparent (so we just see the background image), with the border top and bottom of 1px and blue?

Thanks,
Derek

http://www.1775thebook.com

This worked for me but you might also want to delete or comment the menu CSS in ATO>Add HTML/CSS Inserts>CSS Inserts

HTML Code:

.menu-item {

background:transparent !important;

border-top:1px solid blue;

border-bottom:1px solid #110065;

}

Thanks for the reply. I should've stated: I only want it transparent when it is either a) not on the page or b) not hovered over. Otherwise, I want the hover color and the color selected when it is on that page. How do I do this?

Also, since I've been tweaking this code, I've now lost something: when you hover over them as is, the hover color is #CCCCCC, which is the "parent" color as set in ATO>Menu 1. It used to be, and I expected it to be, #880000, the color I have set in ATO>Menu 1 for hover. Any ideas on this?

(I added juggledad's cheatsheet, and since then, this has cropped up. His menus cheat sheet CSS: http://forum.bytesforall.com/showthr...us+transparent )

the cheat sheet is just a guide so you can see which CSS effects which area of the menus. You should remove it once you understand the area of the CSS to change.

Okay, I nearly have it the way I want.

I've got the menu generally transparent with the first bit of code here, as given above, but color the other links accordingly, and do not call for any transparency anywhere else in the CSS, except as noted below.

Code:

div#menu1 ul.rMenu {

        background: transparent !important;

        border-bottom: 1px solid #000066;

}

.menu-item {

        background: transparent !important;

        /*border-bottom: 2px solid #000066;*/

}

/* ================================================ */

/* Page Menu item features                          */

/* ================================================ */

ul.rMenu li,

ul.rMenu li a:link, 

ul.rMenu li a:visited {

        color: #000066 !important;  /*text color*/

}

ul.rMenu li a:hover, 

ul.rMenu li a:active {

        background: #880000 !important;

        color: #ffffff !important;  /*text color*/

}

This is almost where I'd like it. My chief question at the moment:

How do I change the color of the tab for the page you are presently on? It does not seem to be effected by any of

ul.rMenu li,
ul.rMenu li a:link,
ul.rMenu li a:visited, ul.rMenu li a:hover,
ul.rMenu li a:active

except where changes to those effect all of the buttons.

I think the elements I want to change are these, but I got no results when I tried them:

Code:

ul.rMenu li.current-menu-item, ul.rMenu li.current_page_item, ul.rMenu li.current-page-item {

        background: #000000 !important;

        color: #ffffff !important;  /*text color*/

}

Any ideas?

the reason it won't take is that there is a background set in the CSS for the links (the <a>) in the code for the pseudo classes. you need to use

HTML Code:

div#menu1 ul.rMenu li.current-menu-item a:link, 

div#menu1 ul.rMenu li.current-menu-item a:active, 

div#menu1 ul.rMenu li.current-menu-item a:hover, 

div#menu1 ul.rMenu li.current-menu-item a:visited, 

div#menu1 ul.rMenu li.current_page_item a:link, 

div#menu1 ul.rMenu li.current_page_item a:active, 

div#menu1 ul.rMenu li.current_page_item a:hover, 

div#menu1 ul.rMenu li.current_page_item a:visited {

background-color:#000000;

color:#ffffff;

}

That worked perfectly, except I had to declare the two items were important. That is, I duplicated your code, but made the two CSS styles as:

Code:

        background-color: #336699 !important;

        color: #ffffff !important;

Almost got my menus like I want 'em.

Last question:

How do I limit the

Code:

div#menu1 ul.rMenu {

        background: transparent !important;

        border-bottom: 1px solid #cccccc;

}

such that the border bottom is only as wide as the main body (not counting the right sidebar)? Or, of a determined size in general?

you can't without messing with the theme code. The menu is part of the header and the header is a row of a table that spans the width of the table that has 1 - 5 (depending on the number of sidebar) columns. You would have to rewrite a bunch of code,

you could play with adding a widget area to the header with two cells and add a page widget to it and formatting that.

how about this: is it possible to turn off the menu at the top (which I know how to do) and then place it above the loop? (which I don't know how to do)

PS: Happy Thanksgiving!

not without digging into the code

oh well, thanks for your help!