Wordpress Themes - WP Forum at BFA - Juggledad's colored menu cheat sheet

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

- Menus (http://forum.bytesforall.com/forumdisplay.php?f=44)

- - Juggledad's colored menu cheat sheet (http://forum.bytesforall.com/showthread.php?t=7045)

take a look now, is that what you wanted - the current page menu item to be hi-lighted? See the CSS for the change, I used 'li.current-page-item a'

Yes, works now. Finally, my menu looks like it should be :) Thanks.

Since I used Juggledad's cheat sheet (which is great...thanks!), I thought I would post this question here, rather than start a new topic.

First off, here is the CSS from the CSS Inserts (Atahualpa 3.6.4):

Code:

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

/* Page menu background                             */

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

div#menu1 { 

         height:33px; 

        margin-top:0px; 

        background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');

        border:1px solid #D5C6A6;

}

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

/* Page Menu item's background and border           */

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

div#menu1 ul.rMenu {

        height:33px;

        background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');



}

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

/* Page Menu item                                   */

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

ul.rMenu li a:link, 

ul.rMenu li a:visited,

ul.rMenu li a:hover,

ul.rMenu li a:active,

ul.rMenu li {

        border-left:1px dotted #000000;

        background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');

        color: #000000 !important;

        height: 33px;

        padding-top:0px;

        padding-bottom:0px;

        padding-right:0px;

        padding-left:0px;

}

Take a peek at the menu bar and see how it's misbehaving:

http://liveinoakpark.com/

The flat tan color comes in on hover for parent menu items, but not regular links. Ideally, I'd like a second image BG for hover, but I tried that and couldn't get it to work.

The flat tan background color is 8 pixels "taller" than it should be: I have had to make "%bar2" taller than it should be to hide the tan BG...but it only effects the links that are not "parents".

"%bar1" (above the menu bar) is likewise getting cut off by the "parent" links.

Lastly, the "child" menu items are 8 pixels below the menu bar.

I'm certain I'm missing something quite elementary and that my brain is just addled...but I just cannot find the problem. Any guidance is greatly appreciated.

Well, I was able to get this sorted out on my own...

Code:

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

/* Page menu background                             */

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

div#menu1 { 

         height:33px; 

        background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');

        background-repeat:repeat-x;

}

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

/* Page Menu item's background and border           */

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

div#menu1 ul.rMenu {

        height:33px;

        margin-left:20px;

        border-color:transparent !important;

        background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');

        background-repeat:repeat-x;

}

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

/* Page Menu item                                   */

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

#menu1 ul.rMenu li a:link, 

#menu1 ul.rMenu li a:visited,

#menu1 ul.rMenu li a:hover,

#menu1 ul.rMenu li a:active,

#menu1 ul.rMenu li {

        border-top:transparent;

        border-bottom:transparent;

        border-left:dotted 1px;

        border-right:transparent;

        background: url('http://www.liveinoakpark.com/wp-content/themes/atahualpa/images/menu.png');

        background-repeat:repeat-x;

        color: #000000 !important;

        height: 33px;

        padding-top:0px;

        padding-bottom:0px;

        padding-right:5px;

        padding-left:0px;

}

I need to use images for background of each tab, and darker image for active parent, but I'm struggling with both the active tab (doesn't change) and the dropdown submenu items are using the background image as well which I don't want - only for main tab.

here where I'm at right now:

Code:

ul.rMenu li {

        background: url('<?php bloginfo('template_directory'); ?>/images/menubackground.gif') no-repeat;

}

ul.rMenu li.current-page-item a:link {

        background: url('<?php bloginfo('template_directory'); ?>/images/menuactive.gif') no-repeat;

using ATA 353 on this site in case it makes a difference
I'm missing something obvious aren't I :-(
Appreciate any help.

- Vincent

Hi,

I'm trying to do something a bit more tricky than the standard menus. I need to separate out the behavior of the parent page menu items from the behavior of the children. Specifically, the font size, padding, borders, hovers, visited links, and background colors of the child menu items all need to be drastically different than the parents. (see http://windcoalition.org for the current site, built using a non-WordPress CMS. ) Thankfully I don't have to mimic the way they have some of the menu items in smaller font than others. I can just tweak the padding/margins/borders to fill the horizontal space.

I've got the gradients working on the development site, but those are currently being applied to the children as well as the parents.

I've gotten most of the child menu stuff working now, thanks to some hints I pulled from this post: http://forum.bytesforall.com/showthr...ght=child+menu

The last thing I need to figure out is how to put a border beneath JUST the last element in a submenu.

I'd appreciate any pointers on that!

Thanks!

each menu item as a unique class - I would target the class with your CSS