15 replies to this topic

[suecockburn]

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?

 

 

[Rob]

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

Please Login or Register to see this Hidden Content

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.

[suecockburn]

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' :-)

[James B]

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. 

 

Please Login or Register to see this Hidden Content

[suecockburn]

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?

Attached Files

•  Screen Shot 2013-01-16 at 4.43.46 PM.png   212.14KB  33 downloads

[suecockburn]

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 :-)

[James B]

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

 

Please Login or Register to see this Hidden Content

[suecockburn]

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

[suecockburn]

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

[James B]

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

[suecockburn]

Sure James ... give me a few minutes to add the code back ... here's the link

Please Login or Register to see this Hidden Content

[James B]

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

 

Please Login or Register to see this Hidden Content

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

[suecockburn]

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

[James B]

You're welcome Sue :-)

[carl007]

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

the site is - 

Please Login or Register to see this Hidden Content

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.

[Rob]

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.