Jump to content
Sign in to follow this  
peterluit

Where to change CSS for the new menubar in PageLines 2.2.1

Recommended Posts

peterluit

I really like the new navbar very much, but I would like to edit the CSS styles, since I want more flexibility in colors. I already found out how to change the submenu mouseover color, but until now I am unable to find the gradient definitions in the new navbar. At least I thin it is a gradient, since I cannot find an image as background of the menubar. Peter site URL is just a (slow) testsite to play with 2.2.1

Share this post


Link to post
Share on other sites
batman
You can use [code].navbar-content-pad, .navbar { background-image: -moz-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -ms-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -o-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: -webkit-gradient(linear, center top, center bottom, from(#e6e6e6), to(#3e3d3d)); background-image: -webkit-linear-gradient(top, #e6e6e6, #3e3d3d); background-image: linear-gradient(top, #e6e6e6, #3e3d3d); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }[/code] You can change the color as you like, this is grey gradient It work fine to me.

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman
Another way of do this @ danny gave me this link http://www.colorzilla.com/gradient-editor/ you can use to copy the code inside [code].navbar-content-pad, .navbar { ...... }[/code]

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman
@catrina It is a pleasure for me to help, also forces me to learn (I'm a newbie in WP). I feel that this is one more way to thank all your support to me all the time. Thanks for the compliment. ;)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob
Well done Batman!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
peterluit
Since I live in Europe, I was not able to see all the replies until now. I will start working with the mentioned solutions and come back here as soon as I have the results.

Share this post


Link to post
Share on other sites
peterluit
Well I checked it all out and I can say to you all: GREAT work! The http://www.colorzilla.com/gradient-editor/ solution is a very nice tool and should be part of the framework, since I think with such a flexible theme all color options should be on your fingertips.

Share this post


Link to post
Share on other sites
edenbrackstone
I thought I should update this thread with the recent modifications I made my own menu... This CSS snippet targets the current menu item being hovered on. In my case, it corrects the background color (white instead of the blue, it did not fit with my design), changes the text color to a green and adds a slight drop shadow: [code] li.menu-item a:hover { color: #13832e; text-shadow: 0px 1px 0px #ffffff; filter: dropshadow(color=#ffffff, offx=0, offy=1); background-color: #f5f5f5;} [/code] Modify the values to suite your needs :-) [URL=http://imageshack.us/photo/my-images/809/screenshot20120624at103.png/][IMG]http://img809.imageshack.us/img809/1021/screenshot20120624at103.png[/IMG][/URL]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×