Grow your CSS skills. Land your dream job.

[Solved] Link Colors

  • # April 15, 2010 at 8:43 am

    Hi There!

    Would someone be kind enough to help me please? I’m still very new to css

    I’m modifying a joomla template

    Link color is controled my this code below in the template

    Quote:
    a {
    color: white;
    text-decoration: none;
    }

    a:visited {
    color: white;
    }

    a:hover {
    text-decoration: none;
    }

    The problem I am having is when, I made a new id for the menu

    I can change size and the font but, the colour of links stay the same

    Quote:
    #menu {
    background-image: url(../images/nav_bg.png);
    background-repeat: repeat-x;
    margin-left:10px;
    margin-right:10px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-variant: normal;
    font-style: normal;
    text-decoration: none;
    }

    Many Thank for your help and Kind Regards

    Charles

    # April 15, 2010 at 1:27 pm

    Hi Charles,

    You have white set to all of your font colour. What are you trying to accomplish?

    # April 16, 2010 at 10:11 am

    Hi

    Thank you for your help. Sorry the

    Quote:
    a:visited {
    color: white;
    }

    should of been

    Quote:
    a:visited {
    color: blue;
    }

    I’ve attached the file I am working to this post

    I am trying to make the main menu links white and the menu link in the left and right module position blue.

    I’ve deleted the old template.css and made this new one below

    Quote:
    body {
    color:#000000;
    border: 1px 1 #000000;

    }

    #header {
    background-image: url(../images/header_bg.png);
    background-repeat: repeat-x;
    color:#FFFFFF;
    height:94px;

    }

    #menu {
    background-image: url(../images/nav_bg.png);
    background-repeat: repeat-x;
    color:#FFFFFF;

    }

    #footer {

    background-image:url(../images/footer_bg.png)

    }

    but links are still the default color in the menu position. do you know how I change thier color to white please?

    Many Thank for your help and time

    Kind Regards

    Charles

    # April 16, 2010 at 12:53 pm

    Correct me if I’m wrong but I believe you have to list

    a:hover {
    }

    before

    a:visited {

    }

    # April 16, 2010 at 1:14 pm

    :link, :visited, :hover, :active = LoVe, HAte

    http://css-tricks.com/snippets/css/link-pseudo-classes-in-order/

    # April 17, 2010 at 10:25 am

    Thank you for your great help, I finally worked it out.

    I found a list of nav css menu types here

    http://css.maxdesign.com.au/listamatic/

    I did it like this is in the end

    Quote:
    ul#navlist
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    }

    #navlist a { padding: 3px 10px; }

    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    background-color: #036;
    text-decoration: none;
    }

    #navlist a:hover
    {
    color: #fff;
    background-color: #369;
    text-decoration: none;
    }

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

You must be logged in to reply to this topic.

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