Changing Colors of Banners – Spectrum Theme

• 

  krissy1225 · Member · Mar 15, 2012 at 4:01 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I am trying to change the color of the dark grey banner which holds the title and date of my post. This was a setting I selected when I chose the theme Spectrum. Can someone please help me adjust this color; whenever I try to I remove the left and right edges.

  Thank you!

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

• 

  designsimply · Member · Mar 23, 2012 at 5:31 pm

  • Copy link

  Sure! Here’s the CSS used by the Spectrum theme to set the dark gray background color for post titles:

  http://s0.wp.com/wp-content/themes/pub/spectrum/colors/dark.css?m=1352663972g&minify=false

  You’ll notice there are three images used to complete the banner:

  1. http://s0.wp.com/wp-content/themes/pub/spectrum/colors/dark/main-title.png
  2. http://s0.wp.com/wp-content/themes/pub/spectrum/colors/dark/main-title-back.png
  3. http://s0.wp.com/wp-content/themes/pub/spectrum/colors/dark/main-title-edge.gif

  You can upload similar images with the colors changed out and then duplicate the CSS in the link above and change out all the color and url() references, or you can dump the images and just update the main post title background color and bottom border with color changes only.

  Here is an example of removing the images and using colors instead:

  .main-title {
  background: LightSkyBlue !important;
  border-bottom: 1px solid SteelBlue !important;
  }
  
  .main-title .left-fold {
  	background: none !important;
  }
  
  .main-title .edge {
  	background: none !important;
  }

  I like this a little better, it keeps the left fold image but removes the one on the right:

  .main-title {
  background: LightSkyBlue !important;
  border-bottom: 1px solid SteelBlue !important;
  }
  
  .main-title .edge {
  	background: none !important;
  }

  Adjust the colors as necessary: http://en.wikipedia.org/wiki/Web_colors