Jump to content

Archived

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

bwdsl247

CSS for Navbar color

Recommended Posts

bwdsl247

Hi - 

 

I'm using DMS; read the following post for the correct CSS settings, but using the Custom </> button on the DMS control panel, can't get it to work. 

 

http://forum.pagelines.com/topic/24634-fixed-navbar-css-for-changing-background-colour/

 

Here's a screenshot of how mine looks:

 

https://www.evernote.com/shard/s50/sh/aa7d966f-a16b-4327-9b19-6cad7f878788/d0ee1c55dcf08dbb6df19727cb4206bb

 

What am I missing / doing wrong?

 

Thanks!

 

Share this post


Link to post
Share on other sites
James B

Hi there, looking at the screenshot you've not put in the full spectrum for the css for the navbar. That's further down the post you've linked. Remember you need to adjust the .pl-color-black-trans to the actual color you have set in the navbar drop down, or change the color to black so it uses the class below.

 

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

}


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
bwdsl247

Hi James - 

 

Hmmm... I set Navbar to black default so it matches your code. Then, I changed the code like the following, using 128 in the 2nd RGB value ----- to get a dark green and experiment with. 

 

However, unless I'm doing this wrong, the navbar is still black, whether I do live preview or publish changes and view site. 

 

Please see full details here: https://www.evernote.com/shard/s50/sh/74ea3a35-84bc-4a90-8876-f99fb29efb0c/d3f98627dfcdcea4f676bafdb3da958a

 

Any suggestions, thanks!

 

Scott

 

.navbar.pl-color-black-trans { background-color: rgba(0, 128, 0, 0.12);
background-image: -moz-linear-gradient(top,rgba(0, 128, 0, 0.8),rgba(0, 128, 255, 0.9));
background-image: -ms-linear-gradient(top,rgba(0, 128, 0, 0.8),rgba(0, 128, 0, 0.9));
background-image: -webkit-gradient(linear,0,128,0 100%,from(rgba(0,128,0, 0.8)),to(rgba(0,128,0, 0.9)));
background-image: -webkit-linear-gradient(top,rgba(0,128,0, 0.8),rgba(0,128,0, 0.9));
background-image: -o-linear-gradient(top,rgba(0,128,0, 0.8),rgba(0,128,0, 0.9));
background-image: linear-gradient(top,rgba(0,128,0, 0.8),rgba(0,128,0, 0.9));
background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(0,128,0,0.8)’, endColorstr=’rgba(0,128,0,0.9)’, GradientType=0);
border-top: 1px solid rgba(0,128,0, 0.9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′,EndColorStr=’#222222′);
 
}

Share this post


Link to post
Share on other sites
bwdsl247

jmad - thanks for your comment and link. 

 

I, too, had a problem with the last filter line; once I commented it out and used some of the example code in your post, I started making progress. 

 

Feel free to close this post for now, thanks.

Share this post


Link to post
Share on other sites
Danny

There is a simpler method, you could just use the gradient mixin to generate all the code for you, for example:

 

#site .navbar.pl-color-black-trans {

#gradient .vertical(red, white);

}

 

When viewed in your browser it will print out compatible code for all browsers.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×