Wu Wei theme: how to change orange links to pink

• 

  l3sl3yd · Member · Apr 4, 2012 at 1:04 pm

  • Copy link
  • Add topic to favorites

  Help. I’m a total newcomer to blogging and CSS… and trying to teach myself. The first thing I want to do is change the orange colour of the hover links to pink… I’ve tried cutting and pasting from the stylesheet then updating the number but nothing happens.

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Apr 5, 2012 at 8:02 am

  • Copy link

  Welcome!!

  To change all of the link colors in the Wu Wei theme to pink, try this:

  a:link,
  a:visited {
      color:DeepPink;
  }
  a:hover {
      color:HotPink;
  }
  
  .blog-name a:link,
  .blog-name a:visited {
      color:DeepPink;
  }
  
  .blog-name a:hover {
      color:HotPink;
  }
  
  h1 a:link,
  h1 a:visited {
      color:DeepPink;
  }
  
  h1 a:hover {
      color:HotPink;
  }
  
  #footer a:link,
  #footer a:visited {
      color:DeepPink;
  }
  
  #footer a:hover {
      color:HotPink;
  }
  
  .comment-bubble a:link,
  .comment-bubble a:visited {
      color:#959ea1;
  }
  
  .comment-bubble a:hover {
      color:HotPink;
  }
  
  .archive-byline a {
      color: DeepPink;
  }
  .archive-byline a:hover {
      color: #HotPink;
  }
  
  .menu-main a:hover,
  .menu-main li:hover > a {
      border-color: DeepPink;
  }

  Note that if you’re going to use the same colors for everything, you can combine a lot of the selectors like this:

  a:link,
  a:visited,
  .blog-name a:link,
  .blog-name a:visited,
  h1 a:link,
  h1 a:visited,
  #footer a:link,
  #footer a:visited,
  .archive-byline a {
      color:DeepPink;
  }
  
  a:hover,
  .blog-name a:hover,
  h1 a:hover,
  #footer a:hover,
  .comment-bubble a:hover,
  .archive-byline a:hover {
      color:HotPink;
  }
  
  .menu-main a:hover,
  .menu-main li:hover > a {
      border-color: DeepPink;
  }

  I picked the color names from here:
  http://en.wikipedia.org/wiki/Web_colors

  To find those selectors, I checked the original stylesheet for Wu Wei and pulled out anything I could find that mentioned “a:link”, “a:visited”, or “a:hover”. I also found a couple more selectors like the menu borders and the byline link colors by searching for the orange color code #ff8a00 too.
  https://s-ssl.wordpress.com/wp-content/themes/pub/wu-wei/style.css?m=1333393870g&minify=false

  You should also check out these tutorials as a starting out point:
  http://en.support.wordpress.com/css-basics/
  http://www.htmldog.com/guides/cssbeginner/