You are here Home » Forum root » Website Visual Customisation » View topic

Basic Theme Modifications - Part 3

Login

[ Join | More ]
 
Basic Theme Modifications - Part 3
Follow a simple method to modify the Body Style
Posted 02 November 2009, 9:29 AM
#2135 (In Topic #622)
jean
Avatar
Site director - Working for You!

jean in the usergroup ‘Administrators’

This tutorial will show how, with a few simple changes to the glogal.css file, the front page can be dramatically upgraded to suit your style.

I have also played with one of the features of CSS 3, in particular with the RGBA color which still has limited support, but is worth looking at to add a bit of funkiness to your site. RGBA lets you specify a color as being translucent (partially transparent).

Using Photoshop or some utilities on the Internet, it is easy to find RGB values for the original hexadecimal #e3e9f2 value used in this example. Here the values are Red 227, Green 233, Blue 242.

CSS 3 adds a new syntax, which allows alpha to be specified as well, such as rgba(227,233,242,0.5); this will set the alpha channel to 50% translucency. Note the "a" and "0.5" in the code.

At the time of writing, IE does not support RGBA (including IE8), Firefox 3 and newer does, Safari 3.2.1 and Chrome do. IE8, will ignore the alpha channel and give full transparency. So it is up to you to decide after experimentation if your background can work well for all browsers. I am sure a solution will be found in the near future.

Have fun and follow the numbers; it is easier than it looks!;)
Preview the result: Visit this Test Site

Code you'll need to Paste:

Code

.re_body, #htmlarea {
margin: 0;
padding: 0 !important;
font-size: 0.8em;
font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif;
}

.re_body {
color: #000000; /* {$,wizard, 20% seed + 80% !W/B} */
background-image: url('{$IMG,CB}');
width: 100%;
height: 100%;
position: relative;
margin: 0 auto 0 auto;
padding: 0 !important;
font-size: 0.8em;
font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif;
}
Middle Transparency code:

Code

.global_middle, .fake_middle_continuation {
background-color: transparent;
}
RGBA Code:

Code

.standardbox_classic {
background-color: rgba(227, 233, 242, 0.5);
/*background-color: #e3e9f2; {$,wizard, 100% sb_color } */
margin: 0;
}
Attachment

» Download: Manage-Body-Background.png (816 Kb, 131 downloads so far)
Back to the top
 
1 guests and 0 members have just viewed this: None
 
> Forum root » Website Visual Customisation
Copyright © planaruba.com 2012