• 0
Sign in to follow this  
Followers 0

Update Nav Bar Color

Question

Posted · Report post

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

10 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sweet.

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  
Followers 0