Jump to content
Sign in to follow this  
Michael_J

Update Nav Bar Color

Recommended Posts

Michael_J    3
Michael_J

I'd like to change the color of my nav bar in iBP5 using Framework. I used Firebug to located the CSS, shown below, but when I place that into the Custom Code section, nothing happens. Suggestions?

.thead, h1, h2, h3, h4, h5, h6, .site-title {
	    font-family: "Happy Monkey",serif;
	    letter-spacing: -0.05em;
	}

Share this post


Link to post
Share on other sites
Rob    547
Rob
I believe this is the correct set of elements: [code].pl-color-blue { background: -moz-linear-gradient(center top , #6E9ED2 0%, #4574B8 100%) repeat scroll 0 0 transparent; } .navbar.pl-color-blue { border-top: 1px solid #4574B8; }[/code] In this example, #4574B8 is a deep blue and the primary color of the menu. #6E9ED2 is a subshade and forms the shadow. #4574B8 in the second code represents a blue line of one pixel at the very top. Change these color codes to the colors you wish. You may want to use http://www.colorpicker.com to find your favorites. Add the edited code to either /pagelines-customize/style.css or to Dashboard > PageLines > Site Options > Custom Code > CSS Rules

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Michael_J    3
Michael_J
Thanks for the answer. Unfortunately it does not seem to change the color of the menu bar. Just to note, this is for NavBar ( not the 'normal' nav bar) - as you can see on the site http://leftcoastlogic.com

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger
Hey Michael, The elements you found in firebug will change a table head, the headings, and the site title. You're wanting to change the colors, so using letter spacing a font family isn't gonna change the color of it. It includes 5 colors by default, or you can use CSS to change it on your own. There are quiet a few elements that change dynamically based on other colors, so you'll need to change many. .navbar.pl-color-blue That's the css selector you're trying to target, so you can apply your background there, and go from there. Nick P.S - If you have 8 bucks you can get this section that includes 19 different colors. It's in my sig as CrackBar.

Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
radroz    10
radroz
Wouldn't it be best to have the navbar color changeable in the settings instead?

Share this post


Link to post
Share on other sites
catrina    103
catrina
Yeah, I think it would. For now, I think the CSS solution is also pretty simple when Firebug is involved (http://getfirebug.com) :D. A tutorial on how to use it for CSS customizations is here: http://www.pagelines.com/wiki/Custom_CSS

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
lawful1    0
lawful1
I used the code you pasted above (changed the colors) and it works great, but only on FireFox. What code do I need to add to make the nav bar change on all browsers? Thank you for your help! http://northernarizonainjurylaw.com [code].pl-color-blue { background: -moz-linear-gradient(center top , #965F00 0%, #543500 100%) repeat scroll 0 0 transparent; } .navbar.pl-color-blue .searchform .searchfield { border: 1px solid #000000; } .navbar.pl-color-blue { border-top: 1px solid #000; }[/code]

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi Lawful, The reason why your code only works on FireFox is that: FireFox uses a CSS engine called Gecko Apple's Safari & Google's Chrome use a CSS engine called Webkit For more information, click [url="http://en.wikipedia.org/wiki/List_of_web_browsers"]here[/url] Therefore, your code for the background gradient will only work on Mozilla FireFox browsers. If you go to this website, it is a gradient background generator and will provide you with the code that is compatible with all browsers. http://www.colorzilla.com/gradient-editor/

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Michael_J    3
Michael_J
So, what is the solution? Nick's $8 bars don't give me the colors I need. I am able to change text colors easily, but not the Nav Bar.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger
Yo, Try doing something like this. Your markup is just a tad off is all. [code].pl-color-blue { #gradient > .vertical (#965F00, #543500); } [/code] Nick

Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

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  

×