Resolved Changing color of NavBar

[iamtheeverydaygirl 0]

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

[Rob 547]

Okay, this is the CSS affecting the color:

.pl-color-grey {

background: -moz-linear-gradient (center top , #FFFFFF 0%, #DCDCDC 100%) repeat scroll 0 0 transparent;

}

#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

[kgstew 2]

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 http://reallocate.org

Thanks for the help. Lets chat soon.

[batman 389]

HI kgstew

I use this to change orange the NavBar

/*--CHANGE COLOR NavBar FIXED--*/

.navbar.pl-color-black-trans {

background-color: rgba(242,102, 14, 0.9);

background-image: none;

background-repeat: repeat-x;

border-top: none;}


/*--CHANGE COLOR NavBar SEARCH--*/

.navbar .searchform .searchfield {

background-color: rgba(255, 255, 255, 0.35);

border: none;

box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset, 0px 1px 0px rgba(255, 255, 255, 0.15);}


/*--CHANGE COLOR NavBar HOVER--*/

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {

background-color: rgb(242, 110, 14);

background-image: none;

background-repeat: repeat-x;}

You can change the color as you like

[Rob 547]

Kyle,

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

I checked your site:

.navbar.pl-color-blue {

background-color: #5E8DC8;

background-image: -moz-linear-gradient(center top , #0A3443, #4574B8);

background-repeat: repeat-x;

border-top: 1px solid #4574B8;

}

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

[kgstew 2]

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.

.navbar.pl-color-blue {

background-color: #507282;

background: -moz-linear-gradient(center top , #507282, #468bb0);

background: -webkit-gradient(linear, left top, left bottom, from(#507282), to(#468bb0));

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#507282', endColorstr='#468bb0');

background-repeat: repeat-x;

border-top: 1px solid #4574B8;

}[/html]

[James B 436]

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

[margeau 0]

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.

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {

    background-color: #57CFC6;

    background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

    background-repeat: repeat-x;

    color: #FFFFFF;

    text-decoration: none;

}


.dropdown-menu .active > a, .dropdown-menu .active > a:hover {

    background-color: #57CFC6;

    background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

    background-repeat: repeat-x;

    color: #FFFFFF;

    outline: 0 none;

    text-decoration: none;

}

The site I am working on is in draft form here: http://prima.pagelines.me/

Any assistance would be so much appreciated. Thank you.

[margeau 0]

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."

#page .dropdown-menu li > a:hover, #page .dropdown-menu li > a:focus, #page .dropdown-submenu:hover > a, #page .dropdown-menu li.current-menu-item > a {

background-color: #57CFC6;

background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

background-repeat: repeat-x;

color: #FFFFFF;

text-decoration: none;

}


#page .dropdown-menu .active > a, #page .dropdown-menu .active > a:hover {

background-color: #57CFC6;

background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

background-repeat: repeat-x;

color: #FFFFFF;

outline: 0 none;

text-decoration: none;

}

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, (http://harbourtownlighthouse.com/):

.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, #site .dropdown-menu .current-menu-item > a {

background-color: #0088CC;

color: #FFFFFF;

text-decoration: none;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);

}

plus this:

.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, #site .dropdown-menu .current-menu-item > a {

background-color: transparent;

color: #E30613 !important;

}

.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {

background-color: transparent;

color: #E30613 !important;

}

Thank you for any possible help resolving this.

[catrina 103]

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

#page div.DIVLAYERNAME .dropdown-menu... etc. etc.[/CODE]

[margeau 0]

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?

#page div.navbar-inner .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {

background-color: #57CFC6;

background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

background-repeat: repeat-x;

color: #FFFFFF;

text-decoration: none;

}


#page div.navbar-inner .dropdown-menu .active > a, .dropdown-menu .active > a:hover {

background-color: #57CFC6;

background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

background-repeat: repeat-x;

color: #FFFFFF;

outline: 0 none;

text-decoration: none;

}

I also tried this:

#page div.navbar-inner  .dropdown-menu li > a:hover, #page div.navbar-inner .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, #page div.navbar-inner .dropdown-menu li.current-menu-item > a {

    background-color: #57CFC6;

    background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

    background-repeat: repeat-x;

    color: #FFFFFF;

    text-decoration: none;

}


#page div.navbar-inner  .dropdown-menu .active > a, #page div.navbar-inner .dropdown-menu .active > a:hover {

    background-color: #57CFC6;

    background-image: -moz-linear-gradient(center top , #61e0d5, #52bdb4);

    background-repeat: repeat-x;

    color: #FFFFFF;

    outline: 0 none;

    text-decoration: none;

}

[Jenny 33]

Have you checked out CrackBar in the Store?

[margeau 0]

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?

[James B 436]

Hi Margeau, I've responded to your email to [email protected] 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.

.navbar.pl-color-orange {

    background-color: #FAA732;

    background: -moz-linear-gradient(center top , #904FFB, #0653F8);

background: -moz-linear-gradient(top,#904FFB 0%,#4574B8 100%);

background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0653F8),color-stop(100%,#4574B8));

background: -webkit-linear-gradient(top,#904FFB 0%,#0653F8 100%);

background: -o-linear-gradient(top,#904FFB 0%,#0653F8 100%);

background: -ms-linear-gradient(top,#904FFB 0%,#0653F8 100%);

background: linear-gradient(top,#904FFB 0%,#0653F8 100%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#904FFB',endColorstr='#0653F8',GradientType=0);

}

[margeau 0]

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.

[Rob 547]

The topic was marked as resolved.