Jump to content
Sign in to follow this  
bstaikos

Gradient color in navbar

Recommended Posts

bstaikos

Hi All, Looking to add gradient coloring to my nav bar to make it a little bit sleaker. Any easy way to do this with custom code? Any and all help appreciated! Love using Framework! Thanks, Bill

Share this post


Link to post
Share on other sites
Danny
Hi Bill, You can add this to your custom code: [code]#page .navigation_wrap { }[/code] You can use this website to create your gradient for your navbar and then add the code to the above code. http://www.colorzilla.com/gradient-editor/

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bstaikos
Danny, Thanks for the quick reply. copy/paste in between the {} and not working...any other thoughts? Thanks again, Bill

Share this post


Link to post
Share on other sites
Danny
Hi Bill, Sorry I should of gone into greater detail. Basically, the use the website I linked above to get the correct gradient/colors you want and then on the right hand side it provides the code for your gradient, this code is for browsers. Your code should look similar to this: [code]#page .navigation_wrap { background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ }[/code] Simply copy and paste this code into the code above and then copy and paste it into either your Child themes style.css, if you're not using the Base child theme but using the PageLines Customisation plug-in then add the code to the style.css of the PageLines Customisation plug-in. If you're not using either of these, then add the code to the following setting: Wordpress Admin Dashboard > PageLines > Settings > Custom Code > CSS Rules.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bstaikos
Danny - again thanks! Problem is though that this does not go across the entire nav - just up to the pages (I have it there now). Is there a way to make it go across?

Share this post


Link to post
Share on other sites
batman
Hi @simple_mama give me... You may find these two topics useful: http://www.pagelines.com/forum/discussion/15956/pagelines-framework-2.0-css-tweaks.#Item_1 http://www.pagelines.com/forum/discussion/16222/common-questions-and-customizations#Item_2 I had the same problem and use the following code: [code].main_nav_container { filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d'); /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/ /*Element must have a height (not auto)*/ /*All filters must be placed together*/ -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d')"; /*Element must have a height (not auto)*/ /*All filters must be placed together*/ 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; /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/ /*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/ } .main_nav ul li { filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d'); /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/ /*Element must have a height (not auto)*/ /*All filters must be placed together*/ -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d')"; /*Element must have a height (not auto)*/ /*All filters must be placed together*/ 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; /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/ /*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/ border-right: 1px solid rgb(153,153,153); } ul.main-nav li.current-menu-item a { filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d'); /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/ /*Element must have a height (not auto)*/ /*All filters must be placed together*/ -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#e6e6e6', endColorstr = '#3e3d3d')"; /*Element must have a height (not auto)*/ /*All filters must be placed together*/ 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; /*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/ /*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/ border-right: 1px solid rgb(153,153,153); } .navigation_wrap { border-bottom: 0 none !important; } .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover { background-color: #969696 !important; color: #000000; } .main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a, .sf-menu li li, .sf-menu li li li { background: none repeat scroll 0 0 #969696 !important; } .main_nav li a { color: #FFFFFF; }[/code] Maybe there's a simpler way, but for me it worked. You can replace the colors with the danny??s link. Sorry for my English. I hope you serve

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
bstaikos
Thanks, Batman. This worked, but now the page selected nav is grey as is the sub-nav. Need to figure out how to change this - I guess I will look for the CSS on hover and perhaps repeat this for the sub nav menu.

Share this post


Link to post
Share on other sites
bstaikos
I have to play around with a few things, but looks like it will work. Thanks to all...

Share this post


Link to post
Share on other sites
catrina
The subnav is a separate element from the actual navbar because it's uses different CSS selectors so it'll definitely need some playing around with.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
bstaikos
To all, there is an even more simply way to get gradient into the tool bar, sub-navs and get the text the way you want it: If you generate the css for the gradient via the "ultimate css gradient generator" tool that danny provided and then copy/paste this into into the relevant boxes of the Simple CSS Lite plugin, it all works. On a whim I thought I would try this out and it worked. For me this is the best solution as it minimizes the extra css in the style sheet.

Share this post


Link to post
Share on other sites
bstaikos
Hi All, I have played with the gradient and finally settled on one. However, now I see a line across the top of the nav bar. I have looked on the posts to see if I can find css to remove it, but no luck. Any thoughts? Thanks to all for your kindness!! bstaiks

Share this post


Link to post
Share on other sites
batman
Hi @bstaikos I think you should try [code].navigation_wrap { border-top: none !important; } [/code] I'm just a newbie trying to learn. I do not know if it's the right solution .. :)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob
Great suggestion Batman! Thank you for contributing to this topic.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
batman
It is a pleasure for me to help, also forces me to learn. 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
Always a pleasure!

Former PageLines Moderator, Food Expert and Raconteur

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  

×