CSS

• 

  flisadamp · Member · Oct 8, 2013 at 7:20 pm

  • Copy link
  • Add topic to favorites

  How do you change the color of the links in the Confit theme?

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

• 

  thesacredpath · Member · Oct 9, 2013 at 2:24 am

  • Copy link

  Hi, link colors are set in a number of places.

  If you are talking about links within the post and page content area, this is the code you will need for the main color and the hover color:

  a {
  color: #CC0000;
  }
  
  a:hover, a:active, a:focus {
  color: #8800dd;
  }

  The following will change the menu links (normal, hover and current page – second rule is hover and current page menu item)

  .main-navigation a {
  color: #36312D;
  }
  
  .main-navigation a:hover, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a {
  color: #E94F1D;
  }

  This would change the post titles, normal and hover.

  .entry-title a {
  color: #E94F1D;
  }
  
  .entry-title a:hover {
  color: #85AA0C;
  }

  Twitter links.

  .customisable, .customisable:link, .customisable:visited, .customisable:hover, .customisable:focus, .customisable:active, .customisable-highlight:hover, .customisable-highlight:focus, a:hover .customisable-highlight, a:focus .customisable-highlight {
      color: #F96E5B;
  }

• 

  agendanewyork · Member · Nov 13, 2013 at 7:11 pm

  • Copy link

  Hi,

  im trying to highlight my website header with yellow, meaning i want it to look like its been highlighted with a highlighter (not hover color change). this is the website: http://agendanewyork.com/ what css code will do? theme is chunk

  thanks

• 

  timethief · Member · Nov 13, 2013 at 7:18 pm

  • Copy link

  @agendanewyork
  All CSS editing is theme specific editing. You are not using Confit on the blog linked to your username you are using Chunk. Click this link to start you own thread please > https://en.forums.wordpress.com/forum/css-customization#postform

• 

  thesacredpath · Member · Nov 14, 2013 at 4:35 am

  • Copy link

  Hi agendanewyork, I would suggest creating an image of your site title and using the image editing program to make it look like as if it had been highlighted with a marker. The area of the existing site title is 800px x 120px, so create the image in that size (it could be made larger though if needed and then we could adjust the size of the site-title div I would suggest sticking with the 800px width though. Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks in the CSS below with the URL of the image. The second rule below turns the existing site title text transparent, so your image will remain clickable as a link back to your home page. Paste the following into your custom CSS.

  #site-title {
      background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  }
  
  #site-title a, #site-title a:hover {
      color: rgba(0, 0, 0, 0);
      display: block;
  }