By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,665 Members | 1,513 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,665 IT Pros & Developers. It's quick & easy.

Different colored link

P: 1
Hi all,

I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code:

Expand|Select|Wrap|Line Numbers
  1. .nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
  2. .nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px;  border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}
  3. .nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}
  4. .nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
  5. .nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
  6.  
Note the a.inquiry:hover above - I added that entire line in hopes that would change the color.

And here is the HTML in question:

Expand|Select|Wrap|Line Numbers
  1.         <!-- Navigation Level 3 -->
  2.         <div class="round-border-topright"></div>
  3.         <h1 class="first">TurnkeySolutionsNow</h1>        <!-- Navigation with grid style -->
  4.         <dl class="nav3-grid">
  5.           <dt><a href="whyusetsn.html">Why Use TSN</a></dt>
  6.           <dt><a href="productdevelopment.html">Product Development </a></dt>
  7.             <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
  8.             <dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
  9.             <dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
  10.             <dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
  11.             <dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
  12.             <dd><a href="productdevelopment-industries.html">Industries</a></dd>
  13.             <dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
  14.           <dt><a href="contact.html">Contact Us</a></dt>
  15.         </dl>                        
  16. <p>&nbsp;</p>
  17.       </div>
  18.  
The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues.

Any help is appreciated - thanks in advance!

Patrick
Sep 11 '07 #1
Share this Question
Share on Google+
1 Reply


Death Slaught
100+
P: 1,137
Hi all,

I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code:

Expand|Select|Wrap|Line Numbers
  1. .nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
  2. .nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px;  border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}
  3. .nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}
  4. .nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
  5. .nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
  6.  
Note the a.inquiry:hover above - I added that entire line in hopes that would change the color.

And here is the HTML in question:

Expand|Select|Wrap|Line Numbers
  1.         <!-- Navigation Level 3 -->
  2.         <div class="round-border-topright"></div>
  3.         <h1 class="first">TurnkeySolutionsNow</h1>        <!-- Navigation with grid style -->
  4.         <dl class="nav3-grid">
  5.           <dt><a href="whyusetsn.html">Why Use TSN</a></dt>
  6.           <dt><a href="productdevelopment.html">Product Development </a></dt>
  7.             <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
  8.             <dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
  9.             <dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
  10.             <dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
  11.             <dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
  12.             <dd><a href="productdevelopment-industries.html">Industries</a></dd>
  13.             <dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
  14.           <dt><a href="contact.html">Contact Us</a></dt>
  15.         </dl>                        
  16. <p>&nbsp;</p>
  17.       </div>
  18.  
The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues.

Any help is appreciated - thanks in advance!

Patrick
Try changing the "class" to "id" like this:

HTML:

[HTML]<a href="location" id="specialLink">Text</a>[/HTML]
CSS:

Expand|Select|Wrap|Line Numbers
  1. a#specialLink
  2. {
  3. color: black;
  4. hover: red;
  5. background-color: blue;
  6. }
the CSS needs to be in an external CSS document. So now any link with the "id" 'specialLink' will have those colors.

Hope it helps, Death
Sep 11 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.