Grow your CSS skills. Land your dream job.

why can’t i change the link color in my twitter feed

  • # January 14, 2009 at 4:04 pm

    i just posted up my new portfolio site. But i have 2 problems in IE for some reason the content boxes have an extra bit at the bottom and i have no idea why i can’t change the color of the hyperlinks in my twitter feed which is starting to really annoy me can anyone help?

    # January 14, 2009 at 4:18 pm

    post a link to your site, or you code, or we wont be able to help

    # January 15, 2009 at 6:04 am

    ermm sorry about that thought i actually put the site up. well anyway the site is http://www.stray-designs.com

    # January 15, 2009 at 11:51 am
    "stray" wrote:
    i just posted up my new portfolio site. But i have 2 problems in IE for some reason the content boxes have an extra bit at the bottom and i have no idea why i can’t change the color of the hyperlinks in my twitter feed which is starting to really annoy me can anyone help?

    Looking at the page given, you have one link in the sidebar ("1 day ago"), and it has the colour black for everything as you have stated all links to be black

    I think you have styled it.

    for the IE thing, you have margin for higher level blocks but not for lower level blocks, try making the block that has that image have margin: 0px auto 0px auto or all 0px whatever, but make the top and bottom 0px

    # January 15, 2009 at 12:35 pm

    In line 15 of your css file, you have styled all of your links like this:

    a:link {
    color:#000000;
    font-weight:bold;
    text-decoration:none; }

    If you want to style just the twitter links, add "#twitter_update_list" before the "a:link" like this (I’d suggest making a new line in your CSS for this, rather than replacing the existing line. Make sure it is after the "a:link" line.)

    #twitter_update_list a:link {}

    Remember links have five states: a:link, a:visited, a:hover, a:active, and a:focus

    # January 15, 2009 at 6:45 pm

    k well i tried the ie fix that was suggeted and it didn’t do anything and i haven’t got a clue how to fix it been looking for a few days and can’t see the problem.

    now for changing the link color of the twitter feed, i should put

    in the css file, after the a:link stuff i had near the top
    #twitter_update_list a:link {
    color:#000000; <<<<i want to change the link on the twitter feed to black and leave the normal nav white
    font-weight:bold;
    text-decoration:none;
    }
    not sure if thats right

    and in the html i should
    have another div of
    <div id="twitter_update_list a:link" </div> <<<<< should this surround all the other twitter divs and the java code?

    thanks for the help already guys i’m just out of ideas by myself here

    # January 15, 2009 at 6:53 pm
    "stray" wrote:
    k well i tried the ie fix that was suggeted and it didn’t do anything and i haven’t got a clue how to fix it been looking for a few days and can’t see the problem.

    now for changing the link color of the twitter feed, i should put

    in the css file, after the a:link stuff i had near the top
    #twitter_update_list a:link {
    color:#000000; <<<<i want to change the link on the twitter feed to black and leave the normal nav white
    font-weight:bold;
    text-decoration:none;
    }
    not sure if thats right

    Correct. Just update the color to whatever color you want. Be aware that there are other states for the links other than :link (visited/hover/active/focus) which you may need to set as well. For example, to apply styling to visited links, you would use:

    #twitter_update_list a:visited {}

    "stray" wrote:
    and in the html i should
    have another div of
    <div id="twitter_update_list a:link" </div> <<<<< should this surround all the other twitter divs and the java code?

    No need to do that. All the above CSS code does is select all a:links within the div "twitter_update_list" and apply the correct styling. Adding the CSS is all you need to do.

    # January 16, 2009 at 6:54 pm

    this is getting really annoying now i’ve tried what you suggested and its not working heres the code of the twitter i put in my css

    this is the styling for all links

    Code:
    a:link {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #FFFFFF;
    }
    a:visited {
    text-decoration: none;
    font-weight: bold;
    background-color: none:;
    color: #FFFFFF;
    }
    a:hover {
    text-decoration: none;
    font-weight: bold;
    background-color: none:
    color: #FFFFFF;
    }
    a:active {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #FFFFFF;
    }
    a:focus {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #FFFFFF;
    }

    and this is the code that i put further down my css file

    Code:
    #twitter_update_list a:link {

    a:link {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }
    a:visited {
    text-decoration: none;
    font-weight: bold;
    background-color: none:;
    color: #000000;
    }
    a:hover {
    text-decoration: none;
    font-weight: bold;
    background-color: none:
    color: #000000;
    }
    a:active {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }
    a:focus {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }
    }

    i must be blind or something i can’t find the problem

    # January 16, 2009 at 9:58 pm
    Quote:
    #twitter_update_list a:link {

    a:link {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }
    a:visited {
    text-decoration: none;
    font-weight: bold;
    background-color: none:;
    color: #000000;
    }
    a:hover {
    text-decoration: none;
    font-weight: bold;
    background-color: none:
    color: #000000;
    }
    a:active {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }
    a:focus {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }
    }

    You can’t nest CSS like this. Try this instead:

    Code:
    #twitter_update_list a:link {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }
    #twitter_update_list a:visited {
    text-decoration: none;
    font-weight: bold;
    background-color: none:;
    color: #000000;
    }
    #twitter_update_list a:hover {
    text-decoration: none;
    font-weight: bold;
    background-color: none:
    color: #000000;
    }
    #twitter_update_list a:active {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }
    #twitter_update_list a:focus {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }
    # January 16, 2009 at 10:00 pm

    I should also mention, if you are using the same styles for several elements, you can combine it like this:

    #twitter_update_list a:link, #twitter_update_list a:visited, #twitter_update_list a:hover, #twitter_update_list a:active, #twitter_update_list a:focus {
    text-decoration: none;
    font-weight: bold;
    background-color: none;
    color: #000000;
    }

    To be clear:

    a:link styles a regular link
    a:visited styles links that the user has already clicked on
    a:hover styles links that the users is hovering over
    a:active styles links in the moment when the user clicks on it
    a:focus styles links when the link has focus (when the user tabs over to it using the keyboard)

    # January 17, 2009 at 5:18 am

    thanks very much mate and for the little lesson :)

    k i’ve been trying to get the ie error fixed by changing the padding and it doesn’t work. in ie the background for the text repeats past the bottom image of the div and i have no idea how to fix it. in FF it looks perfect but in IE i have no idea what could be causing it

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".