Need help with classes for font colour and some bg colours

dukehenry · Post by **dukehenry** » Mon Nov 06, 2006 5:22 am

Hello all, one of the web sites that I am helping tweak the look of is using a milonic javascript navigation menu.

However, I am having a LOT of problems adjusting colours via CSS and through the code that the web site is dynamically generating.

Here is the code for the menu itself:

Code: Select all

<script type="text/javascript">
with(milonic=new menuname("menu_1_senavigator1")){alwaysvisible="1";style=c0_senavigatormainmenu_senavigator1;orientation="vertical";align="left";position="relative";menuwidth="100%";itemwidth="100%";divides=1;margin=0;openstyle="ltr";
aI("status=News;text=News;showmenu=menu_1_14_senavigator1;onclass=senavigatoritemover senavigatoritemfirstover;offclass=senavigatoritem senavigatoritemfirst;pageclass=senavigatoritemselected senavigatoritemfirstselected");aI("status=SHOP ONLINE;text=SHOP ONLINE;url=http://alteregosports.com/page.cfm?PageID=56;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Free Classifieds;text=Free Classifieds;url=http://alteregosports.com/page.cfm?PageID=32;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=About Us;text=About Us;showmenu=menu_1_4_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Bike :: Buying Tips;text=Bike :: Buying Tips;showmenu=menu_1_12_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Bike :: Community;text=Bike :: Community;showmenu=menu_1_6_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Bike :: Maintenance;text=Bike :: Maintenance;showmenu=menu_1_11_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Bike :: Services;text=Bike :: Services;showmenu=menu_1_10_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Bike :: Technical;text=Bike :: Technical;showmenu=menu_1_9_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Paintball;text=Paintball;showmenu=menu_1_5_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Paintball :: Technical;text=Paintball :: Technical;showmenu=menu_1_13_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Snowboard;text=Snowboard;showmenu=menu_1_7_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=XC Ski;text=XC Ski;showmenu=menu_1_8_senavigator1;onclass=senavigatoritemover;offclass=senavigatoritem;pageclass=senavigatoritemselected");aI("status=Site Map;text=Site Map;url=http://alteregosports.com/page.cfm?PageID=36;onclass=senavigatoritemover senavigatoritemlastover;offclass=senavigatoritem senavigatoritemlast;pageclass=senavigatoritemselected senavigatoritemlastselected");}drawMenus();</script><noscript><ul class="senavigatortext"><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=14">News</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=102">Alter Ego adds Cervelo</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=100">Psycho Cross 4</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=110">Giro Helmets!</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=106">Gary Fisher Bicycles 2007!</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=109">Specialized Bicycles 2007!</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=105">Trek Bicycles 2007!</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=108">Trek Road Bicycles 2007!</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=56">SHOP ONLINE</a></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=32">Free Classifieds</a></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=4">About Us</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=90">Welcome!</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=38">Your Privacy</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=52">Policies and Shipping</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=12">Map / Contact Us</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=12">Bike :: Buying Tips</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=75">How To Pick The Best Bike For You</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=77">Buying A New Mountain Bike? Here's All You Need To Know</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=76">How To Buy Comfort And Hybrid Bikes</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=78">Buying A New Road Bike? Here's All You Need To Know</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=79">How To Pick The Right BMX Bike</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=6">Bike :: Community</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=68">Kids of Mud</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=20">Cycling Links</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=11">Bike :: Maintenance</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=74">Our Handy Dandy Bike Maintenance Chart</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=80">How To Wash Your Bike</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=87">Bicycle Tools List</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=73">Bicycle Lubrication</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=81">Brake Adjustment</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=82">Brake Maintenance</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=83">How To Adjust Your Rear Derailleur</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=84">How To Clean Your Chain And Drivetrain</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=10">Bike :: Services</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=61">Lifetime Service</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=69">Service Rates</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=9">Bike :: Technical</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=72">Frequently Asked Questions</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=71">Cycling Tips</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=85">Chain Replacement And Repair</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=5">Paintball</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=60">What is Paintball?</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=97">Why Buy Paintball Gear at Alter Ego Sports?</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=67">Sponsored Teams</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=66">Canadian Team Sponsorship</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=13">Paintball :: Technical</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=98">What is the differences between barrels?</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=93">Compressed Air or CO2?</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=99">Choosing the right paintball goggles</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=7">Snowboard</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=96">Why Buy Snowboard Gear at Alter Ego Sports?</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=62">Service Rates</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=65">Snowboard Links</a></ul></li><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?action=navigation&navigatorId=1&destinationId=8">XC Ski</a><ul><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=103">Upcoming XC Ski Events</a><li><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=63">Service Rates</a><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=64">Sponsored Teams</a></ul></li><li class="selastlink"><a href="http://websites.milonic.com/alteregosports.com/page.cfm?PageID=36">Site Map</a></li></ul></noscript>

Here is the "milonic CSS code"

Code: Select all

.milonictable {width:100%;background-color: #1a31c1;}
.milonictable td {vertical-align:middle;}
.senavigatoritem a {text-decoration:none;}
.senavigatoritemover {text-decoration:none;}
.senavigatoritemover a {text-decoration:none;}
a.senavigatoritemselected {text-decoration:none;}
a.senavigatoritemselectedover {text-decoration:none;} 
.senavigatoritemlastover {text-decoration:none;}

This is what the following code results in:

Here is what I want to know how to accomplish:

I want to be able to:

1. Set the background colour of the regular <a> links, right now they are yellow and I cannot figure out how to make them the same blue as the rest of the menu.

2. Set the font colour - black is too dark to read. Maybe white or a light grey.

3. When you mouseover one of expandable menus, it will expand with a good looking menu (blue bg and white font), but if you mouse over a link, it changes the bg colour to the same yellow as the main menu. I would like to know where I can change this value.

I have tried everything I know to get the job done, I don't know JS so I am at a bit of a loss here.

I have checked out the onclass CSS declarations and they are no help either. I have a feeling this is a simple fix, I just don't know which CSS declaration to look at.

I have tried to search the CSS for the specific background colour that I want to change, with no luck.

Thank you for your time, I hope someone can give me some tips.

dukehenry · Post by **dukehenry** » Mon Nov 06, 2006 8:23 pm

Alright, I have been reading the FAQ's and whatnot on style and so I have come to the following conclusions:

out of the mess of code that I posted above regarding the menu output, these are the keys for styling:

If this is an element that is being posted:

Code: Select all

aI("status=News;text=News;showmenu=menu_1_14_senavigator1;onclass=senavigatoritemover senavigatoritemfirstover;offclass=senavigatoritem senavigatoritemfirst;pageclass=senavigatoritemselected senavigatoritemfirstselected");

onclass and offclass should be key in designating style. However, I have attempted to use the classes with no success.

I have tried the following CSS:

Code: Select all


.senavigatoritemover {
	background-color		: orange;
	color					: white;
}

.senavigatoritem {
	background-color		: green;
	color					: white;
}

.senavigatoritemselected {
	background-color		: red;
	color					: white;
}

It doesn't seem to have any effect, as well as other selector versions such as a.senavigatoritemselected and whatnot.

If anyone can share their insight I would really appreciate it.

Also, to see the menu in action you can go to http://www.alteregosports.com

dukehenry · Post by **dukehenry** » Mon Nov 06, 2006 8:30 pm

I should also note that I have contacted the vendor who is providing the software for us to update their version, but I still hope that my problem can be addressed by someone in "the know".

Thanks

Post by **John** » Tue Nov 07, 2006 3:04 pm

As you noted, your menu version is way down-level. For support in the forum you must get up to the current version, v5.762 as this is written.

Also, your menu calls are incorrect. See the readme file in the docs folder or http://milonic.com/tablemenu.php.

You're also missing the drawMenus(); item at the end of your main menu.

Post by **Ruth** » Sat Nov 11, 2006 8:54 pm

Hi,

I just downloaded that page to see what I could figure out. Just where exactly am I going to find those classes in the css so I can see what's up? I can't seem to locate any of them.

Ruth