WordPress.org

Ready to get started?Download WordPress

Forums

Changing link color on a theme (20 posts)

  1. wolfe655
    Member
    Posted 5 years ago #

    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.

  2. whooami
    Member
    Posted 5 years ago #

    we cant help you without lookinjg at the site. provide a a link to your blog.

  3. wolfe655
    Member
    Posted 5 years ago #

  4. 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.

  5. wolfe655
    Member
    Posted 5 years ago #

    Thanks jdembowski I'll give it a try.

    Scott

  6. wolfe655
    Member
    Posted 5 years ago #

    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

  7. Saurus
    Member
    Posted 5 years ago #

    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.

  8. Len
    Member
    Posted 5 years ago #

    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.

  9. wolfe655
    Member
    Posted 5 years ago #

    .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

  10. Len
    Member
    Posted 5 years ago #

    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.

  11. wolfe655
    Member
    Posted 5 years ago #

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

    Scott

  12. Len
    Member
    Posted 5 years ago #

    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.

  13. wolfe655
    Member
    Posted 5 years ago #

    OK I will be trying this now.

    Scott

  14. Len
    Member
    Posted 5 years ago #

    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.

  15. wolfe655
    Member
    Posted 5 years ago #

    .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

  16. Len
    Member
    Posted 5 years ago #

    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;}
  17. wolfe655
    Member
    Posted 5 years ago #

    OK I have re-uploaded a fresh style sheet from a backup on my HD so it is just the way I got it.
    a{
    text-decoration: none;
    color: #595a5b;
    }

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

    This is the way this code came with this theme. I was thinking one was the link color and the other was the mouse over link which changes to white. I think I tried changing the top one to "0033ff" which should change the text to a blue but it didn't work.

    Like I said I don't really know CSS. I have been learning PHP by playing around with it but I have never really checked out CSS so maybe I am missing something here that is probably really easy!

    Scott

  18. Len
    Member
    Posted 5 years ago #

    We were all new to the game at one time.

    Again, if you re-read my post what you have up above is incorrect. You are giving links 2 different styles --> a: and a:link

    The default style sheet for that them is,

    a{
    	text-decoration: none;
    	color: #595a5b;
    }
    
    a:hover{
    	text-decoration: underline;
    	color: #ffffff;
    }
  19. wolfe655
    Member
    Posted 5 years ago #

    OK I think I got it What I just said in my last post was right. The top one changed the link color for the whole theme to blue which is OK. The bottom will change the rollover color. That is white. I think I will change the link color to something more suitable to the theme.

    I made so many changes before I probably screwed something up. It seems to be working since I uploaded a fresh CSS Style Sheet.

    Thanks
    Scott

  20. Len
    Member
    Posted 5 years ago #

    If you want I uploaded a fresh copy of that theme's style sheet to my site. I changed the link post link colours and you can find them at the very bottom of the style sheet under /* EXTRA STYLES */

    You can use that as a starting point. The style sheet is here.

    Edit: Scratch the above. My permissions are too tight. You can get the style sheet from this pastebin I just uploaded it to.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.