He destroyed my life...
User Image



Yes, cheat, because it's easier to work off of profiles that already work.

Sooo, first off, go to tektek.org and find a layout of a profile you like. (Colours and images don't matter, because they can be changed.)

Next, I will go throught this step by step, using my profile as an example.
(It helps if you have a mule account so you can test it out as you go.)

User Image

#content #main, #about, #journal, #friends, #multimedia, #comments, #signature{height: auto;}
/*Layout done by Pure Vampyre of Gaia Online.*/


This part is just saying that each part of your layout is auto sized, say for different screen sizes, or how much content is in it.
Also, please put your name in there instead of mine, you don't have to, it's just a statement of who made it.



/*Header*/
#extendedProfileBody #header h1
{
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/IloveNathanLane.jpg)
border:none;
border: 1px #000000;
}
#header {position: relative; border-right: 0px;}
#extendedProfileBody{cursor: crosshair;}



Ok, so the big header at the top of the page.
#extended profile body is just telling you that there is more being added to the page.
#header h1 is telling you that you are going to put in a header, h1 means that this is the first header.
Ok, so your header.
If you are putting your own image in here then it needs to be a width of 760px (pixels) by a height of 160px. If your image isn't that big/small, then it will be miss-aligned.
Once you have the image you want to put in there, insert the http:// thing in the brackets after "url". Make sure there isn't anything in it like www. or User Image - Blocked by "Display Image" Settings. Click to show.here, the possible values are what you can put in that blank space to give you a boreder. But you won't be able to see it yet, the next thing you need to change is the colour.
At the moment, it is set to black (#000000). Look at a HTML colour chart. Pick the colour you want from that, and replace the six zeros with the number of the colour you choose. That should be your border of you heading done now.
#header {position: relative; border-right: 0px;} The border part, you can ignore, we have already covered that. The part where it says "position" well obviously that means were you want the picutre to be in the heading. So if you have done the image to the size I said to, leave it as "relative" all it does it centerise it.
#extendedProfileBody{cursor: crosshair;} Again, another bit you are adding to your profile, a cursor.
Different cursors:
cursor: auto; (uses what is set by user)
cursor: crosshair; (should produce a cross)
cursor: default; (cursor remains as it is)
cursor: e-resize; (arrow pointing right)
cursor: hand; (the traditional pointing hand)
cursor: help; (a Question Mark should appear)
cursor: move; (a cross with arrows on the tips)
cursor: n-resize; (an arrow pointing north or up)
cursor: ne-resize; (an arrow pointing northeast)
cursor: nw-resize; (an arrow pointing northwest)
cursor: pointer; (that hand again)
cursor: s-resize; (an arrow pointing south or down)
cursor: se-resize; (an arrow pointing southeast)
cursor: sw-resize; (an arrow pointing southwest)
cursor: text; (looks like the end of an I-beam)
cursor: w-resize; (an arrow pointing west)
cursor: wait; (an hourglass)
Choose the type of cursor you would like and put it in the { }.
And wow, now you have a header with a border and a cursor.. Slow progress at first, but we are getting there.

*Takes a deep breath*
Ok, next part. Now you may understand this a little more, I hope things will speed up a bit now.

/*Body*/
a:link,a:active,a:visited,a:hover {cursor: crosshair}
BODY{
background: #000000 url(http://i79.photobucket.com/albums/j139/elemental_mace/background.jpg) no-repeat fixed;
width: 760px;
margin: 0 auto;
cursor: crosshair;
}



Hopefully now you will be starting to recognise things.
So first off, choose your cursor.
Second, the background colour, it usually helps if you can get it as close to the main colour used in the image you will be using. So again, you will want to use the HTML colour chart.
I hope now you will understand that the http:// code needs to go into the brackets, with no www. or User Image - Blocked by "Display Image" Settings. Click to show.

#content
{
border: none;
background: none;
}
#content #main{
padding: none;
}
.section {
font: 10px verdana;
color: #CCCCCC;
font-weight:bold;
background-color: #000000;
background: url(http://thephoenix.com/SoxBlog/content/binary/black.jpg)
border: 1px dashed #000000;
padding: none;
}
.section h2{
color: #000000;
font-size: 14px;
text-indent: -3000px; }
#wishlist,#about,#friends,#comments,#journal,#multimedia,#details,#profile,#signature{background:#000000 url(http://thephoenix.com/SoxBlog/content/binary/black.jpg)}
#about,#friends,#comments,#multimedia,#signature,#journal{
width: 480px;
}



Ok, big bit. sweatdrop
But almost there!

If you want to change the border in this part, you will be putting a boreder around all of your signature, friends list etc. If you want it individually round them, I will tell you in the next part.
So, if you want a border round all of it, change it in here, if not, leave it.
Background, don't bother with it, we will change that elsewhere.
Padding is basically more bodering round the writing, so you can leave that too.
.section {
font: 10px verdana;
color: #CCCCCC;
font-weight:bold;
This part is about your font. 10px is the size of your font, make the number bigger for a bigger text, or smaller for smaller text.
Next, is colour. I'm sure you know this by now. So select your font colour from the HTML colour chart, and put it in.
Font weight is the thickness of your text. It can be; normal, bold, bolder and lighter.
Background-color, this is the base colour that is going to go behinf your text, friends list etc. So, choose your colour again.
Then there is the image, if you want to put one there, if you don't want to put one there, delete the whole section "background:url(...)"
Border, this is the part that you will change if you want individual borders around your signature etc..
Padding, again, another border round the text, if you don't want it there, leave it as none.
.section h2{
color: #000000;
font-size: 14px;
text-indent: -3000px; }
#wishlist,#about,#friends,#comments,#journal,#multimedia,#details,#profile,#signature{background:#000000 url(http://thephoenix.com/SoxBlog/content/binary/black.jpg)}
#about,#friends,#comments,#multimedia,#signature,#journal{
width: 480px;
}

The colour is for your text etc. etc. And the background is what will be the back ground for your sugnature about me etc. Easy enough to change.

Ok, the second to last bit.
And the second easiest.


/*Profile*/
#profile{
background-color:#000000;
url(http://thephoenix.com/SoxBlog/content/binary/black.jpg)
}
#profile h2
{
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/header1-1.jpg) top left no-repeat;
text-indent: 85px;
}
#profile
{
color:#000000;
}

/*Details*/
#details h2
{
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/header1-1.jpg) top left no-repeat;
text-indent: 165px;
}

/*About*/
#about h2
{
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/header1-1.jpg) top left no-repeat;
text-indent: 245px;
}

/*Friends*/
#friends #friendGroup li{border-right:0px;}
#friends h2
{
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/header1-1.jpg) top left no-repeat;
text-indent: 230px;
}

/*Wishlist*/
#wishlist h2
{
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/header1-1.jpg) top left no-repeat;
text-indent: 150px;
}

/*Comments*/
#comments h2
{
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/header1-1.jpg) top left no-repeat;
text-indent: 230px;
}

/*Journal*/
#journal h2
{
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/header1-1.jpg) top left no-repeat;
text-indent: 230px;
}

/*Signature*/
#signature h2
{
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/header1-1.jpg) top left no-repeat;
text-indent: 230px;
}

/*Footer*/
#footer form {opacity:0;}
#footer img {opacity:0;}
#footer {
border: none;
background: url(http://i79.photobucket.com/albums/j139/elemental_mace/border1-1.jpg) no-repeat;
width: 750px;
height: 28px;
}
a:link,a:active,a:visited,a:hover {
font: 10px Verdana;
font-weight: bold;
cursor: crosshair;
}


On this part, you basically just repeat yourself.
First off, you need to change the background, as you have already done else where. but ONLY do it on the first one! The other backgrounds are a different thing.
So, after #profile h2, you will now be putting in a different image. This is the one that says "about" and etc. As on my picture, second heading.
For this, you need an image that is 500px wide and 25px high.
Once you have your image, you want to put it in all of the background tags that come after the #profile h2. When you get to footer, the background for that is a completly different image, but doesn't show up on my profile. confused But if you want to put an image there and hope is shows up it's size is 750px wide and 28 high.
After background, there is a part that says "top left no-repeat" This is refering to the positioning of the picture and if it is repeated or not. It is generally better not to have it repeated, otherwise it wcan mess up. The top left can be changed to anything, for example: bottom right, relative (centered) etc.
The rest (text indent etc.) is best to leav, otherwise you could end up throwing your writing all over the page.

The last and easiest part.

/* tektek add-in to fix caption boxes */
.caption2:after{background:none;content:url(http://tinyurl.com/8rzvl)}
.caption:after{background:none;content:url(http://tinyurl.com/8rzvl)}
.caption2:before{background:none;content:url(http://tinyurl.com/8rzvl)}
.caption:before{background:none;content:url(http://tinyurl.com/8rzvl)}



Just plonk this on the end, and you are done.

Yay!

Now this is a basic profile, and is based on my forst one, seeming as I am new to this too.
I hope this works for you all and plese PM me or post in here if you have any questions. biggrin



Now I will destroy him.