mikemayer66,
Typically you will find the CSS is within the Stylesheet (style.css) file. CSS literally stands for Cascading StyleSheets just so you know. Here is the location: DarkTemplate/style.css.
Hope this helps and let us know if you need anything else.
http://www.doc4design.com
doc4,
I am familiar with the style.css (kind of!) but I guess what I am struggling with is that I am looking for the code for each button so I can specify which image is going to be the rollover image…
I am looking for something similar to this example:
#home
{
display: block;
width: 107px;
height: 23px;
background: url(“homenormal.gif”) no-repeat 0 0;
}
#home:hover
{
background: url(“homerollover.gif”) no-repeat 0 0;
}
I am not seeing this in my style.css, I am pretty sure I am not missing it, am I just looking in the wrong place!?!
mikemayer66,
True, that is what you want in the end. The problem is there are currently no rollovers in the stylesheet so you won’t find this. You are only looking for half the equation if it exists.
If you’re talking about the menu itself you will need to add in additional code. Currently you are using a widget to display your navigation. You should probably just hard code it yourself and be sure to include individual classes on each link. Here is what you could do starting in the sidebar at <div id=”sidebar” replace the following:
<div id="sidebar">
<ul>
<li class="widget"><h2>.</h2>
<ul class='xoxo blogroll'>
<li><a href="http://www.rootdownfitness.com/" title="Home" target="_top"><img src="http://www.rootdownfitness.com/images/home_nav.png" alt="aHome" title="Home" /></a></li>
<li><a href="http://www.rootdownfitness.com/wic" title="What is CrossFit?" target="_top"><img src="http://www.rootdownfitness.com/images/wic_nav.png" alt="bWhat is CrossFit?" title="What is CrossFit?" /></a></li>
<li><a href="http://www.rootdownfitness.com/demos" title="Excersises + Demos" target="_top"><img src="http://www.rootdownfitness.com/images/demo_nav.png" alt="cExcercises + Demos" title="Excersises + Demos" /></a></li>
<li><a href="http://www.rootdownfitness.com/nutrition" title="Nutrition" target="_top"><img src="http://www.rootdownfitness.com/images/nutrition_nav.png" alt="dNutrition" title="Nutrition" /></a></li>
<li><a href="http://rootdownfitness.com/?m=200906" title="Message Board/Blog" target="_top"><img src="http://www.rootdownfitness.com/images/blog_nav.png" alt="eMessage Board/Blog" title="Message Board/Blog" /></a></li>
<li><a href="http://www.rootdownfitness.com/faq" title="Frequently Asked Questions" target="_top"><img src="http://www.rootdownfitness.com/images/faq_nav.png" alt="fFAQs" title="Frequently Asked Questions" /></a></li>
<li><a href="http://www.rootdownfitness.com/contact" title="Contact Us" target="_top"><img src="http://www.rootdownfitness.com/images/contact_nav.png" alt="gContact Us" title="Contact Us" /></a></li>
<li><a href="http://www.crossfit.com" title="CrossFit.com" target="_top"><img src="http://www.rootdownfitness.com/images/crossfitweb_nav.png" alt="hCrossFit.com" title="CrossFit.com" /></a></li>
<li><a href="http://journal.crossfit.com/" title="CrossFit Journal" target="_top"><img src="http://www.rootdownfitness.com/images/journal_nav.png" alt="iCrossFit Journal" title="CrossFit Journal" /></a></li>
<li><a href="http://crossfitscottsdale.com" title="CrossFit Scottsdale" target="_top"><img src="http://www.rootdownfitness.com/images/scottsdale_nav.png" alt="jCrossFit Scottsdale" title="CrossFit Scottsdale" /></a></li>
</ul></li>
with something like this:
<div id="sidebar">
<ul>
<ul class='xoxo blogroll'>
<li><a class="home" href="http://www.rootdownfitness.com/" title="Home" target="_top">Home</a></li>
<li><a class="crossfit" href="http://www.rootdownfitness.com/wic" title="What is CrossFit?" target="_top">What is Crossfit</a></li>
Then you will be able to include a css style like so:
#home {
display: block;
width: 107px;
height: 23px;
background: url("homenormal.gif") no-repeat 0 0; }
#home {
background: url("homenormal.gif") no-repeat 0 -107; }
Your image should include both of the rollover states side by side.
http://www.doc4design.com
