chnge colors

• 

  nintendopolis · Member · Nov 27, 2011 at 12:05 am

  • Copy link
  • Add topic to favorites

  hi i was wondering how can i change the color of the widget bars with CSS. My theme is mystique

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

• 

  thesacredpath · Member · Nov 27, 2011 at 1:23 am

  • Copy link

  You would have to create your own PNG image the exact dimensions of the original, upload it to your media library, get the URL of that image and insert it into the CSS replacing the original image relative URL.

  Original image:
  http://s2.wp.com/wp-content/themes/pub/mystique/colors/images/green/widget-title-green-large.png

  Then add this to the CSS and replace where it says URL OF IMAGE between the double quote marks with the URL of your uploaded replacement image.

  .widget-title, .widget-title span {
  background-image: url("URL OF IMAGE");
  }

• 

  nintendopolis · Member · Nov 27, 2011 at 1:37 am

  • Copy link

  thank you for your help

• 

  thesacredpath · Member · Nov 27, 2011 at 1:42 am

  • Copy link

  You are welcome.

• 

  nintendopolis · Member · Nov 27, 2011 at 1:55 am

  • Copy link

  do you know if can change the menu bar too?

• 

  thesacredpath · Member · Nov 27, 2011 at 1:59 am

  • Copy link

  That is an image as well.

  

  Same procedure would be used.

  #access ul {
  background: url("URL OF IMAGE") repeat-x scroll center top transparent;
  }

• 

  nintendopolis · Member · Nov 27, 2011 at 2:20 am

  • Copy link

  wow thank you but i can’t see the link you posted

• 

  thesacredpath · Member · Nov 27, 2011 at 2:38 am

  • Copy link

  Heh, sorry, that is because it is only 1px wide. Open it in your image editor and then change the width of the image (not constraining proportions) to see what it looks like. Basically it is just a gradient from a lighter grey to a darker grey to give the navigation bar at top a sort of rounded 3D effect.

• 

  nintendopolis · Member · Nov 27, 2011 at 3:29 am

  • Copy link

  Oh and do i just paint the image to change the color?

• 

  thesacredpath · Member · Nov 27, 2011 at 3:39 am

  • Copy link

  You can, or if you are using a higher end image editing program like Photoshop, there is typically a color replacement feature where you can replace colors in an image.

  I’m not sure if some of the free programs out there such as Gimp offers that or not. Gimp has a lot of capability for a free program.

• 

  thesacredpath · Member · Nov 27, 2011 at 3:41 am

  • Copy link

  Painting is going to be a little difficult actually since it is going to be difficult to keep straight lines.

• 

  nintendopolis · Member · Nov 27, 2011 at 3:49 am

  • Copy link

  Ok. and where do you get to menu images? because i wanna edit the other bar, the one that goes in every post. And can i edit the shape of the image? thank you for your help

• 

  thesacredpath · Member · Nov 27, 2011 at 4:06 am

  • Copy link

  This part is a little different. The background for the post date and the posted by section are what is called an “image sprite” where multiple images are in a single file, which is the case with the post metadata images.

  Image:
  http://s2.wp.com/wp-content/themes/pub/mystique/images/info-bar.png

  .post-date {
  background: url("images/info-bar.png") no-repeat scroll left -75px transparent;
  }
  
  .post-info {
  background: url("images/info-bar.png") no-repeat scroll right top transparent;
  }