zBench and menu navigation

feelingblind · Member · Nov 30, 2013 at 6:15 pm
Copy link

Add topic to favorites
I want to customize the colors of the top menu and search bar with CSS, but no matter what changes I make the default colors stick. The only way I can change the colors is with the limited “change colors” option, which doesn’t give me the full flexibility that editing the CSS would.

The blog I need help with is: (visible only to logged in users)
justpi · Member · Dec 2, 2013 at 7:43 pm
Copy link
Waht exactly do you want to change, the text or the background?
feelingblind · Member · Dec 2, 2013 at 8:27 pm
Copy link
The colors of the menu, the drop-down menu, and the color when you hover over a selection in the drop-down menu. I know how to do this in CSS, but for some reason this theme won’t let those changes stick. Instead the five-color option through the WordPress custom design package overpowers anything I place into the custom CSS.
justpi · Member · Dec 3, 2013 at 11:05 am
Copy link
Well, you didn’t answer my question: text colors or background colors?
Assuming you’re talking about the text only, and assuming you want the same colors for top level items and sub items, add these and change the hex numbers:
```
.nav li a, .nav li:hover li a, .nav li.sfhover li a {
color: #123456;
}
.nav li:hover a, .nav li:hover li:hover a, .nav li.sfhover li.sfhover a {
color: #abcdef;
}
```
feelingblind · Member · Dec 3, 2013 at 12:56 pm
Copy link
Now I see where our signals are getting crossed. Your code worked in changing the text colors. I guess now I want to know how to change the background color of the menu, and the drop-down menu background color, and the background color when you hover over a selection in that drop-down menu.

Also, how to change the color of the text in the search bar.

I appreciate the help. My head has just been spinning from trying to get things customized.
justpi · Member · Dec 3, 2013 at 4:38 pm
Copy link
You’re welcome.

To change the text color of the searchbox, add this and change the hex number:
```
#search-form #s {
color: #123456;
}
```
Your bg question is again imprecise. If you mean you want the same bg color for top level items and dropdown items, and if you mean you want it to change when you hover over a dropdown item but not when you hover over a top level item, add these and change the hex numbers:
```
.nav li, .nav li:hover {
background-color: #456789;
}
.nav li:hover li:hover {
background-color: #987654;
}
```
feelingblind · Member · Dec 3, 2013 at 5:01 pm
Copy link
Thanks very much, your solution worked perfectly.

I think I may have realized my error too. I was trying to substitute colors in the CSS using rgb (255, 255, 255) instead of #FFFFFF which is used in the original theme. My guess is the difference in coding was the reason the CSS wouldn’t work for me.
justpi · Member · Dec 3, 2013 at 5:16 pm
Copy link
You’re welcome, but I’m not seeing any changes on http://tstogame.com/. Which blog are you working on please?

(And no, RGB instead of HEX would have worked: your mistake is there must be no space after “rgb”.)
feelingblind · Member · Dec 3, 2013 at 5:31 pm
Copy link
Yes, this is the site I’m working on. I haven’t applied any permanent changes yet just enough to test the code.

I believe I was correct when testing, but just made the spacing mistake in this post. Oh well, still it’s nice to know I can use the code you provided to get the customization I want once I figure out the best color combinations to make everything really pop.

No items found.