Cruithne Reference Zone

Step by Step Profile Tutorial

For those who wish to make a profile but don't know where to start.

Step 1: The First Box
Alright, so usually when I start a profile I have a a large DIV box made to hold the smaller boxes that I will use to hold text/images/links. I usually use this box as a boundry for the smaller boxes, this box is also used for the main background image.

<style type="text/css">
.imgbox
{
width:700px;
height:800px;
background-image: url(http://i39.photobucket.com/albums/e159/3m0_Dimpl3s/Backgrounds/33.png);
background-size: 100%;
}
</style>

<div class="imgbox">

</div>

I normally make profiles 700x800 px since it is a manageable size and it fits the page quite nicely. The background-size is used when a choosen image is smaller than the profile's size, it basically streaches the image to fit the given boundries. From here we move to the actual boxes we will put text and other stuff in.

Step 2: Adding the Text Boxes
The first text box I'll be adding will fill up the top section of the profile.

<style type="text/css">
.imgbox
{
width:700px;
height:800px;
background-image: url(http://i39.photobucket.com/albums/e159/3m0_Dimpl3s/Backgrounds/33.png);
background-size: 100%;
}
.topbox
{
width:680px;
height:400px;
margin:5px;
padding:5px;
background-color: rgba(255, 255, 255, 0.7);
}
</style>

<div class="imgbox">
<div class="topbox">
Here we are with the top box.
</div>
</div>

Here we are with the top box.

After adding the first box we will add two more boxes below, this is where the float method is used to align the boxes side by side.

<style type="text/css">
.imgbox
{
width:700px;
height:800px;
background-image: url(http://i39.photobucket.com/albums/e159/3m0_Dimpl3s/Backgrounds/33.png);
background-size: 100%;
}
.topbox
{
width:680px;
height:400px;
margin:5px;
padding:5px;
background-color: rgba(255, 255, 255, 0.7);
}
.bottomleftbox
{
width:330px;
height:380px;
margin:5px;
padding:5px;
background-color: rgba(255, 255, 255, 0.7);
float:left;
}
.bottomrightbox
{
width:330px;
height:380px;
margin:5px;
padding:5px;
background-color: rgba(255, 255, 255, 0.7);
float:left;
}
</style>

<div class="imgbox">
<div class="topbox">
Here we are with the top box.
</div>
<div class="bottomleftbox">
Here we are with the bottom left box.
</div>
<div class="bottomrightbox">
Here we are with the bottom right box.
</div>
</div>

Here we are with the top box.

Here we are with the bottom left box.

Here we are with the bottom right box.

Step 3: Customization
From this point on the changes on this basic profile can be endless; from box size, color, borders, and text anything can happen. However most of the time, it takes a bit of experimenting and testing to get everything exactly right.

Some things to remember when making a profile:
- Boxes that are created with the same name will react to whatever changes are made in their style class.
- Always make sure if using quotation marks (") in a code segment it is closed with another quotation mark, if not anything after the first quotation mark will be lost (This only occurs if the quotation mark is not closed INBETWEEN <>'s).

If you have any more questions feel free to message me, I'll be willing to explain anything that is still confusing.