Resolved Please help change nav color/hover

[marklamberth 0]

Hey there, I posted a similar question a few days ago, and was directed to learn more about CSS from w3schools. I spent a lot of time over there and learned a lot, but still wasn't able to quite understand the information I need to be able to augment CSS myself. I am confident I will be able to learn it, but I really need to make this site live.

Can you please help me with the CSS I need to make the nav on this site:

LearnEnglishU.com ...

... look like the nav on this site:

LetsDoEnglish.com

I promise to continue to learn so I don't gum up the forum with basic questions.

(my developer worked on the LetsDoEnglish site. He is no longer available to work on this, or I would just have him do it.)

Thanks again!!!

[James B 436]

Hi there,

the easiest way to do this would be to download our free Css lite plugin as you're using the simple nav. This will allow you set the navigation colors using a menu on the site options tab. Here's the link http://www.pagelines.com/store/plugins/simple-css-lite/

[marklamberth 0]

I already tried that yesterday. I installed the plug-in, but can't find the place to configure it anywhere on the back end of Pagelines/Wordpress admin. I looked up directions, but couldn't seem to find the configuration back end.

Where is it please?

[Rob 547]

Try this to start:

.main_nav ul li {

    background: none repeat scroll 0 0 #E3E3E3;

    float: left;

    font-family: "Lucida Grande","Lucida Sans","Lucida Sans Unicode",sans-serif;

    font-size: 1.3em;

    font-weight: bold;

    margin: 0;

    padding: 0;

    text-align: right;

    text-transform: uppercase;

}


.main_nav {



	line-height: 0.3em;

	text-align: left;

}


.main_nav ul li:hover a, .main_nav ul a:focus, .main_nav ul a:active {



	background-color: #FFD400;

	color: #000000;

}

I am not sure how it will look as I cobbled it together from several sources.

[Rob 547]

Simple CSS Lite would be the ideal scenario and really needs little instruction. Just select the colors you want. Hover means... when you mouse over it. Active is the page you're on. The rest should be self-explanatory.

Just add color codes like #C00000. You can get color codes from www.colorpicker.com.

[marklamberth 0]

Thank you Rob. My problem is that I simply can't find the place to configure the CSS Lite plug-in. The plug-in page says - "The Simple CSS options are located at WordPress -> PageLines -> Settings.

Where can I find Wordpress>Pagelines> settings?

Sorry if this is a silly question. I just can't find it.

Thanks

[James B 436]

Go to Pagelines>Site Options, the Simple Css Lite tab will appear at the bottom of the list under the custom code box.

[marklamberth 0]

Hi James, there is no Pagelines>site options.

There is Platform Pro tab, but I don't see "site options"

And, at the bottom of the Platform Pro tab settings, I do see Custom Code but there is nothing under that. I'll be happy to send you a screenshot.

I have properly uploaded the plug-in, and activated/deactivated it several times. I don't see it's configuration area anywhere on the back end of the site.

[mackenzie 12]

I think James thought you were using Pagelines Framework versus Platform Pro. Please confirm which version and the # update you are using?

[marklamberth 0]

I am using Platform Pro, and version 1.5.3

[James B 436]

Ah i see. I'm sorry i thought you were using the Framework. In that case I'm afraid you'll have to use the Css provided below by pasting it into the custom code box. The CSS lite plugin only works with the PL Framework.

Change the hex values to the color of your choice.

This code changes the Nav BG color


.main_nav ul li {

background: #000000;}


This will change the active color and font


.main_nav ul li:hover a, {

background-color: #FFD400;

color: #000000;

}


This will change the hover color and font


.main_nav ul a:active {

background-color: #FFD400;

color: #000000;}

[marklamberth 0]

Okay, I'll use the CSS you sent over.

Thank you all VERY MUCH for your help with this.

Mark

[James B 436]

You're welcome Mark, I'll close this thread for you :-)

[James B 436]

The topic was marked as resolved.

[stevelight82 0]

Hi guys,
Thanks for this. 

 

I have noticed that when using custom css with the code you gave before, you can only change the nav bg color. Anything else stays the same color. see http://stevelight.org/kambirdee/

 

I want to change the text and rollover colors but they do not change.

Please advise.

Thanks

Steve

[Danny+ 1,327]

Hi Steve,

 

In order to change the color of text and hovers, you will need to inspect the menu using Firebug or your browsers built-in web dev tools. 

 

You can using this which should help you get started.

 

#page .main_nav ul li { }  <=== Use this to add a background color

#page .main_nav ul li a { }  <=== Use this to change the color of the text.

[stevelight82 0]

Thanks so much Danny!

I did use firebug, but couldn't find it. :-/

 

Have a good day,

Cheers

Steve

[stevelight82 0]

Sorry dude, One more think, how do I change the colour of the current page selected in the nav? 

 

http://stevelight.org/kambirdee/

 

Tried this but no joy...

 

 

#page .main_nav .currentLink {

   color: #ffffff;

   background-color: #003366;

}

 

Thanks

Steve

[Danny+ 1,327]

Hi Steve,

 

You will need to use the menu classes that Wordpress provides.

 

http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes

 

Which should look something like this:

 

 

#page .main-nav li.current_page_item a { }