Archived

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

  • 0

Fixed NavBar - CSS for Changing Background Colour


Question

Posted · Report post

Is someone able to help with how to input the CSS for changing the colour of a Fixed NavBar from one of the standard colours to a a different (not standard PageLines) colour? I think the code is something like this:

 

}

.navbar.pl-colour-green {

background-colour: #bbc584;

border-top: 1px solid #bbc584;

}

 

I have uploaded the plug-in 'Pagelines Customize' > clicked on 'Editor' under Plug-ins > selected the 'Pagelines Customize' plugin > selected the PageLines CSS file > entered the subject code immediately underneath the following wording (I've added it below too so you can see what II guessed had to be done) >

 

/* ============================== */
/* = Start Your Custom CSS Here = */
/* ============================== */

 

}

.navbar.pl-colour-green {

background-colour: #bbc584;

border-top: 1px solid #bbc584;

}

 

Nothing happens. I don't know CSS - just signed up with Lynda.com to learn. I'm used to a theme that asks for the HEX # I want to use :-) Help anyone?

 

 

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

You're welcome Sue :-)

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hello, can you please help by explaining how I can change the background color of my fixed Navbar

the site is - http://www.mansag.org/

Before the update I was able to tweak the css but now, i am unable to make the whole top bar green. 

 

I found the css in firebug but making changes in pagelines css window and saving it, it does reflect the changes, it reverts to Blue. 

 

Can you please help. 

 

thank you.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Carl,

 

Please open a new topic and kindly reference this one. It's considered topic hijacking and we don't reply normally to resolved topics. It's best to always open a new one to ensure we give you optimum attention to your issue.

 

Thanks for understanding.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

First, we use the American spelling, so colour vs. color may have some impact.

 

Next, my best recommendation would be to use the Dashboard > PageLines > Site Options > Custom Code area to paste your CSS.

 

The NavBar uses RGB color coding because of opacity.  See the CSS below for informative purposes:

 

.navbar.pl-color-black-trans {
    background-color: rgba(0, 0, 0, 0.12);
    background-image: -moz-linear-gradient(center top , rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
    background-repeat: repeat-x;
    border-top-color: rgba(0, 0, 0, 0.9);
    border-top-style: solid;
    border-top-width: 1px;
}
This line:
background-color: rgba(0, 0, 0, 0.12);
and other references to rgba set the color and the 0.12 set the opacity. You can pretty much leave the opacity alone, but the 0, 0, 0 represents black. You can find the applicable colors by using Color Picker to find just the right shade of green for your site.  You will see the color codes for r (red) g (green) b (blue) and coordinate them in that order.
 

The code you provided includes elements which don't exist, so I doubt they'll work.

 

The one above, modified will.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the response! I input the CSS below and it changed the border-top-colour (1 px) but not the actual navigation bar  ...

 

.navbar.pl-color-black-trans {
    background-color: rgba(186, 207, 140, 0.12);
    background-image: -moz-linear-gradient(center top , rgba(186, 207, 140, 0.8), rgba(186, 207, 140, 0.9));
    background-repeat: repeat-x;
    border-top-color: rgba(186, 207, 140, 0.9);
    border-top-style: solid;
    border-top-width: 1px;
}

 

Any suggestions?

 

(Thanks for the reminder about 'color' as opposed to 'colour' :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, the css for the navbar uses cross browser code for the background color as it uses gradients.

 

The background gradient is also supplied using the selector background-image, so you'll need to amend these. Not all of these codes show up in firebug so I've included the full background spectrum for the cross browser css below for you. 

 

.navbar.pl-color-black-trans { background-color: rgba(0, 0, 0, 0.12);

background-image: -moz-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-image: -ms-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(0, 0, 0, 0.8)),to(rgba(0, 0, 0, 0.9)));

background-image: -webkit-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-image: -o-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-image: linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(0,0,0,0.8)’, endColorstr=’rgba(0,0,0,0.9)’, GradientType=0);

border-top: 1px solid rgba(0, 0, 0, 0.9);

filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′,EndColorStr=’#222222′);

}
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks James ... some of your fonts in the last few lines of your code are showing up with strange symbols ... I've attached a screen print here so you can see what I mean.

 

Are you able to take a screen print on your end so I can see how they translate on my end?

post-45315-0-46272900-1358383609_thumb.p

Share this post


Link to post
Share on other sites

Posted · Report post

James, ignore my request ... I've done a search and think I've figured out what you've sent me. If it doesn't work I'll be posting a note here. Thanks :-)

Share this post


Link to post
Share on other sites

Posted · Report post

That strange, i'll look into why that happened. Doesn't seem to like the double quotes

 

http://screencast.com/t/X9b7FeJ7

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

The code works ... except that it colours both the fixed NavBar and the second NavBar ... hate to be a pain ... suggestions how I keep the second one black and only change the top menu? Thanks

Share this post


Link to post
Share on other sites

Posted · Report post

Our emails crossed ... thanks for the screen print James :D

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Sue, do you have a link to the page I can look at

Share this post


Link to post
Share on other sites

Posted · Report post

Sure James ... give me a few minutes to add the code back ... here's the link http://911smallbiz.com

Share this post


Link to post
Share on other sites

Posted · Report post

The easiest way I can think to do it is to go Pagelines>site options>navbar and you'll see an option to change the color of the 'fixed nav' at the top. Change that to blue and leave the standard navbar as blank, save.

 

Then in your css swap the pl-color-black trans line at the beginning for

 

.navbar.pl-color-blue 

That way the you're not editing the css for the black, only the blue which is assigned to the top nav.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you VERY much James! Hugely helpful. I'm heading off to dinner and then will make the changes later tonight. Thanks again for all your help. MOST appreciated. Sue :D :D :D

Share this post


Link to post
Share on other sites
This topic is now closed to further replies.