Jump to content
suecockburn

Fixed NavBar - CSS for Changing Background Colour

Recommended Posts

suecockburn+    2
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?

 

 

Share this post


Link to post
Share on other sites
Rob    547
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 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.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
suecockburn+    2
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' :-)

Share this post


Link to post
Share on other sites
James B    436
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. 

 

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

}
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
suecockburn+    2
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?

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

Share this post


Link to post
Share on other sites
suecockburn+    2
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 :-)

Share this post


Link to post
Share on other sites
James B    436
James B

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

 

http://screencast.com/t/X9b7FeJ7

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
suecockburn+    2
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

Share this post


Link to post
Share on other sites
suecockburn+    2
suecockburn

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
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

 

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

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
suecockburn+    2
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 :D :D :D

Share this post


Link to post
Share on other sites
James B    436
James B

You're welcome Sue :-)

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
carl007    0
carl007

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.


check my mini blog
www.depictdesign.com

Share this post


Link to post
Share on other sites
Rob    547
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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


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

  • Similar Content

    • sethoof
      By sethoof
      Trying to do some really simple font customization on the fixed navbar of my new site (www.sethcochran.com), but am just not figuring out how to get this done.  I have tried firebug, and read all the forum posts I can find and have tried three different custom css, but nothing seems to work 
       
      I want to make the font in the fixed navbar bigger, bold, and white.  
       
      .my-white-top {   .section-navi .nav-searchform, .section-navi ul {     font-size: 22px;     color: white;   } }   .bigger {   .navbar .navline > li > a {font-size: 22px; color:#ffffff !important;} }   test23 {   #navbaru89781 .navline > li > a { font-size: 30px;   } }    
      None of these has worked.  Can anyone help?
    • sqsatg
      By sqsatg
      Hi :)
       
      I would like the navbar becomes fixed and full width when reach a particular height (e.g : http://www.fubiz.net/)
      I can't provide you any link to the website since it is on local.
       
      Is it possible ? What should I do ?
       
      Regards
    • studio12
      By studio12
      Fixed Navbar enabled BUT Standard Navbar still there - can someone please tell me how to get rid of the Standard Navbar after Fixed Navbar enabled?
       
      website: http://www.barrywhitlow.com/
    • ppotent
      By ppotent
      So in October last year, I posted about a bug in the fixed navbar: http://forum.pagelines.com/topic/30309-fixed-navbar-stuck-changes-not-working/
      I got lots of help and support from Danny, but nothing resolved.
      Out of curiosity, I tried to enable fixed navbar again, now that we are at DMS 1.1.5, but it's still broken: ie. no changes can be made to navbar on static pages; only on post/category/tag pages
       
      So does anyone have any suggestions about how I can get the fixed navbar working again. Can I reinstall wordpress or DMS or something and then put my content back in? Any and all ideas welcome.
       
      Thanks
       
    • seanocaside21
      By seanocaside21+
      Hi Everyone, 
       
      I am working on a project and was wondering if it is possible to introduce a fixed full width section above the fixed navBar?
       
      It would contain things like contact details, social media icons and possibly a newsletter sign-up form.
      Something like this site: http://www.thewhiskybond.co.uk/
       
      Any advice / help would be appreciated. 
       
      Cheers,
       
      Sean
×