Visited Link Color

12 posts from 2 voices

• Started 2 years ago by batesy
• Latest reply from batesy
• This topic is resolved

Tags:

• link color
• visited link

1. 

   batesy
   Member

   Sorry guys, I'm going to ask a dumb question:

   How do I change visited link color?

   I'm assuming in style3.css the hex code 2A313B is it ... but I don't know which section needs changing.

   Cheers

   Posted 2 years ago #
2. 

   James Morrison
   Former Team Member

   Hey!

   The link colour is #818EA1, you can modify this by changing the value on line 6 of css/style3.css:

   a {
   color:#818EA1;
   }

   Best regards,
   James

   Posted 2 years ago #
3. 

   batesy
   Member

   Good man, James.

   Sorry to ask such idiotic questions. I really need to actually learn something about css one day.

   Now if you guys can just run some video tutorials I'll sign-up ASAP.

   Maybe Kriesi's Koding Kamp ... with guest tutors Mr Morrison and The Dude! :)

   Cheers again, mate.

   Posted 2 years ago #
4. 

   batesy
   Member

   Ha...!!!

   I tried that before I posted the first question ... although I did have about 4 styles open from three different themes... mmm, need to get some organisation happening.

   Talk about being a friggin muppet!

   Posted 2 years ago #
5. 

   batesy
   Member

   Okay, now I'm stumped.

   It doesn't work!!

   Is there a reset somewhere perhaps? I'm a bit confused why this doesn't work.

   Footer change is fine on line 18 when I change it like so:

   }

   .footer a, #top .footer a:hover{
   color:#FFBB00;
   }

   Posted 2 years ago #
6. 

   James Morrison
   Former Team Member

   I like the idea of Tutorials, once I get a clearer idea of which areas people are most in need of help with I'll work out which ones to make. I think 1st on the list is installing / using FireBug to make modifications to themes / 2nd is setting up and customising a theme by using a child theme.

   As a user, what would you want tutorials on (theme / WordPress specific)?

   The code to change the footer link colour is on line 458 of style3.css and looks like this:

   .footer .widget_recent_entries a, .footer .widget_categories a, .footer .widget_pages a, .footer .widget_meta a, .footer .widget_archive a, .footer .widget_nav_menu a, .footer .widget_links a {
   background:url("../images/skin3/bullet.png") no-repeat scroll 1px 11px transparent;
   border-bottom-color:#AAAAAA;
   color:#666666;
   text-decoration:none;
   }

   Just change the colour here to make the change.

   color:#FFBB00;

   Let me know how you get on.

   Posted 2 years ago #
7. 

   batesy
   Member

   Thanks, James.

   I'm fine with the footer link.

   It still the page content link colour I'm having issues with.

   It simply ignores whatever hex code I place into the code beginning on line 6.

   As for the tuts ... wow, where to begin?!

   I think most people probably need a basic understanding of css simply because the easiest way for the average punter to customise their WP site is by altering css.

   Cheers

   Posted 2 years ago #
8. 

   James Morrison
   Former Team Member

   Hey!

   Ok, try adding this to your CSS file:

   a:visited {
   color:#818EA1;
   }

   Change the colour to whatever you need.

   The tutorials will be done when I get a chance, no promises on when though...

   Best regards,
   James

   Posted 2 years ago #
9. 

   batesy
   Member

   Cheers, James. I'll give it a whirl.

   Posted 2 years ago #
10. 

    batesy
    Member

    Arrrhhhhhh!!!

    What the hell...?!! :)

    I have no idea what I'm doing wrong here - now I've got a visited link colour working fine but... the active link color isn't ... nor the hover.

    This is what my CSS looks like:

    /*important to change the whole color scheme*/
body, .dropcap2, .dropcap3, .dynamicBg, .button, #top .pagination a:hover{
background:#fff;
}

    a{
    color:#FFA200;
    }

    a:visited {
    color:#FFA200;
    }

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

    /*if you have choosen a dark color above fonts below need to be light and vice versa*/
    .footer, #top .footer a:hover, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .dropcap2, .dropcap3, .wrapper_heading h2, .button, #js_sort_items span, #top .pagination a:hover{
    color:#666;

    }

    .footer a, #top .footer a:hover{
color:#FFA200;
}


    I'm defaulting to a #AAAAAA or a #666666 or something like that.

    This isn't an issue on style1 or 2 but it kinda gets lost in the bg on style3.

    I replaced it with the code from Christian's demo style3 and I still have a grayish colour as hover.

    I'm really sorry to hassle you James but I've not had this problem before so am a little stumped.

    Here's a screen shot of what I'm talking about:

    http://img267.yfrog.com/gal.php?g=9b6.jpg

    Posted 2 years ago #
11. 

    James Morrison
    Former Team Member

    Hey,

    If you add the new a styles to the CSS file before the original styles, they are overridden. There are 2 ways to get around this problem:

    1.) Add the styles at the very end of the style3.css stylesheet - this will then override existing styles.
    2.) Use the !important tag with the style. For example:

    a, a:hover, a:visited { color: #FFA200 !important; }
    a:hover{ text-decoration:underline; }

    This defines this CSS style as the most important and overrides the existing styles regardless of where they are in the CSS stylesheet. The only exception to this is when an existing style also uses the !important tag so best practise is to add the styles at the very end of the style3.css file.

    BTW, check out this topic to add your requests: http://www.kriesi.at/support/topic/video-tutorials

    Cheers,
    James

    Posted 2 years ago #
12. 

    batesy
    Member

    Thanks James,

    That did the trick.

    Much appreciated.

    Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.