WordPress.com

1. tobyelliottuk
   Member
   Jan 25, 2013, 4:58 PM

   Hi all,

   I am building a website in splendio theme. Currently at the top of the page there is a social media box in orange. How can I change the colour of this (to either light sky blue or light green)? [I can find an html colour if need be]

   Also, how do I change the colours of the boxes in the right sidebar?

   I have custom design enabled on the website.

   Many thanks,

   Toby

   The blog I need help with is electellie.wordpress.com.

2. rachelmcr
   Happiness Engineer
   Jan 26, 2013, 12:17 AM

   You will want to make these changes:

   #header-auxiliary {<br /> background: none;<br /> }

   (There is a background image in this theme that includes part of the orange background.)

   .syndicate {<br /> background: lightblue;<br /> }

   The sidebar boxes can be controlled with this code:

   .widget {<br /> background: lightblue;<br /> }

   The background of the title bar can be changed with this code:

   .widget-title {<br /> background: darkblue;<br /> }

   I hope that helps!

3. tobyelliottuk
   Member
   Jan 26, 2013, 11:22 AM

   Thanks expattranslator, people are very quick to help on this forum and it is much appreciated :-) The sidebar boxes look much better.

   However, the top 2 bits of code don't seem to do exactly what I'm after...

   #header-auxiliary {
   background: none;
   }

   removes the slight fading on the top two boxes (which I want to keep, I just wish to change the orange).

   .syndicate {
   background: lightblue;
   }

   didn't seem to do anything?!

   I was hoping to change the orange to green (#8cd600).

   Many thanks in advance for all help,

   Toby

4. rachelmcr
   Happiness Engineer
   Jan 26, 2013, 11:52 AM

   #header-auxiliary {
   background: none;
   }

   removes the slight fading on the top two boxes (which I want to keep, I just wish to change the orange).

   The problem is that the slight fading is an image, so you can't change the color of the orange fading using CSS. You can leave it as-is if it doesn't bother you or create a new image and replace the file if you'd like. This is the image: http://s0.wp.com/wp-content/themes/pub/splendio/images/header-right-bkg.png

   .syndicate {
   background: lightblue;
   }

   didn't seem to do anything?!

   Oops, I used the wrong selector. Try this:

   #header-auxiliary .syndicate {<br /> background: #8cd600;<br /> }

   This won't change the orange of the social media icons, though. Those are controlled by this code:

   #header-auxiliary .syndicate li a.facebook-link {<br /> background: url("images/syn-facebook-ico.png") no-repeat scroll left top transparent;<br /> }
#header-auxiliary .syndicate li a.twitter-link {<br /> background: url("images/syn-twitter-ico.png") no-repeat scroll left top transparent;<br /> }

Topic Closed

This topic has been closed to new replies.