Different colored link

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • djcronos
    New Member
    • Sep 2007
    • 1
    #1

    Different colored link

    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:

    Code:
    .nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
.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%;}
.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%;}
.nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
.nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
    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:

    Code:
            <!-- Navigation Level 3 -->
        <div class="round-border-topright"></div>
        <h1 class="first">TurnkeySolutionsNow</h1>        <!-- Navigation with grid style -->
        <dl class="nav3-grid">
          <dt><a href="whyusetsn.html">Why Use TSN</a></dt>
          <dt><a href="productdevelopment.html">Product Development </a></dt>
		    <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
			<dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
			<dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
			<dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
			<dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
			<dd><a href="productdevelopment-industries.html">Industries</a></dd>
			<dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
          <dt><a href="contact.html">Contact Us</a></dt>
        </dl>                        
<p>&nbsp;</p>
      </div>
    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
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      Originally posted by djcronos
      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:

      Code:
      .nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
.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%;}
.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%;}
.nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
.nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
      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:

      Code:
              <!-- Navigation Level 3 -->
        <div class="round-border-topright"></div>
        <h1 class="first">TurnkeySolutionsNow</h1>        <!-- Navigation with grid style -->
        <dl class="nav3-grid">
          <dt><a href="whyusetsn.html">Why Use TSN</a></dt>
          <dt><a href="productdevelopment.html">Product Development </a></dt>
		    <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
			<dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
			<dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
			<dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
			<dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
			<dd><a href="productdevelopment-industries.html">Industries</a></dd>
			<dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
          <dt><a href="contact.html">Contact Us</a></dt>
        </dl>                        
<p>&nbsp;</p>
      </div>
      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:

      Code:
      a#specialLink
{
color: black;
hover: red;
background-color: blue;
}
      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

        Comment

        Previous template Next
        Working...