[hmarshall]

I’ve just created a child theme based on the default them. I’d like to change the Home/ Members/ Groups/ Forum etc menu so that it doesn’t have the colour outline, and functions like the top menu in the following website:

http://solopracticeuniversity.com/

Specifically I want white writing and an impression when hovered over with the mouse, like in the example.

Could anyone help me with the code? (I’m a real novice!)

Thanks
Harry

[@mercime]

That is solved by searching online. One search result shows this: http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/. You can opt to use background color instead of images. Adjust to taste

[hmarshall]

That’s great, thanks mercime.

So I just add this code:

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}

As I’m a complete novice, is there any chance you could tell me which file i’d have to put that in? I want it to appear in exactly the same position as the default theme menu. Do I do anything with the html code in that link?

Cheers
Harry

[@mercime]

You’ve got to adjust the code based on the selectors you’ve got in your theme:

So in your style.css file within your child theme’s folder, add this after the lines already there:

`ul#nav {
border: 1px solid #625e00;
border-width: 1px 0;
background: #000066;
}

ul#nav li {
display: inline;
float:none;
margin: 0px;
}

ul#nav li a {
float: left;
padding: 9px 11px;
border-right: 1px solid white;
background: none;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}

ul#nav li.selected a, ul#nav li.current_page_item a {
background: #000000;
color: #ffffff;
}`

Again, adjust to taste.

[hmarshall]

Great thanks mate – It was all trial and error (I’m sure it’s very intuitive to people who’s seen it before) but that’s the first code i’ve ever edited!

A couple of questions if you have time:

How do I add the hover function? Can I change the text? How do I remove the border underneath?

[hmarshall]

Ok this is the code I’ve added:

ul#nav {
border: 3px solid #ffffff;
border-width: 2px 2;
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
background: #98AFC7;
font-size: 11px;
}

ul#nav li {
display: inline;
float: 0px;
margin: 0px;
font: 11px normal “Tahoma”;
font-weight: bold;
}

ul#nav li a {
float: left;
padding: 5px 10px;
color: #003366;
border-right: 2px solid white;
border-left: 2px solid white;
background: none;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}

ul#nav li.selected a, ul#nav li.current_page_item a {
background: #151B54;
color: #ffffff;
}

ul#nav li a:hover {
color: #151B54;
background: #ffffff;
}

It seems to work. I’ve just added it in my new child theme css file underneath the “inherit default theme…” stuff. Does all that look ok?

I wasn’t able to work out how to remove the border underneath, if you’re able to help?

[hmarshall]

Sorry I keep reposting, I keep figuring it out.

I added the word “top” to border, so it’s now:
ul#nav {
border-top: 0px solid #ffffff;
border-bottom: 0px;
border-width: 0px 0;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
background: #2554C7;
font-size: 11px;
}

ul#nav li {
display: inline;
float: 0px;
margin: 0px;
font: 11px normal “Tahoma”;
font-weight: bold;
}

ul#nav li a {
float: left;
padding: 5px 10px;
color: #ffffff;
border-right: 0px solid white;
border-left: 0px solid white;
background: none;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}

ul#nav li.selected a, ul#nav li.current_page_item a {
background: #15317E;
color: #ffffff;
}

ul#nav li a:hover {
color: #151B54;
background: #ffffff;
}

I tried adding “bottom” but couldnt get that to work.

If anyone could check this (it seems to work for me) that would be great.

Thanks
Harry

[hmarshall]

This seems to have changed the text that appears in the login field

[@mercime]

@hmarshall site URL?