Changing Default Link Color

• 

  omaradnan2 · Member · Jul 16, 2013 at 11:49 am

  • Copy link
  • Add topic to favorites

  Hi there…

  I would like to change the default text color to blue and underlined .. this doesn’t happen in a post normally so i keep changing it to blue manually every time .. I googled and found the following code

  .entry a:link,
  .entry a:visited {
  color: #AC0604;
  background-color: transparent;
  }
  .entry a:hover {
  color:#455236;
  background-color: transparent;
  text-decoration: none;
  }

  I inserted it to my CCS and then tried to make it work but it didn’t .. any help?

  my blog: http://www.cfatutor.me

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

• 

  ljkjklqljkhwhljkfqjhklfqjlkqjlh · Member · Jul 16, 2013 at 1:08 pm

  • Copy link

  That’s because that CSS doesn’t target the specific HTML elements in the theme you are using. Each theme is different and requires different CSS, so just grabbing something off of Google doesn’t work. Try the following

  #wrap a,
  #wrap a:visited {
      color: #AC0604;
  }
  #wrap a:hover {
      color:#455236;
      text-decoration: none;
  }

  I’d suggest taking a look at the CSS Basics Support article to learn a little more about how CSS works:

  http://en.support.wordpress.com/custom-design/css-basics/

• 

  ljkjklqljkhwhljkfqjhklfqjlkqjlh · Member · Jul 16, 2013 at 1:09 pm

  • Copy link

  Just realized your theme sets links to not be underlined by default, so you’ll need to override that, too:

  #wrap a,
  #wrap a:visited {
      color: #AC0604;
      text-decoration: underline;
  }
  #wrap a:hover {
      color:#455236;
      text-decoration: none;
  }

• 

  omaradnan2 · Member · Jul 17, 2013 at 1:05 am

  • Copy link

  Thanks a lot

• 

  omaradnan2 · Member · Jul 17, 2013 at 1:07 am

  • Copy link

  I just tried it – the problem is that it changed the colors and underlying in the menu buttons too – I only want a code that changes the links in blog posts if possible

• 

  omaradnan2 · Member · Jul 19, 2013 at 12:02 am

  • Copy link

  up for solution please

• 

  ljkjklqljkhwhljkfqjhklfqjlkqjlh · Member · Jul 19, 2013 at 12:04 am

  • Copy link

  Try this instead:

  .entry-content a,
  .entry-content a:visited {
      color: #AC0604;
      text-decoration: underline;
  }
  .entry-content a:hover {
      color:#455236;
      text-decoration: none;
  }

• 

  omaradnan2 · Member · Jul 20, 2013 at 3:52 am

  • Copy link

  it didnt work out – similar to the one i originally posted

• 

  fabianapsimoes · Member · Jul 20, 2013 at 6:31 pm

  • Copy link

  This might do it, once you remove the styles you inserted manually:

  #wrap .entry-summary a,
  #wrap .entry-summary a:visited,
  #wrap .entry-content a,
  #wrap .entry-content a:visited  {
      color: blue;
      text-decoration: underline;
  }
  #wrap .entry-summary a:hover,
  #wrap .entry-content a:hover {
      color: blue;
      text-decoration: none;
  }

  Feel free to adjust the values for “color” and “text-decoration” as you wish.

  You need to remove the styles you inserted manually because they become inline styles in your posts’ HTML. Inline styles always have priority in the styling of a page. So, if you don’t remove them, they will have priority over the CSS code above.

  That code will style links in individual post pages, and also in the “Posts” page. That’s why we target both entry-summary (used in the “Posts” page) and entry-content (used in the individual post pages).

  In addition, the CSS you were trying to use didn’t work because “.entry-content a” is not as specific as other CSS rules in your theme’s stylesheet that were also targeting the links. In CSS, more specific rules get priority over less specific ones. That’s why you need rules that are at least as specific as the rules that are already being applied. To check the rules that are already applied to an element in your page, right click on that element and select the “Inspect Element” option. On the right of the panel that will appear, check the CSS rules being applied to the element you clicked.

  If you are interested in CSS specificity, check this article for a fun read: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

  I hope this solves your problem :)

• 

  omaradnan2 · Member · Jul 21, 2013 at 1:17 pm

  • Copy link

  Worked perfectly! Thanks a lot

  will read the article today :D

• 

  fabianapsimoes · Member · Jul 21, 2013 at 1:30 pm

  • Copy link

  Hooray! Glad it worked :)