Instant Website css class

Hi Paul,

To edit the behavior of links (in this layout), add the following to the layout-leftnav.css or layout-rightnav.css file (depending on which one you're using). Should be around line 35 or so (just after the declaration for ".menu"):
.menu a:link, .menu a:visited {}

.menu a:active {}

.menu a:hover {}

These calls will allow you to set features for links in the unvisited (link), visited, active and hover states (I've grouped "link" and "visited" together so that the links always look the same unless the cursor is hovering over them or they are the current link).

To explore your options, try http://w3schools.com/cssref/sel_hover.asp - it has good examples to follow and a sandbox feature so you can experiment.

Thanks,

Tom

Thanks for the reply.

Unfortunately, that is not working.

If you look at the site www.mshof.com you will see what I want to do.

I am able to have all menu items turn red on hover; however, I also want "Home Page" and "Member Area" to also change to red on hover.

I have tried every class that I can see associated with those items but nothing works.

Any other idea as to what I can look for?

Thanks,
Paul

Hi Paul,

To have the text for "Member Area" and "Home Page" to change red when hovered over, you need this CSS rule:

#sidebar li a.subNavhover:hover {
color: red;
}

Hope this helps

Well, thanks for all the help so far.

However, none of the code works.

Guess I'll keep digging some more or just leave things the way they are.


Paul
www.mshof.com

Actually, I'm wondering if there is a bug in the code.

I'm getting the following code:

<div id="sidebar">
<ul id="menuMain" class="menu noaccordion">
<li class='#menuMain'>
<b> <a href="Home-Page-4" class="subNavhover subNav">Home Page</a>
</b>

I'm guessing that the first li id under the div should not begin with a '#' ?

Can you start the name of a class with the '#' ?

Paul

Hello sykomac,

You're right, classes and id's for elements should be alphanumeric with _ or - if you want to separate words or parts of the name.

The gate (#) is used in the stylesheet to declare a div (eg #thisIsADiv) and a period (.) is used for a class (eg .thisIsAClass).

Removing that gate from the html should fix the problem.

Hope that helps,

Tom

Hi Paul,

I've reviewed your live site (http://www.mshof.com/) and found this solution - add the following to your css after the #sidebar li a.subNavhover declaration (line 131)
#sidebar li a:hover{
color:#red;
}
#sidebar li a:hover.subNavhover {
color:#red!important;
}

This will set all links in li elements in the sidebar div to red and specifically set all links in the sidebar div in li elements with the class subNavhover to red.

Using the '!important' tag to make browsers always follow a rule is normally only needed if something that could be overridden would dramatically affect the look of a page but in this case we really, really want the rule to be followed and override any subsequent rules that might affect the color of the hover link.

Having said that, it would be worth going through your css and removing any duplication of rules - it's sometimes time-consuming but it is worth it as it will ultimately make editing the look of the site easier and less prone to overrides and crossovers.

With regard to the '#' appearing in the class for li elements, the live site isn't demonstrating that issue so I assume that all is well on that front.

Hope this helps,

Tom

Tom,

Thanks, that worked after I changed the "Color:#red" to "color: red"

I did find the code that added the "#" to the class on the LI. So that has been fixed.

As far as the CSS goes, it is all generated by Instant Website. I added about 6 lines at the end of the file but that was all.

Anyway, thanks.

Paul