Getting there slowly with the menus but a few issues remain.

www.wantage.org

Would someone help me with the last finishing touches please?

1. The main horizontal menus is now correct but the sub-menus have white borders left and right. How do I get rid of the borders?

2. I don't know how to style the left hand page menu. What I am after is solid green bars for each menu item with white lettering but I do not know how or where to do this.

I have looked for documentation and spent a long time searching the forums, but am getting quite confused now!

Here are my css inserts...


td#header {
padding-bottom: 15px;}

td#middle {
padding: 0;}

div#menu2 {border: solid 1px #004d05;}

#mymenu {
background: #004d05;
}

ul.rMenu li {
padding-top: 0px;
margin: 0px 30px 0px 30px;
}

Whoops - I am on 3.6.1

You would need to change at least the following..

div#menu2 ul.rMenu-ver ul {
    width: 15em;
}

ul.rMenu li {
    margin: 0 0;

}

or if the second entry pushes the top menu items too close...then leave the l/r margin as it was (30px; i think) and set the background color to the green color of the rest of the menu...

Thanks runnerb0y

Yes, 0 does make the menu items too close together. I'll leave at 30 and change the background to green. I did try this before my original post and it didn't work. I'll try again.

One difficulties I have is knowing what to change, as I don't know what the different labels (classes) are eg rMenu-ver. Are these documented anywhere?

Howard

I have added the code but no change.

I still get the white left and right borders in the horizontal sub-menus.


td#header {
padding-bottom: 15px;}

td#middle {
padding: 0;}

div#menu2 {border: solid 1px #004d05;}

#mymenu {
background: #004d05;
}

div#menu2 ul.rMenu-ver ul {
width: 15em;
}

ul.rMenu li {
padding-top: 0px;
margin: 0px 30px 0px 30px;
background: #004d05;
}

Played with various things, but the interaction of all the css is too complex for my brain.

It's a voluntary community project so there isn't any money available, but I'd be really happy to make my own modest paypal contribution to anyone who can solve these two problems...

1. Get rid of the white areas on the horizontal sub-menu

2. Transform the (vertical) menu widget items so they match the horizontal one ie green background, white text, a little white space between each item, hover giving a lighter green.

Sorry, my description is a bit clumsy.

Howard

your site is in maintenance mode...

OK - out of maintenance mode now. Happy to let you login if that's easier.

try this change

ul.rMenu li {
padding-top: 0px;
margin: 0px 30px 0px 30px;
}

to

ul.rMenu li {
padding: 0px 30px 0px 30px;
}

2. I don't know how to style the left hand page menu. What I am after is solid green bars for each menu item with white lettering but I do not know how or where to do this.

do you mean you want the background of the widget green?

Cool! Not quite what I expected but it looks great. Thanks.

I will post a picture of the left hand menu soon.

Thanks!

Originally Posted by howardhill

Thanks runnerb0y

Yes, 0 does make the menu items too close together. I'll leave at 30 and change the background to green. I did try this before my original post and it didn't work. I'll try again.

One difficulties I have is knowing what to change, as I don't know what the different labels (classes) are eg rMenu-ver. Are these documented anywhere?

Howard

If you don't already use it, I suggest using FireFox and the wonderful addon called Firebug. That tool will cut your development/tinkering time significantly.

Hi guys

Yes, I have used Firebug, but I still find the css quite complex to follow. I'll keep at it though, thanks for the tip.

The left hand vertical menu I am after is as follows. My graphic is too big for the actual site, but it shows the overall idea, with the grey colour being used for highlight and also the current page...



Howard