Hey,

We don't really have much of an area where to post about non FFXIV so sorry I had to post this here.

This is really for Mad but if anyone else can help feel free.

Mad you said you were familiar with CSS.

I'm looking for a little help with a site I am doing for a client. (bit of extra money and that ;) )

I have deisgned it to her specification and the only thing I can't really get to work is the navigation menu.

Its a widget from wordpress and it seems the only option I have is the colour of active, passive and hover color.

However I want to edit them all seperately so that all the buttons appear with a different background color.

How would I go about this?

The site is www.nutritionforliving.co.uk

Thanks for help.

:)

The easiest method would be to identify each button with a different id, and set the color by id in your style sheet. I generally build my dropdown's by using a jquery script online (since I'm not a programmer and thus not too familiar with jquery lol), so maybe something like this is what you're looking for:

http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/

My understanding of CSS is very minimal, i would have no idea where to start with that, or if its possible in wordpress. As i am using a widget at the moment for the menu.

I wouldn't know which file to edit. I'm assuming it would be the stylesheet?

You'll want to define the id in the .css file (which is the style sheet), then label the menu's <li> items in the .html (or .php, etc.) fiel where the menu items are contained.

Say if you defined the id in the style sheet as #red, in the html file you'd mark it up as <li id="red">

For example:

<ul>
<li id="red"><a href="">Home</li>
<li id="blue"><a href="">About</li>
<li id="green"><a href="">Contact</li>
</ul>

Check this out if you need more info:

http://www.w3schools.com/css/css_id_class.asp

Sorry Mad, its going king of over my head tbh.

Could you take a quick look at this code and be able to let me know if I can make quick changes in here to do this?

/* begin Box, Block, VMenuBlock */
.art-vmenublock
{
position: relative;
min-width: 3px;
min-height: 3px;
margin: 10px;
}

.art-vmenublock-body
{
position: relative;
padding: 1px;
}

.art-vmenublock-tr, .art-vmenublock-tl, .art-vmenublock-br, .art-vmenublock-bl, .art-vmenublock-tc, .art-vmenublock-bc,.art-vmenublock-cr, .art-vmenublock-cl
{
position: absolute;
}

.art-vmenublock-tr, .art-vmenublock-tl, .art-vmenublock-br, .art-vmenublock-bl
{
width: 2px;
height: 2px;
background-image: url('images/vmenublock_s.png');
}

.art-vmenublock-tl
{
top: 0;
left: 0;
clip: rect(auto, 1px, 1px, auto);
}

.art-vmenublock-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 1px, 1px);
}

.art-vmenublock-bl
{
bottom: 0;
left: 0;
clip: rect(1px, 1px, auto, auto);
}

.art-vmenublock-br
{
bottom: 0;
right: 0;
clip: rect(1px, auto, auto, 1px);
}

.art-vmenublock-tc, .art-vmenublock-bc
{
left: 1px;
right: 1px;
height: 2px;
background-image: url('images/vmenublock_h.png');
}

.art-vmenublock-tc
{
top: 0;
clip: rect(auto, auto, 1px, auto);
}

.art-vmenublock-bc
{
bottom: 0;
clip: rect(1px, auto, auto, auto);
}

.art-vmenublock-cr, .art-vmenublock-cl
{
top: 1px;
bottom: 1px;
width: 2px;
background-image: url('images/vmenublock_v.png');
}

.art-vmenublock-cr
{
right: 0;
clip: rect(auto, auto, auto, 1px);
}

.art-vmenublock-cl
{
left: 0;
clip: rect(auto, 1px, auto, auto);
}

.art-vmenublock-cc
{
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
background-color: #F9FAFB;
}



/* end Box, Block, VMenuBlock */

/* begin Box, Box, VMenuBlockContent */
.art-vmenublockcontent
{

position: relative;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}

.art-vmenublockcontent-body
{

position: relative;
padding: 0;
}







/* end Box, Box, VMenuBlockContent */

/* begin VMenu */
ul.art-vmenu, ul.art-vmenu li
{
list-style: none;
margin: 0;
padding: 0;
width: auto;
line-height: 0;
}

ul.art-vmenu
{
margin-top: 0;
margin-bottom: 0;
}



ul.art-vmenu ul
{
display: none;
}

ul.art-vmenu ul.active
{
display: block;
}
/* end VMenu */

/* begin VMenuItem */
ul.art-vmenu a
{
position: relative;
display: block;
overflow: hidden;
height: 30px;
cursor: pointer;
text-decoration: none;
}

ul.art-vmenu li.art-vmenu-separator
{
display: block;
padding: 0 0 0 0;
margin: 0;
font-size: 1px;
}

ul.art-vmenu .art-vmenu-separator-span
{
display: block;
padding: 0;
font-size: 1px;
height: 0;
line-height: 0;
border: none;
}

ul.art-vmenu a .r, ul.art-vmenu a .l
{
position: absolute;
display: block;
top: 0;
height: 100px;
background-image: url('images/vmenuitem.png');
}

ul.art-vmenu a .l
{
left: 0;
right: 1px;
}

ul.art-vmenu a .r
{
width: 870px;
right: 0;
clip: rect(auto, auto, auto, 869px);
}

ul.art-vmenu a .t, ul.art-vmenu ul a
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
}

ul.art-vmenu a .t
{
display: block;
position:relative;
top:0;
line-height: 30px;
color: #F9FAFB;
padding: 0 11px 0 11px;
margin-left:0;
margin-right:0;
}

ul.art-vmenu a.active .l, ul.art-vmenu a.active .r
{
top: -70px;
}

ul.art-vmenu a.active .t
{
color: #963403;
}

ul.art-vmenu a:hover .l, ul.art-vmenu a:hover .r
{
top: -35px;
}

ul.art-vmenu a:hover .t
{
color: #7F5305;
}


/* end VMenuItem */

Do you have a copy of the html for the menu? Would be easier to see how they add classes/id's if you did.

Not sure where to get that from.

I can give you details to have a look about if you want? lol. Its all PHP and CSS files.