WordPress.org

Support

Support » Themes and Templates » Changing link color on a theme

Changing link color on a theme

  • I have a theme and If I put a link or anchor test in it is the same color as the text until you mouse over it. The text is a gray then when you mouse over it it turns white. If you put anchor text in it just looks like text unless someone gets lucky and mouses on it.

    I tried to find the text color on the CSS sheet but couldn’t figure out which it was. I saw nothing on the page about links. I am not real up on css I tried to change a few things and it didn’t work so I changed it back. So does anyone know what I should be looking for.

Viewing 15 replies - 1 through 15 (of 19 total)
  • we cant help you without lookinjg at the site. provide a a link to your blog.

    Jan Dembowski
    Volunteer Mod. & Brute Squad

    @jdembowski

    Link helped, in your theme’s style.css (wp-content/themes/lake-reflection/style.css) starting at line 35

    a:hover{
    	text-decoration: underline;
    	color: #ffffff;
    }

    The color: #ffffff; is white, change it there to the color of your choice.

    Thanks jdembowski I’ll give it a try.

    Scott

    Hey man that didn’t work. I don’t really care about the mouseover color although this didn’t change that either. I want the word changed to blue like a link. This way they know they can click it.

    I tried to do this in the options when you write a post, didn’t work and I tried to change it in html mode and it didn’t work. So maybe someone has another idea. I am gonna go try playing around with it again.

    Scott

    If you just want the link color changed, go to the same area of code and instead of changing the…

    a:hover{
    	text-decoration: underline;
    	color: #ffffff;
    }

    instead change the

    a:link{
    	text-decoration: underline;
    	color: #00398A;
    }

    color. This would be a nice medium blue text.

    Or, to make it stand out, you can leave the text color as white (or whatever you want the link color to be) and add a background color for the link text. Like this …

    a:hover {
    font-weight : normal;
    background-color : #000066; color: #FFFFFF;
     }

    That would yield the same white text on a blue background when the mouse covers the text link.

    Something else you should know. The style sheet that theme uses is fairly simplistic so any changes you make to the link colour will affect ALL of the link colours site-wide. If you only want to change the colour of links in your posts you can add this to your style sheet,

    .entry a{color: XXX; text-decoration: XXX;}
    .entry a:hover{color: XXX; text-decoration: XXX;}

    Obviously replace the XXX with the proper declarations. You can do the same for links ANYWERE in the site.

    .sidebar a {BLAH BLAH;} will style links in the sidebar only.

    If you want to change the link colour of the post titles look for…

    .post h2{
    	padding: 15px 0 0;
    	font-weight: normal;
    	color: #5d5f61;
    	text-transform: uppercase;
    
    }

    …and add,

    .post h2 a{BLAH BLAH;]
    .post h2 a:hover{BLAH BLAH;}

    and so forth.

    .entry a{color: XXX; text-decoration: XXX;}
    .entry a:hover{color: XXX; text-decoration: XXX;}

    This looks like what I want, just change the link color in the posts but I am not sure where to add this

    thanks
    Scott

    You can insert it anywhere in the style sheet you want. For the sake of organization you can place it with the rest of the .entry bits.

    Should I delete the other a-hover text in the style sheet?, and would there be anything else I need to delete?

    Scott

    If you’re referring to the bit at the top of the style sheet I would leave that alone. All of the other links in your site inherit their properties from that declaration.

    OK I will be trying this now.

    Scott

    wolfe655,

    I was just checking on your progress. You have a couple of boo-boos in your style sheet.

    a{
    	text-decoration: none;
    	color: #595a5b;
    }
    
    a:link{
    	text-decoration: underline;
    	color: #000033;
    }

    You are giving links 2 different declarations.

    Further down the style sheet I see this,

    .entry a{color: 0033ff; text-decoration: 0033ff;}
    .entry a:hover{color: ffffff; text-decoration: ffffff;}

    The text-decoration property is not for colours. You can use something like text-decoration: underline; or text-decoration:none; etc

    More reading on what values can be used with that property.

    .entry a{color: 0033ff; text-decoration: 0033ff;}
    .entry a:hover{color: ffffff; text-decoration: ffffff;}

    This is what I put in as per your post above. Didn’t work. Maybe you guys aren’t understanding what I want to do.

    If I put anchor text in a post I want it blue instead of gray like the rest of the text. The links in sidebars are ok the way they are. I just want to change the link color in the posts.

    Scott

    Scott, re-read my post right above your last one. 🙂

    Edit: I’m playing with your theme as we speak on a local install. Here are 2 screen shots – the first one with a different link colour for posts and the second one with a different hover colour for posts.

    First | Second

    These are the declarations I used for the above screen shots…

    .entry a{color:#2255AA;text-decoration:none;}
    .entry a:hover{color:#CC0000;text-decoration:none;}
Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Changing link color on a theme’ is closed to new replies.