Jump to content


Photo
- - - - -
Resolved

Changing color of NavBar

navbar color

This topic has been archived. This means that you cannot reply to this topic.
15 replies to this topic

#1 iamtheeverydaygirl

iamtheeverydaygirl

    Advanced Member

  • Members
  • 79 posts

Posted 10 October 2012 - 12:48 AM

Hi there,

I'm looking for a way to change the background color of the NavBar on my site. Currently, I see only those few themes (black, light grey, blue, etc) -- and ideally, I would just like a white background.

Tried a few things I read in this forum (firebug, some css code), but so far nothing is working to change it on my site!

Was wondering if there was something I was missing, a way to just disable the theme?

Thanks!
Jen
www.iamtheeverydaygirl.com

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 10 October 2012 - 01:56 AM

Okay, this is the CSS affecting the color:

Please Login or Register to see this Hidden Content

#FFFFFF is white. #DCDCDC is grey. You see there's a percentage after each.

Change 0% to 60%, and you'll have a nice, shadowed, white navbar I think you'll like.

Paste the edited code to Dashboard > PageLines > Site Options > Custom Code > CSS Rules

#3 kgstew

kgstew

    Super Member

  • Members
  • 173 posts

Posted 13 October 2012 - 11:22 PM

Hi Rob,

How you doing?

I'm trying to do the same thing. Can't seem to the background color to change with the blue theme. Tried fooling around with the .less file too but succeeded in nothing more than fooling.

I'm trying to get the navbar to use a blue closer to #0a3443

Site is

Please Login or Register to see this Hidden Content



Thanks for the help. Lets chat soon.

#4 batman

batman

    Bat Learning

  • Members

  • 2202 posts

Posted 13 October 2012 - 11:38 PM

HI kgstew
I use this to change orange the NavBar


Please Login or Register to see this Hidden Content


You can change the color as you like
;)

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 14 October 2012 - 05:55 PM

Kyle,
Batman is one of our best clients when it comes to helping others. And a very nice guy.

I checked your site:

Please Login or Register to see this Hidden Content


I placed the color you wanted in the top gradient. You can swap it around if you like.

#6 kgstew

kgstew

    Super Member

  • Members
  • 173 posts

Posted 16 October 2012 - 09:13 PM

Thanks for your help guys.

Below is the solution I ended up using. There is a cross browser consideration as well. The fixes provided did not work in chrome, I needed to add the browser specific CSS.

Please Login or Register to see this Hidden Content



#7 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 17 October 2012 - 12:53 AM

Hi there, I'm glad that worked for you, are we ok to resolve this thread or do you require further assistance?

#8 margeau

margeau

    Newbie

  • Members

  • 8 posts

Posted 05 November 2012 - 04:43 AM

I am new to PageLlines and this thread seemed to be just what I was looking for. I am using the navbar (grey) and want the highlight color of the drop down menu to be a other than the default blue. Using FireBug I determined the following code was where the customization was needed, but the change in color only shows in FireFox. To my eye this is much the same as other code in this post, but I am obviously am missing something because it isn't doing the job.

Please Login or Register to see this Hidden Content


The site I am working on is in draft form here:

Please Login or Register to see this Hidden Content



Any assistance would be so much appreciated. Thank you.

#9 margeau

margeau

    Newbie

  • Members

  • 8 posts

Posted 05 November 2012 - 04:53 PM

I tried a suggestion from Jenny:
"You should try adding a #page selector in front of each CSS item, like #page .dropdown-menu li > a:hover."

Please Login or Register to see this Hidden Content


I was not successful yet, but I must be close because a site in the PageLines showcase is doing it and the code I found with FireBug looks very similar, (

Please Login or Register to see this Hidden Content

):

Please Login or Register to see this Hidden Content

plus this:

Please Login or Register to see this Hidden Content


Thank you for any possible help resolving this.

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 05 November 2012 - 06:21 PM

I think you can be even more specific by adding the class for the <DIV> that menu is in. For example:

Please Login or Register to see this Hidden Content



#11 margeau

margeau

    Newbie

  • Members

  • 8 posts

Posted 05 November 2012 - 07:34 PM

Thank you Catrina. I used what seemed to be the nearest div wrapping my bit of code, but I am still without the change in color in non-Firefox browsers. Does it seem like I have done it correctly?

Please Login or Register to see this Hidden Content


I also tried this:

Please Login or Register to see this Hidden Content



#12 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts

Posted 06 November 2012 - 05:46 PM

Have you checked out

Please Login or Register to see this Hidden Content

in the Store?

#13 margeau

margeau

    Newbie

  • Members

  • 8 posts

Posted 06 November 2012 - 09:26 PM

Thank you Jenny. I have purchased it, and have high hopes that this is just what I need.

I am still a bit stuck, however. The site I am working on is a trial site/proof on the pagelines.me server and I have no ftp access (that I have been given any information about, anyway). I read the comment "use the section uploader pagelines/store/get sections/upload" on the crackbar page and thought I could load it that way, but I can not find an upload feature anywhere on my site interface, in my account pages or in the store. I must be so close...

Can anyone assist?

#14 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 07 November 2012 - 04:48 AM

Hi Margeau, I've responded to your email to hello@pagelines.com regarding the above situation. If you're using firebug and not find the correct css to cover all gradients try chrome dev tools, I've just checked on the navbar and it gives the full spectrum of css for most browsers. A copy of which is pasted below.

Please Login or Register to see this Hidden Content



#15 margeau

margeau

    Newbie

  • Members

  • 8 posts

Posted 07 November 2012 - 05:16 PM

THANK YOU! I have never used an emoticon, but one is surely in order. I added your supplied code to the css I had for the drop down menu and it is working.

I now realize I should have tried kgstew's advice above earlier (which shows extra browser support for gradients), but since it was used, as was yours, with the navbar portion of the css rather than the drop down I didn't think of it. I wasn't concerned with having a gradient on the drop down menu, but I needed to change the color - the gradient is fine as an avenue to get that.

My proof using the demo install is now what I needed it to be to get client approval to rework her live site using PageLines.

Thanks again to all who contributed to my success.

#16 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 08 November 2012 - 12:22 AM

The topic was marked as resolved.