Jump to content


Photo
- - - - -

Fixed NavBar - CSS for Changing Background Colour

fixed navbar

Best Answer James B , 17 January 2013 - 02:12 AM

You're welcome Sue :-)

Go to the full post


  • This topic is locked This topic is locked
15 replies to this topic

#1 suecockburn

suecockburn

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 16 January 2013 - 10:56 PM

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?

 

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 January 2013 - 11:08 PM

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 likes this

#3 suecockburn

suecockburn

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 16 January 2013 - 11:39 PM

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



#4 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 January 2013 - 12:31 AM

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 likes this

#5 suecockburn

suecockburn

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 17 January 2013 - 12:46 AM

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



#6 suecockburn

suecockburn

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 17 January 2013 - 12:55 AM

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



#7 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 January 2013 - 12:57 AM

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 likes this

#8 suecockburn

suecockburn

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 17 January 2013 - 01:08 AM

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



#9 suecockburn

suecockburn

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 17 January 2013 - 01:10 AM

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



#10 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 January 2013 - 01:26 AM

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



#11 suecockburn

suecockburn

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 17 January 2013 - 01:32 AM

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



#12 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 January 2013 - 01:49 AM

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 likes this

#13 suecockburn

suecockburn

    Advanced Member

  • Members

  • 43 posts
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 17 January 2013 - 01:53 AM

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



#14 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 January 2013 - 02:12 AM   Best Answer

You're welcome Sue :-)


  • suecockburn likes this

#15 carl007

carl007

    Advanced Member

  • Members
  • 37 posts
  • Country: Country Flag

Posted 26 February 2013 - 01:03 AM

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.



#16 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 26 February 2013 - 01:08 AM

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.







Also tagged with one or more of these keywords: fixed navbar