opacity of main content area background and text tweaks

[Clare Thwaites]

Hello, here is my test site :

http://stef.electroluxart.com/

There are 2 things I would like to change here about the main content area:

1. PLease tell me how to change the opacity of the background black content area, and it’s color?? Similar to changing the sidebar on this post :

Menu section fonts, post title rollover and nav box outline

But for the MAIN black area?? Thanks 🙂

2. Please tell me how I can change the red title background color, for example here :

http://stef.electroluxart.com/menus – the red color behind the word “menus”

3. Please can you also tell me how I can change the color of the font of the word menus, and the font itself and it’s size?

Just so I can have a play around with it??

If I made the font a LOT bigger, would I need to increase the size of the red/whatever color background too?? Or would that automatically increase as the text gets bigger??

Thank you SO MUCH!!

Best wishes, Clare 🙂

[Clare Thwaites]

Update : I figured out points 2 and 3 with the fontible plug in – that’s great except I’d like to try some other fonts, made another post about that 🙂

Please answer point 1 when you can, thanks a lot 🙂

[Bill Robbins]

Clare,

The only tricky thing about changing the background color of those areas is we had to use a semi-transparent image in order to achieve that effect with Internet Explorer 8 and under. The rest are made with a rgba color that’s generated by the browser, but IE–like so many other things–doesn’t play nicely.

Here’s how I would approach it.

1. Go to the theme options page and select the styling tab.
3. In the Custom CSS box paste this:

   
   header,
   aside.sidebar .widget,
   .page-content {
   	background: transparent;
   	background-color: rgba(251,207,72,0.2);
   }
   

4. Replace the 251,207,72 with the rgb color you’d like to use. The 0.2 is the amount opaque the color will be.
5. Update your settings.

Check your color and see if you like it. Once you have that color fixed, then go to a graphic program and create a 10 by 10 pixel image. Create a layer that’s made using the color above with the percent transparent you’d like it to be. Then save it as header-background.png and upload it to the images folder inside the theme via FTP. The Internet Explorer stylesheet in the theme will pick that file up then and use it instead.

If you have trouble or questions, let me know,
Bill

[Clare Thwaites]

Hey Bill,

This is EXCELLENT thank you so much.

I’ve not yet done the image thing but will do once we pick the final color, thanks.

I changed the side bar menu to the same, so I now have this in my custom styling box:

/* Change background main area body color and opacity */

header,
aside.sidebar .widget,
.page-content {
background: transparent;
background-color: rgba(255,255,255,0.9);
}

/* Change nav bar background color and opacity */

aside.sidebar nav a,
aside.sidebar nav a:visited,
aside.sidebar .widget,
header {
background-color: rgba(243,245,235,0.9);
}

and right now it looks like this : http://stef.electroluxart.com/

DO I need to change the background image for the sidebar too, so that it too workson internet explorer??

Or no??

Please let me know which file it is, if I need to change the color of it.

Thanks a lot!

Clare 🙂

[Bill Robbins]

The IE background file is inside the images folder. It’s called “header-background.png.” Just change it to match your colors in Photoshop and you should be good to go cross browser.

[Clare Thwaites]

Hey Bill,

Cool – what I mean is, does that ONE file cover the background for the main content area AND the sidebar – as I have changed the colours of BOTH – will changing that ONE image, mean that both look OK in internet explorer??

Please let me know, thanks a lot 🙂

[Bill Robbins]

Clare,

Yes that file covers all the semi-transparent background areas in the theme. Change it and you should be good to go for IE 8 and under.

[Clare Thwaites]

Brilliant, thank you! 🙂

[Author]

Posts