www.webdeveloper.com
Results 1 to 6 of 6

Thread: overriding color

  1. #1
    Join Date
    Jan 2003
    Location
    ohio
    Posts
    13

    overriding color

    Everything I ever wanted to specify for links on my site is safely tucked away in a stylesheet. When I have needed to, I have successfully overridden font size and font face of the clickable text, which otherwise are determined by stylesheet contents.

    But now I am adding a special temporary link to a navigation bar and I want to give it some punch by changing the color for just that link ... text, vlink and hover. Everything I've experimented with is ignored and the link appears just like every other link in the bar, i.e., per the stylesheet specs.

    Ideas?

  2. #2
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    Can't you just use a class or ID (making sure it's definition is after all other link classes)?

    CSS:
    Code:
    a:link {
      /*Default styles*/
    }
    #menu a:link {
      /*Menu style*/
    }
    HTML:
    Code:
    <p id="menu">
      <a href="#">Menu</a>
    </p>
    <p>
      <a href="#">Main</a>
    </p>

  3. #3
    Join Date
    Jan 2003
    Location
    ohio
    Posts
    13
    Thank you ... I tried your CLASS suggestion and it worked. I had initially hoped I could use HTML to trump CSS, but it seems that I really needed more CSS to trump CSS. Like so:

    CSS

    A.link { color: green }
    A.visited { color: green }
    A.hover { color: red }

    A.SPECIALCASE.link { color: orange }
    A.SPECIALCASE.visited { color: orange }
    A.SPECIALCASE.hover { color: red }

    HTML

    <a href="oldpage.shtml">GREEN TEXT</a>
    <a class="SPECIALCASE" href="newpage.shtml">ORANGE TEXT</a>
    <a href="anotheroldpage.shtml">GREEN TEXT</a>

    This worked nicely in IE 5.5. Except that hover doesn't work, I could otherwise say it worked in NS 4.79. It did not work in NS 6.2.3 or NS 7.0, that is, all links were green (though hover does work in those browsers).

    All in all, success! (I long ago quit worrying about the benighted few who continue to use Netscape and any others who won't come in out of the rain.)

    10 gratitons* to Rick Bull.



    * International Standard Unit of Gratitude

  4. #4
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    glad it worked. I think you may find that the hover isn't working in some browsers because you code is a little off. Use a semi-colon instead of a dot for pseudo classes (e.g. hover):

    Code:
    A:link { color: green }
    A:visited { color: green }
    A:hover { color: red }
    
    A.SPECIALCASE:link { color: orange }
    A.SPECIALCASE:visited { color: orange }
    A.SPECIALCASE:hover { color: red }
    Also orange is not a valid colour, and won't work in some browsers, so really you should use the hex equivilant (sorry can't remember it off the top of my head).

  5. #5
    Join Date
    Jan 2003
    Location
    ohio
    Posts
    13
    oops ... sloppy typing on my part ... had i cut and pasted, the colons would be there rather than the periods

    also, i just picked color names as illustrative for this posting. the real thing is at http://www.iosoc.com/Scripts/iosA.css (open with notepad) and its usage is on the homepage

    now let me muse about a real challenge ... suppose i had too much time on my hands and wanted to call attention to the "special" link by making each letter in the clickable text a different color ... i know it's frivolous, but is there an easier way than to make each individual letter a separate link with its own class?

  6. #6
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by tom_f
    making each letter in the clickable text a different color
    <a href="" class="rainbow">L<span class="one">I</span><span class="two">N</span><span class="three">K</span></a>

    and I think you'll manage on your own from there
    // Stefan Huszics

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles