Jump to content

Archived

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

detritustroll

Navbar Hover Colour

Recommended Posts

detritustroll

Hi Guys and Gals,

 

Hoping this is a simple thing.  Firstly I am NOT a programmer of any sort (basic HTML is about it)

 

I am using the DMS wordpress theme, I am using NavBar which is brilliant.  What I cant do is change the hover colour (set as blue)  I can set the bar colour, i can set the underline colour, but not the actual onmouseover colour if that makes sense? (will put a link to show if i can how).

 

If someone could tell me if 

 

a: I can change it

b: how to change it and which file I need to edit?

 

That would be brilliant

 

Thank You

 

Tom.Screen%20Shot%202013-11-16%20at%2017.52.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

In order to change the hover state background color and text, you will need to use Custom CSS. You can do this by using your browsers inspection tools, I recommend Google Chromes.

 

For more info regarding customizing DMS, see our documentation - http://docs.pagelines.com/customize/how-to-customize

 

However, if you're using a child theme you can add the following code to your child themes style.less file and these variables will override the default color(s).

 

@dropdownLinkBackgroundHover: red;
@dropdownLinkBackgroundActive: red;

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
detritustroll

Sorry, 

 

Am still lost, I have go into editor on the wordpress theme (and cannot find style.less) I also dont quite know what you mean by using browers inspection tools??

 

Tom

Share this post


Link to post
Share on other sites
James B

Hi Tom

 

The browser inspection tools allow you to look into the live page to see how its coded. Examples of these types of tools are firebug and chrome dev tools - https://developers.google.com/chrome-developer-tools/?csw=1

 

The style.less file doesn't show in the theme editor unfortunately, you'd need to edit this file using a code editor and uploading via ftp. Or you can place your LESS/Css into the DMS control panel via the custom code section instead to take affect.


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
KimAnn03

Hi James B

 

I found this CSS when using firebug but it is not working when I put it in the customs CSS. Is there something you see about the code that may be causing it to not work? I put this in and still get the blue color on the dropdown menus.

 

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
    background-color: #f1bc2f;
    background-image: -moz-linear-gradient(center top , #f1bc2f, #f1bc2f);
    background-repeat: repeat-x;
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: 0 0px 0 rgba(0, 0, 0, 0.0);
}

Share this post


Link to post
Share on other sites
batman

Hi KimAnn03

I change the navbar color in this web 
http://natfoto.com.ar

 

The code is:

 

/*--COLOR NAVBAR--*/
.navbar.pl-color-base .navline > li:hover > a, .navbar.pl-color-base .navline > li.current-menu-item > a, .navbar.pl-color-base .navline > li.dropdown.open > a {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
box-shadow: 0px -4px 0px rgb(33, 172, 80) inset;}
 
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
text-decoration: none;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
color: rgb(255, 255, 255);
background-color: rgb(33, 172, 80);
background-image: linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -o-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -moz-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-image: -ms-linear-gradient(bottom, rgb(39,207,95) 9%, rgb(34,172,80) 50%);
background-repeat: repeat-x;
}
 
You can change the color as you like
;)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
James B

Thank you Batman :-)


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

×