First of you'l probably want to change colors in your css so this site will come in handy.
http://www.colorschemer.com/online.htm
Now lets start with the background for the page which is what the Body is.
Step 1:
This first thing is just to change the Background of the whole page.So we can do this as:
BODY {
background: #000000 url(http://files.byondhome.com/Timmy/1271110552925.jpg)
no-repeat;
background-position:center ;
background-attachment:fixed;}
1.This changes the page's backgrounds and gives it an image.
2.No-repeat simply means the image wont replicate if it's a small image.
3.Background-position dictates where about the image will display on the page.
4.Background-attachment:fixed dictates that the image won't move when you scroll up and down.
Step 2:
Then you may wish to alter the boxes on your page..box, .big_box, .post, .comment{
background: #bebebe;
border: 4px solid #696969;
color: #000;}
1.This changes the box background like previously.
2.Gives your box's a border which is 4 (px) thick.
3.Lastly changes the color of the writing!
Step 3:
Ok so now you have changed your background and your boxes and the color of your writing, simples!Now this is one of my favorite things to do, Which is remove the title and replace it with a fancy looking title.
#website_page_header {
background: url(http://www.byond.com/members/Timmy/files/head.png)
no-repeat;
center top;
height: 300px;
margin-top: -60px;}
1.So like the page background you set the background color and select an image to use for this which does not repeat.
2.Center-top dictates it's location on the page.
3.height is required to give enough room for the image to display in, otherwise the image may not fully display.
4.Margin-top set's how man Px's the image displays from the top of the page.
Now you will be left with an image and your title overlapping at the top of the page!
you will need this Bellow to remove the original text title.
#page_header .title,.page_header .title {
visibility: hidden;}
1.Visibility:hidden does exactly what it says on the tin.
With altering the position of the page header you have created you would have messed up the positioning of the subtitle and also the box's themselves.
#page_header .subtitle, .page_header .subtitle {
margin-top: 120px;
color: #FFF;}
.boxes,.center, #center {
margin-top: 180px;}
1.These two now need the margin-top's px altered so that you eventually get it all to line up.
Step 4:
A quick run down of useful Css knowledge.background:#000 url();
color:#000;
border: 4px solid #696969;
margin-top:
height: 100px;
opacity:0.1;
opacity:1.0;
Different types of borders:
dashed
dotted
double
ridge
solid
Step 5:
Now this should resemble a decent Css hopefully even though it's simple!IT should look like this:
BODY {
background: #000000 url(http://files.byondhome.com/Timmy/1271110552925.jpg)
no-repeat;
background-position:center ;
background-attachment:fixed;}
.box, .big_box, .post, .comment{
background: #bebebe;
border: 4px solid #696969;
color: #000;}
#website_page_header {
background: url(http://www.byond.com/members/Timmy/files/head.png)
no-repeat;
center top;
height: 300px;
margin-top: -60px;}
#page_header .title,.page_header .title {
visibility: hidden;}
#page_header .subtitle, .page_header .subtitle {
margin-top: 120px;
color: #FFF;}
.boxes,.center, #center {
margin-top: 180px;}
________________________________________________
And finally: if you want me to make you a Css please give me brief example such as :
Page header title : ?
Color theme: ?
Background:?
Hover affect:?
I'm not great and i do suck with anything Gfx.
