I’ve spent quite a lot of time customizing MistyLook Theme for myself and have to admit the greatest difficulty I had with links.
It’s because theme construction defines only three types of links (here with pieces of style.css ‘responsible’ for them):

  • links in top navigation tabs (#navigation ul li a; #navigation ul li a:hover, #navigation ul li a:active, #navigation ul li.current_page_item a)
  • links in the other ‘parts’ of theme (a:link, a:visited; a:hover, a:active)
  • links within posts content (#content .entry a:link, #content .entry a:visited; #content .entry a:hover, #content .entry a:active)

It’s very popular to use so called pseudo-classes to display links such as:

  • a:link /* unvisited link */
  • a:visited /* visited link */
  • a:hover /* mouse over link */
  • a:active /* selected link */

This way different effects can be achieved depending on link status.
NOTE! To work the right way a:hover MUST come after a:link and a:visited in CSS definition while a:active MUST come after a:hover.

I’m mentioning it because first time I was ‘playing’ with MistyLook links I almost got mad trying to figure out why only some links have changed color instead of all (yeah… on some of them I’ve already clicked so they changed their status :doh_tb: ).

OK. Let’s start with MistyLook HEADER.
top navigation
(click on image to zoom it out)

  1. color of link in tab for current/active page; just change color value under
    #navigation ul li a:hover, #navigation ul li a:active, #navigation ul li.current_page_item a
  2. color of link in other tabs; change color value under #navigation ul li a
  3. color of text in SEARCH button (it’s not really link ;) ; change color value under #navigation ul li.search input#searchsubmit
  4. blog title; add color: #xxx; within #header h1 a
  5. color of links for Posts and Comments feeds; add to style.css
    #feedarea dl dd a:link, #feedarea dl dd a:visited {
    color: #xxx;
    }

(You can add also some extra values for a:hover and a:active)

Next goes SIDEBAR
You can change here either color of all links or links under blogroll only.
For all links in sidebar add to style.css:
#sidebar li a:link, #sidebar li a:visited {
color: #xxx;
}
For links within blogroll add to style.css:
li#sidelinks ul a:link {
color: #xxx;
}

And now FOOTER
To change color of links in footer add to style.css:
#footer {
color: #xxx;
}

Now only POST itself left (in index and single view). But you have to wait for my next entry :wink_tb: