Modifying some colors…

• 

  kimberleyluuyoga · Member · Jan 11, 2012 at 8:13 pm

  • Copy link
  • Add topic to favorites

  There are some colors I’d like to edit for my blog…

  – Color scheme of comment box and comments
  – Color scheme of scroll bar
  – Color of titles of articles when at its direct link
  – The current grey words: “posted in”, “posted on” “theme: twenty eleven…”, colors of links to pages when mouse is hovering over it
  – Color scheme of search bar

  Is it possible to customize all of these colors? Thanks!!

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

• 

  designsimply · Member · Jan 11, 2012 at 8:20 pm

  • Copy link

  Yes, all those things are customizable. I think the best way to start would be to take a careful look at the original stylesheet for your theme, pull out the relevant color details in the sections you want to change, and create new CSS based on it. For example, open the following page and scroll down to the =Comments section:

  https://s-ssl.wordpress.com/wp-content/themes/pub/twentyeleven/style.css?m=1326288983g&minify=false

  See how many different color settings there are in that block? We can help you pull out the relevant details, but it would be nice to start small and with some more specific examples. Such as, what colors did you want to change for comments? Just the text color? Background colors? Everything about them?

• 

  designsimply · Member · Jan 11, 2012 at 8:30 pm

  • Copy link

  Some of the other items you listed out are easier. Like article title links. Here’s an example:

  .entry-title, .entry-title a {
    color: #281718;
  }
  .entry-title a:hover, .entry-title a:focus, .entry-title a:active {
    color: #DBBB8D;
  }

• 

  designsimply · Member · Jan 11, 2012 at 8:37 pm

  • Copy link

  – The current grey words: “posted in”, “posted on”

  .sep {
  color: red;
  }

  “theme: twenty eleven…”

  #site-generator, #site-generator a {
  color: red;
  }

  colors of links to pages when mouse is hovering over it

  header#branding nav a:hover {
  color: red;
  }

• 

  designsimply · Member · Jan 11, 2012 at 8:41 pm

  • Copy link

  – Color scheme of search bar

  #branding .only-search #s {
  	background-color: #666;
  	border-color: #000;
  	color: #222;
  }
  #branding .only-search #s:focus {
  	background-color: #bbb;
  }

  Change out the color values as necessary.

• 

  designsimply · Member · Jan 11, 2012 at 8:46 pm

  • Copy link

  – Color scheme of scroll bar

  Based on a quick search, browsers don’t really offer support for changing scrollbar colors, but IE 5.5 used to and Webkit has some experimental pseudo tags for it, but those won’t work in WordPress.com.