Instant Website css class

By sykomac - December 30, 2011 - edited: December 30, 2011

Good day.

I am running Instant Website and have a question.

I want to change the menu items to change to red when hovering over them. I have been able to do that for most of them. I can't seem to change the main heading.

For example: my menu looks like this:

Home Page
- About Us
- Contact Us
- Donations
- Newsletter

Member Area
- Login
- Member Profile

So I have been able to change the "About Us", "Contact Us", etc. so they change to red when hovering.

What I have not been able to do is to change the "Home Page" and "Member Area" links so they also change on hover.

Anyone else using Instant Website and have a suggestion as to what class, etc. to change?

I've gone through the code but anything I change does not affect them.


** On another note, do you guys have any plans on updating Instant Website? Maybe release some new templates?

Thank you,
Paul

Re: [sykomac] Instant Website css class

By (Deleted User) - December 30, 2011

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

Re: [Tom P] Instant Website css class

By sykomac - January 2, 2012

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

Re: [sykomac] Instant Website css class

By Jason - January 3, 2012

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
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Instant Website css class

By sykomac - January 3, 2012

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

Re: [Jason] Instant Website css class

By sykomac - January 3, 2012

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

Re: [sykomac] Instant Website css class

By (Deleted User) - January 4, 2012

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

Re: [sykomac] Instant Website css class

By (Deleted User) - January 5, 2012

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

Re: [Tom P] Instant Website css class

By sykomac - January 5, 2012

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