PROFILE CUSTOMIZATION GUIDE! - last updated 4/7

[fabrie]

heya! here's an entire guide to a basic ultimate profile. it's nothing too fancy, but it makes it so you can personalize everything. i have a code below for you to copy, as well as a step-by-step guide to help you out!

before you start, i'd recommend gathering up the picture(s) and colors that you want for your profile. i also recommend looking up repeating backgrounds/images, since these will repeat multiple times if they don't fit in the section. if you're just using colors, then don't worry about it.

step 1

copy the code from the spoiler below, and paste it in the customization section of your ultimate profile.

code:

Code:

<style>
body {
background: url(IMAGELINK) or COLOR;
}
header {
Background: url(IMAGE) or COLOR;
box-shadow: 0 -3px COLOR inset;
}
.navigate_section {
background: url(IMAGE) or COLOR; }
.breadcrumb {
background: url(IMAGE) or COLOR; }
.breadcrumb &gt; li &gt; a {
color: FONTCOLOR;
}
h3.catbg, h4.catbg, div.cat_bar {
background: url (IMAGE) or COLOR;
font-family: FONT;
font-size #px;
text-align: ALIGNMENT;
Color: FONTCOLOR; }
.windowbg {
background: url(IMAGE) or COLOR;
font-family: FONT;
font-size: #px ;
color: FONTCOLOR; }
td {
color: FONTCOLOR;
}
.windowbg span.topslice span {
background: url(IMAGE) or COLOR; 
}
.windowbg span.botslice span {
background: url(IMAGE) or COLOR;
}
.windowbg span.botslice {
background: url(IMAGE) or COLOR }
.poster h4 {
Background: url(IMAGE) or COLOR;
}
.poster ul li  {
Background: url(IMAGE) or COLOR; }
a:link {
color: LINKCOLOR;
}
a:visited {
color: VISITEDCOLOR;
}
footer {
background: url(IMAGE) or COLOR;
text-align: center;
box-shadow: 0 -7px COLOR;
Font-family: font }
</style>

step 2

find this code in your profile template;;

body {
background: url(IMAGELINK) or COLOR;
}

this is the main background of your profile. if you're using an image, copy and paste the link in the url area and delete the "or COLOR" section of the code. if you're using a color, put in the color and delete the other text. after that, move onto the next step.

step 3

next up is the header [the area that contains the "beasts of beyond" text, which is this part of the code;;

header {
Background: url(IMAGE) or COLOR;
box-shadow: 0 -3px COLOR inset;
}

just like the main background, paste the image or link you are going to use in the appropriate area and delete what you don't need. now, pick a color for the box shadow [the little line of color that is beneath your header] and paste it in the color area. after that, you should be done with the header!

step 4

next up, find this part of your code;;

.navigate_section {
background: url(IMAGE) or COLOR; }
.breadcrumb {
background: url(IMAGE) or COLOR; }
.breadcrumb > li > a {
color: COLOR;
}

this is the bar underneath the header.

the .navigate_section colors the outside of this section, so pick the image or color you want and fill it out!

the .breadcrumb is the area that contains the "beasts of beyond / profile of ___ / summary" section on your profile. fill out whatever background or color you would like for it here!

the .breadcrumb > li > a colors the forwards slashes between each of the links in the navigation section, though the links won't be colored. just paste or type whatever color you want here!

step 5

after that, scroll down to this section of the code;;

h3.catbg, h4.catbg, div.cat_bar {
background: url(IMAGE) or COLOR;
font-family: FONT;
font-size #px;
text-align: ALIGNMENT;
Color: FONTCOLOR; }

these are the little boxes that hold the titles of each section of your profile, as well as set of boxes on the left of your profile [which may be hidden, depending on what way you're viewing your profile.]

here, you do your usual step for the background, pick the font, font size and alignment you want. after that, paste the color that you want for your text in the color section!

step 6

next up;;

.windowbg {
background: url(IMAGE) or COLOR;
font-family: FONT;
font-size: #px ;
color: FONTCOLOR; }
td {
color: FONTCOLOR;
}

.windowbg is all of the background boxes for the section of your profile. this also covers everything that's related to the text as well! this section is pretty easy to fill out, since you just fill out the stuff you want, and you should be good to go.

after that, there is td.

td is just the text color by your profile picture, so drop the font color you want there.

step 7

next up, scroll down to these three parts of the code;;

.windowbg span.topslice span {
background: url(IMAGE) or COLOR; 
}
.windowbg span.botslice span {
background: url(IMAGE) or COLOR;
}
.windowbg span.botslice {
background: url(IMAGE) or COLOR }

this section is the little color bars that are at the top and bottom of each of the sections in your profile. topslice refers to the top one, while botslice refers to the bottom ones. you fill these out like anything else that has the background option.

note that botslice comes in two parts;; span.botslice span is the bigger section, while span.botslice is the smaller section.

step 8

after that, go this this section;;

.poster h4 {
Background: url(IMAGE) or COLOR;
}
.poster ul li  {
Background: url(IMAGE) or COLOR; }

this is the section where you see the profile picture and name of the commenter! as always, you just put in the image or color you want in here.

.poster h4 contains the name of whoever commented on your profile, while .poster ul li contains their profile picture and online/offline status.

step 9

go to this section after that;;

a:link {
color: LINKCOLOR;
}
a:visited {
color: VISITEDCOLOR;
}

these color the links in your profile. a:link is an unvisited link, while a:visted is a visited link. put the colors you want over there! i'd personally recommend using different colors. also, feel free to skip this step if you like the colors that are already provided!

step 9

scroll down to your final part of the code.

footer {
background: url(IMAGE) or COLOR;
text-align: center;
box-shadow: 0 -7px COLOR;
Font-family: font }

the footer is almost exactly like the header, although it does contain some text that you can customize. so, fill everything out in here. have the text as centered on default [for the sake of it looking like what it was earlier], but feel free to change it. after you've gotten everything filled out, click the "change profile" button and you should be good to go!

OTHER STUFF;;

cursors--- personally, i'd recommend this site for cursors. you can use the search bar if you're looking for something specific, or just scroll through their many categories. once you have one picked, scroll down and copy the universal css/html section. after that, drop this in either the customization section of your ultimate profile, or in the 'my media' box. please note that dropping stuff in the media causes it to create a new box.

---

i'll be updating this as i go along! i'm looking into figuring out music codes, as well as a few other things. feel free to track this, or post if you're having any issues! you can also always shoot me a message if you need help or have any questions. i'd love to help you out!