Jump to content

Archived

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

toddlo

Nav menu colors

Recommended Posts

toddlo

How do I change the color of the hovered menu item in the nav menu?

Share this post


Link to post
Share on other sites
greenfly

Hello Livingbusiness 

 

You can change the colour using Custom CSS. 

 

Do you have a link to your site?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
toddlo

Hello Livingbusiness 

 

You can change the colour using Custom CSS. 

 

Do you have a link to your site?

Sorry. Business.toddlohenry.com...

Share this post


Link to post
Share on other sites
greenfly

Hi 

 

Using your browsers inspection tools you can highlight the necessary page element and make the changes to the code directly in you browser. 

 

If you havent got firebug ( http://getfirebug.com for safari) ot the Firebug Lite browser extension for chrome this is a good place to start. Here is an older blog post regarding Firebug http://www.pagelines.com/getting-started-with-firebug/ 

 

You should be changing something like this 

.navbar a hover {
  color:#426097;
} 

Let us know what you come up with and we will be able to steer you in the right direction 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
toddlo

I asked for help because I was unable to find what I needed using this method. I'll try again...

Share this post


Link to post
Share on other sites
toddlo

Sorry. I can't figure it out. I can't find the necessary page element...

Share this post


Link to post
Share on other sites
greenfly

Please can you show us what you have tried and we may be able to point you in the correct direction. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
toddlo

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {background-color: #426097;} 

Share this post


Link to post
Share on other sites
James B

Hi there, try the below

 

.navbar .navline > li > a:hover {
    background-color: #FFFF00;
}

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
toddlo

It works for the nav bar, but not for the hover in the dropdown menu so this is a partial solution...

Share this post


Link to post
Share on other sites
toddlo

This is still an open issue and I'm still waiting for a reply...

Share this post


Link to post
Share on other sites
Danny

Hi,

 

The simplest way to achieve this is by using a child theme and adding the following the code the style.less file.

 

@dropdownLinkBackgroundHover: pink; 
@dropdownLinkBackgroundActive: green; 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
toddlo

Is all this documented anywhere? Can you give me links? I've never done this before so it's not the simplest way for me -- css would be the simplest way...

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Documentation on css can be found at http://docs.pagelines.com/advanced/less-css and an overview of using chrome/firebug can be found on the previous framework documentation (the process is the same though) at http://support.pagelines.me/docs/customization/custom-css/.


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
toddlo

I know how to use Chrome/firebug but you didn't provide a link to doing a child theme in Pagelines?!

Share this post


Link to post
Share on other sites
toddlo

Also, why does one person tell me to do this in css and one person tell me to do this in less? Picking menu colors should be a simple function built into the navbar but I've been trying to figure out how to do this for a week...

Share this post


Link to post
Share on other sites
toddlo
I can make the dropdown menu appear in the color I want when I comment out the background-image like below but when I try to make the change permanent by putting it in the css it doesn't change...
 
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
    background-color: #426097;
  /*  background-image: -moz-linear-gradient(center top , #426097, #426097); */
    background-repeat: repeat-x;
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

 

Why does this work in Firebug but not when I publish it?

Share this post


Link to post
Share on other sites
Rob

Each of us have unique expertise in stylesheets.  Danny's our LESS expert, while James and I focus on CSS and CSS3.  That's why you're getting different replies. 

Are you able to see those changes in Firefox?

 

Do you have a cache plugin activated? If so, clear the cache and deactivate it. Often times, the cache plugin keeps changes from being seen.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

You have commented out the key line for Firefox. Thus the previous code, still active, is picking up that essential line and using the older colors still set there.  Activate that line and it should work.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
toddlo

There is no caching activated. I am able to see the changes that I want in Firebug in Firefox. However, when I copy and paste the same code and put it in CSS Stylesheet Editor, it doesn't work...

Share this post


Link to post
Share on other sites
Rob

Can you set up an admin account and email it to robert@pagelines.com?  I'll take a look.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

Where exactly are you placing the CSS we've been providing? I can't find anything.

 

Where did you get Orbisius Child Theme Editor and why would you need that if we provide the ability to create child themes internally? DMS doesn't need all the extra plugins you seem to be using to do the same things it already does. 

 

Deactivate the plugins. Add the custom code in one of three places:

1.  Custom section under the toolbar

2.  Child theme's style.css

3.  PageLines Customize plugin's style.css.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

Unfortunately, we cannot support any CSS methods other than the ones prescribed in our documentation.  Third party CSS plugins are not supported.

 

Here's the code you need. 

 

It should be placed in one of the three places listed above.

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
toddlo

If you go back to #15 I asked for documentation on how to do a child theme in pagelines and I got no response. So, how do I do it internally?

Share this post


Link to post
Share on other sites

×