Jump to content


Photo
- - - - -

Update Nav Bar Color


  • Please log in to reply
10 replies to this topic

#1 Michael_J

Michael_J

    Super Member

  • Members

  • 226 posts
  • Country: Country Flag

Posted 30 June 2012 - 09:24 PM

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?

Please Login or Register to see this Hidden Content



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 June 2012 - 10:04 PM

I believe this is the correct set of elements:

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

to find your favorites. Add the edited code to either /pagelines-customize/style.css or to Dashboard > PageLines > Site Options > Custom Code > CSS Rules

#3 Michael_J

Michael_J

    Super Member

  • Members

  • 226 posts
  • Country: Country Flag

Posted 02 July 2012 - 02:19 PM

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

Please Login or Register to see this Hidden Content



#4 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 02 July 2012 - 02:41 PM

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.

#5 radroz

radroz

    Super Member

  • Members

  • 208 posts
  • LocationClarksville, TN
  • Country: Country Flag

Posted 03 July 2012 - 01:13 AM

Wouldn't it be best to have the navbar color changeable in the settings instead?

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 July 2012 - 02:24 AM

Yeah, I think it would. For now, I think the CSS solution is also pretty simple when Firebug is involved (

Please Login or Register to see this Hidden Content

) :D. A tutorial on how to use it for CSS customizations is here:

Please Login or Register to see this Hidden Content



#7 lawful1

lawful1

    Member

  • Members
  • 27 posts
  • LocationPrescott AZ
  • Country: Country Flag

Posted 03 July 2012 - 03:17 AM

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!

Please Login or Register to see this Hidden Content



Please Login or Register to see this Hidden Content



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17533 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 July 2012 - 11:53 AM

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

Please Login or Register to see this Hidden Content



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.

Please Login or Register to see this Hidden Content



#9 Michael_J

Michael_J

    Super Member

  • Members

  • 226 posts
  • Country: Country Flag

Posted 05 July 2012 - 10:54 PM

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.

#10 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 05 July 2012 - 11:16 PM

Yo,
Try doing something like this. Your markup is just a tad off is all.

Please Login or Register to see this Hidden Content


Nick

#11 Michael_J

Michael_J

    Super Member

  • Members

  • 226 posts
  • Country: Country Flag

Posted 06 July 2012 - 12:04 AM

Sweet.