Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Changing color of NavBar


Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Have you checked out CrackBar in the Store?

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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]

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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]

Share this post


Link to post
Share on other sites

Posted · Report post

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;

}

Share this post


Link to post
Share on other sites

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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

;)

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.


.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);

}

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites