Main
Index 		Search
Posts 		Who's
Online 		Log
In

Home: Products: CMS Builder: Plugins & Add-ons:
Instant Website css class

 
 


sykomac
User

Dec 30, 2011, 4:21 AM

Post #1 of 11 (3806 views)
Shortcut
Instant Website css class Can't Post
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


(This post was edited by sykomac on Dec 30, 2011, 4:46 AM)


Tom P
User


Dec 30, 2011, 3:00 PM

Post #2 of 11 (3795 views)
Shortcut
Re: [sykomac] Instant Website css class [In reply to] Can't Post
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"):
Code
.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


sykomac
User

Jan 2, 2012, 4:58 PM

Post #3 of 11 (3772 views)
Shortcut
Re: [Tom P] Instant Website css class [In reply to] Can't Post
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


Jason
Staff / Moderator


Jan 3, 2012, 8:47 AM

Post #4 of 11 (3758 views)
Shortcut
Re: [sykomac] Instant Website css class [In reply to] Can't Post
Hi Paul,

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

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

Hope this helps
---------------------------------------------------
Jason Sauchuk - Programmer 
interactivetools.com

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


sykomac
User

Jan 3, 2012, 12:36 PM

Post #5 of 11 (3750 views)
Shortcut
Re: [Jason] Instant Website css class [In reply to] Can't Post
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


sykomac
User

Jan 3, 2012, 12:51 PM

Post #6 of 11 (3745 views)
Shortcut
Re: [Jason] Instant Website css class [In reply to] Can't Post
Actually, I'm wondering if there is a bug in the code.

I'm getting the following code:

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


Tom P
User


Jan 4, 2012, 11:04 AM

Post #7 of 11 (3733 views)
Shortcut
Re: [sykomac] Instant Website css class [In reply to] Can't Post
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


sykomac
User

Jan 5, 2012, 3:59 AM

Post #8 of 11 (3726 views)
Shortcut
Re: [Tom P] Instant Website css class [In reply to] Can't Post
Tom,

Yes, I would take it off; however, I am not adding that. It is part of the Instant Website code and I'm not sure where it is coming from.

I know the menu is created by nav.php but I'm not sure where that file is adding the extra '#' to the HTML code.

Any idea as to where I should check for it ?

Thanks,
Paul


Tom P
User


Jan 5, 2012, 10:33 AM

Post #9 of 11 (3715 views)
Shortcut
Re: [sykomac] Instant Website css class [In reply to] Can't Post
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)
Code
#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


sykomac
User

Jan 5, 2012, 5:07 PM

Post #10 of 11 (3711 views)
Shortcut
Re: [Tom P] Instant Website css class [In reply to] Can't Post
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


Tom P
User


Jan 5, 2012, 6:01 PM

Post #11 of 11 (3709 views)
Shortcut
Re: [sykomac] Instant Website css class [In reply to] Can't Post
Hi Paul,

Glad it worked!

Funny that I would have the '#' typo like that.

Note to self (and everyone who reads this), ALWAYS check your code for simple typos! (I've left my egregious error in the above for all to see, especially me).

Tom