Instant Website css class
11 posts by 3 authors in: Forums > CMS Builder: Plugins & Add-ons
Last Post: January 5, 2012 (RSS)
By sykomac - December 30, 2011 - edited: December 30, 2011
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
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
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
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
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
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
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: [Tom P] Instant Website css class
By sykomac - January 5, 2012
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
Re: [sykomac] Instant Website css class
By (Deleted User) - January 5, 2012
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
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