Is trying to recover from the lack of updates.

This is just a basic layout code to get you used to coding. Once you get the hang of it, make your own layout stylesheet and customize it your way :)

Coding A Layout

STEP 1: MAKING YOUR LAYOUT
Before coding a layout you have to make your own layout image in Photoshop or Paint Shop Pro. This is how a layout would usually look like. Once you are done with your layout, save it as: Layout. Now you need to crop a part of the column/tables from your picture, to where you will have this. Save it as: Layout Background.

STEP 2: BACKGROUND
Now we are going to work on your background. This part is pretty easy. :) Take this code:

Now where it says: HEX COLOR. That is where your going to put the hex color of the background from your layout image. So if my hex color was #ea9eff I will replace HEX COLOR with #ea9eff. So for the BACKGROUND URL part you need to upload the image "layout background" to tinypic, photobucket, your website, etc. and copy the direct link for layouts and take that code and replace BACKGROUND URL with the image link.

STEP 3: FONT STYLE
This code is for your font size, color, style, for your links, and link hovers :)

STEP 4: BOLD, UNERLINED, ITALIC, ETC
This code is for you to edit your bold, italic, underline, small, textarea, and big fonts.
Like this: bold, small, italic, underline, and big
You can edit the font size, color, etc. :)

STEP 5: HEADERS
You can customize your sidebar and content headers how ever you want, with this code:

STEP 5: CODING Here is the tricky part of the stylesheet. This is where you code your layout! This code will place your layout image, sidebar links, and your content. Where you want it :)

# HEADER- That is your layout image.
# SIDEBAR- Is where your links will go on the side.
# CONTENT- Is where your content will go and where you will be able to type about anything :)
TOP:____px-Where you can move it up or down. The closer to 0, it will move upwards.
LEFT:____px-Where you can move it from left to right. The closer to 0, the closer to the left.
WIDTH:____px-This is means the width of the area. It's kinda like a scroll box. How far your text/images can go until it starts a new line.

STEP 6: WHERE YOU TYPE
This code is where you add your content.

ENTIRE CODE:

td, p, body, a {
color : #000000;
font-family : tahoma;
font-size : 11px;
line-height :11px;
text-align : left;
} 
a:active, a:visited, a:link, a:hover {
font-size : 11px;
color : #000000;
font-family : tahoma;
font-weight : normal;
text-decoration : none;text-transform: none;
}
a:hover{font-family: tahoma; letter-spacing:px; font-size:11px; color: #ffffff; cursor:; font-size:11px;
text-align:; font-weight: normal; text-transform: none;}
a:link img { 
border : none;
}
small{
font-family: small fonts; 
text-transform: uppercase; 
font-size: 7px; 
line-height: 100%; 
font-weight: normal; 
letter-spacing: 0px; 
color:000;
}
big { 
color:#454545;
font-family: times!important; 
font-size: 17pt !important; 
line-height: 90% !important; 
font-weight: normal !important; 
text-decoration: none !important; 
text-transform: lowercase !important; 
letter-spacing: -2pt!important;  
font-style:bold!important;
}
b {
color : #555555;
} 
u {
color : #454545;
} 
i{font-family: georgia; font-size: 11px; color: #000000;}

.mascaralyts.com made this layout {display:none;visibility:hidden;}

textarea {
font-family:tahoma;
font-size: 10px; 
line-height: 8px; 
font-weight: normal; 
text-transform: ; 
text-align: left; 
color: 000000; 
width: 250px; 
height: 20px; 
background-color: ffffff; 
border: 1px dotted; 
border-color: 000000;
}
.SIDEBAR { 
font-family :FONT;
color : #COLOR;
background : #COLOR;
font-weight : normal;
font-size :24px;
line-height :8px;
text-align :right;
letter-spacing : 0px;
}
.CONTENT { 
font-family :FONT;
color : #COLOR;
background : #COLOR;
font-weight : normal;
font-size :24px;
line-height :8px;
text-align :right;
letter-spacing : 0px;
} 
#header {position:absolute; left:0px; top: 0px;}
#sidebar {position:absolute; top:300px; left:480px; width:200px;}
#content {position:absolute; top:300px; left:20px; width:550px;}

</style>

<div id="content">
<div class="content">Content Header Here</div>
This is where you put your content.
</div>

<div id="sidebar"> 
<div class="sidebar">Sidebar Header Here</div>
This is where you can put your links and stuff.
</div>

IMPORTANT!:
With this coding you would have to put this on every page by hand and that could take awhile. A faster way to do this is us the stylesheet and everything but set everything up to .php (IT'S WAYYY EASIER) If you don't know how to do that, check out our PHP Conversion tutorial here!:)

Here is a preview of when I used this code :) Back | Forward | Back to Top | Bookmark | Myspace| fishes
Copyright © Mascaralyts.com 2009-2010. All Rights Reserved.