Now you know what the outer boxes are, it's time to look at the inner elements. The basic breakdown is boxheading and boxbody. There is a boxbody in each
box, and a boxheader in every box except the one that holds the threads, domains and membership information. We'll talk about those boxes that are
different in another tutorial.
To see where the boxbody and boxheading items are, put this code into your stylesheet box.
That's pretty basic, isn't it. So lets talk about those elements that are different.
Most of the boxheadings are h2 elements. If you've been reading up on your css references, or know about about html, you'll know that this is the second largest heading. One of the boxheadings is an h1 - the username, and one is a p tag. For this reason, the boxheadings may not contain the same size text unless you define the font-size. You won't want them all to be large however, since the comments boxheading would probably overflow with text at the size of an h2 element.
Some of the boxheadings contain links, and these links need extra code to make them behave if you want them to look the same. Links will not follow the colour mode assigned to the class that holds them, so you need to define them separately. For example:
The second declaration defines any a tag that falls within a .boxheader element.
Ok, now we have our basics in place. Let's create a basic template before we go on to look at each box individually.
Paste that code into the stylesheet box - it's the third and largest box that you see when you click the edit html link in your edit profile page.
Have a look, then move onto the next level.
To see where the boxbody and boxheading items are, put this code into your stylesheet box.
.boxheading { border: 2px solid #000000; padding: 4px; }
.boxbody { border: 1px solid #cc0000; padding: 4px; }
.boxbody { border: 1px solid #cc0000; padding: 4px; }
That's pretty basic, isn't it. So lets talk about those elements that are different.
Most of the boxheadings are h2 elements. If you've been reading up on your css references, or know about about html, you'll know that this is the second largest heading. One of the boxheadings is an h1 - the username, and one is a p tag. For this reason, the boxheadings may not contain the same size text unless you define the font-size. You won't want them all to be large however, since the comments boxheading would probably overflow with text at the size of an h2 element.
Some of the boxheadings contain links, and these links need extra code to make them behave if you want them to look the same. Links will not follow the colour mode assigned to the class that holds them, so you need to define them separately. For example:
.boxheading { color: #CC0000; }
.boxheading a { color: #CC0000; }
.boxheading a { color: #CC0000; }
The second declaration defines any a tag that falls within a .boxheader element.
Ok, now we have our basics in place. Let's create a basic template before we go on to look at each box individually.
body { color: #333; }
a { color: #666; }
#wrapper {
width: 750px;
padding: 10px;
margin: auto;
background: #666;
border: 1px solid #000
}
.box {
border: 1px solid #000;
background: #eee;
padding: 5px;
}
.block {
margin-bottom: 10px;
}
.onionskin1 {
border: 2px solid #CC0000;
}
.onionskin2 {
border: 1px solid #000;
padding: 5px;
}
.onionskin3 { border: 1px solid #000; }
.boxheading {
border-bottom: 1px solid #000;
background: 666;
color: #CC0000;
padding: 5px 10px;
}
.boxheading a { color: #CC0000; }
.boxbody {
padding: 10px;
background: #ccc;
}
a { color: #666; }
#wrapper {
width: 750px;
padding: 10px;
margin: auto;
background: #666;
border: 1px solid #000
}
.box {
border: 1px solid #000;
background: #eee;
padding: 5px;
}
.block {
margin-bottom: 10px;
}
.onionskin1 {
border: 2px solid #CC0000;
}
.onionskin2 {
border: 1px solid #000;
padding: 5px;
}
.onionskin3 { border: 1px solid #000; }
.boxheading {
border-bottom: 1px solid #000;
background: 666;
color: #CC0000;
padding: 5px 10px;
}
.boxheading a { color: #CC0000; }
.boxbody {
padding: 10px;
background: #ccc;
}
Paste that code into the stylesheet box - it's the third and largest box that you see when you click the edit html link in your edit profile page.
Have a look, then move onto the next level.

