bstaikos 0 Report post Posted June 17, 2012 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+ 1,327 Report post Posted June 17, 2012 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 0 Report post Posted June 17, 2012 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+ 1,327 Report post Posted June 17, 2012 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 0 Report post Posted June 17, 2012 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 389 Report post Posted June 17, 2012 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
catrina 103 Report post Posted June 17, 2012 Let us know if the solution @batman provided works out well for you. 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 0 Report post Posted June 17, 2012 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 0 Report post Posted June 17, 2012 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 103 Report post Posted June 17, 2012 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 0 Report post Posted June 17, 2012 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
catrina 103 Report post Posted June 17, 2012 Cool beans, thanks for posting your solution. 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 0 Report post Posted June 17, 2012 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 389 Report post Posted June 17, 2012 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 547 Report post Posted June 17, 2012 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 389 Report post Posted June 17, 2012 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 547 Report post Posted June 17, 2012 Always a pleasure! Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites