Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Scotland
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing CSS Link Color Attribute

    I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour.

    My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to.

    I've only ever done a small amount of JS coding but from the research I've done it should go something like this,

    Code:
    document.style.alinkColor = "COLOR"
    I got to that via discovering that

    Code:
    document.style.backgroundColor = "COLOR"
    will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case.

    Anyone able to point me in the right direction?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,111
    Thanks
    75
    Thanked 4,334 Times in 4,300 Posts
    No, link colors are almost surely set as attributes on the a tag:

    Code:
    <style type="text/css">
    a { 
        color: pink;
    }
    a:visited {
        color: red;
    }
    a:hover {
        color: blue;
    }
    ...
    and so on.

    It's not a single body CSS property.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jkraw90 (12-09-2010)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Scotland
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It appears the site in question is setting the a:link, a:visted and a:active color properties all to the same colour. So therefore the code on their CSS looks like this.

    Code:
    a:link,
    a:visited,
    a:active{
      background: transparent;
      color: #7595EE;
      text-decoration: underline;
    }
    So from that, and your explanation Old Pedant, I figure my JS code should be something along the lines of this,

    Code:
    document.style.alinkColor = 'COLOR';
    document.style.avistedColor = 'COLOR';
    document.style.aactiveColor = 'COLOR';
    I don't want to simply change all the A tags colours to the colour as I wanted to leave the A:hover attribute alone. However this code still does not seem to work. I've done some more research but everything seems to be about using it to change when MouseOver or such, which doesn't seem to be helping me.

    I think my problem is either still in naming the attribute/tag or possibly in the calling of the style sheet to edit.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,111
    Thanks
    75
    Thanked 4,334 Times in 4,300 Posts
    No, one more time: THERE IS NO SUCH THING as alinkColor, et al.

    The only reason the document.body.backgroundColor works is because there *IS* a property of that name for the body element *AND* because there is indeed only one document.body for each page!
    Code:
    <style>
    body { background-color: black; }
    </style>
    You can't just make up your own names and hope that they will work!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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