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!

[Orion]

this is amazing! pinned.

[vvintersoldier]

Ahh this is amazing!! I also have a question?? So I have this old music code from ff, and I believe it's correct but it won't play?

Code:

<div style="text-align: center;"><object width="1000" height="50"><param name="movie" value="https://www.youtube.com/v/ID&amp;ob=av3n;hl=en_US&amp;fs=1&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="https://www.youtube.com/v/ID&amp;ob=av3n;autoplay=1&amp;hl=en_US&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash" width="1000" height="50" /></object></div>

edit: actually it pops up i realized, it just won't automatically play.

Again thanks for the guide !!

[Orion]

Ahh this is amazing!! I also have a question?? So I have this old music code from ff, and I believe it's correct but it won't play?

Code:

<div style="text-align: center;"><object width="1000" height="50"><param name="movie" value="https://www.youtube.com/v/ID&amp;ob=av3n;hl=en_US&amp;fs=1&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="https://www.youtube.com/v/ID&amp;ob=av3n;autoplay=1&amp;hl=en_US&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash" width="1000" height="50" /></object></div>

edit: actually it pops up i realized, it just won't automatically play.

Again thanks for the guide !!

You can use this code w/ no autoplay or use this within your interests/about me section:

Code:

[youtube autoplay=1]https://www.youtube.com/watch?v=HERE[/youtube]

[MADI]

Code:

.navbar-default {
    background: url(LINK) or COLOR;
    border-color: black;
    border-bottom-width: 0;
    box-shadow: 0 -3px #FFE1ED inset;
}

Can be used to change the top bar navigation (still trying to figure out how to alter the hover appearance for that bar though... My edits in the developer tool show that they work but when I plug them in to my profile it suddenly doesn't compute, cry)

Code:

header ul.reset li, header ul.reset li a
{
    color: black;
    font-family: "Segoe UI";
    font-size: 11px;
}
header ul.reset li a:hover
{
    color: black;
    text-decoration: none;
}

Can be used to change the color of user info in the header section (working on the nav menu drop down shit).

[vvintersoldier]

This code here can also change your avatar and your buddie's icons to a circle, and it will rotate 360 degrees when your mouse hovers over it.

Code:

#profile_left .avatar {
border-radius: 100px;
width: 200px;
height: 200px;
border: 1px solid COLOR;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
img:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

And you can make backgrounds(not your main background, things like header, footer, boxes, etc) a different opacity.

Code:

filter:alpha(opacity=60); opacity:.6;

[Orion]

What I have so far. Missing the header change(now can remove the header, add a transparent background in), hover over 'show ___' options, and changes for 'profile pictures'/'my buddies'/'add comment' links. Will edit this as I get those fixed... + missing navigation bar at the top

Code:

<style>
body {
background: url(IMG) or #COLOR;
}

header {
background: url(https://i.imgur.com/GamsdEg.png) no-repeat scroll 0 0 transparent or #COLOR;
background-position: position name, px, or percentage here;
box-shadow: 0 -3px #COLOR inset;
height: #px;
}

img {
    max-width: 0%;
    height: auto;
}

.navigate_section {
background: #COLOR; }

.breadcrumb {
background: #COLOR; }

.breadcrumb > li > a {
color: #COLOR;
}

h3.catbg, h4.catbg, div.cat_bar {
background: #COLOR;
font-family: arial;
font-size: #px;
text-align: center;
Color: #COLOR; }

.windowbg {
background: #COLOR;
font-family: arial;
font-size: #px ;
color: #COLOR; }

td {
color: #COLOR;
}

.windowbg span.topslice span {
background: #COLOR; 
}

.windowbg span.topslice {
background: #COLOR; 
}

.windowbg span.botslice span {
background: #COLOR;
}

.windowbg span.botslice {
background:#COLOR;
}

.poster h4 {
Background: #COLOR;
}

.poster ul li  {
Background: #COLOR; }
a:visited {
color: #COLOR;
}

a:link {
    color: #COLOR;
    text-decoration: none;
}

.dropmenu li li
{
    width: 19em;
    padding: 3px;
    margin: 0;
    background: #COLOR;
}

.dropmenu li li a
{
    color: #COLOR;
    padding: 4px 2px;
    border-radius: 3px;
}

.dropmenu li a.active
{
    color: #COLOR;
    background: #COLOR;
    border-radius: 3px;
}

.dropmenu li a.active:hover, .dropmenu li:hover a.active
{
     color: #COLOR !important;
}

/* the hover effects */
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel
{
    color: #COLOR;
    cursor: pointer;
    text-decoration: none;
}

/* the hover effects on level2 and 3 */
.dropmenu li li a:hover, .dropmenu li li:hover&gt;a
{
    background: #COLOR;
    text-decoration: none;
}

header ul.reset li, header ul.reset li a
{
    color: #COLOR;
    font-family: "Segoe UI";
    font-size: 11px;
}

header ul.reset li a:hover
{
    color: #COLOR;
    text-decoration: none;
}
    
footer
{
    margin-top: 20px;
    background: #COLOR;
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 -7px #COLOR;
    font-family: "Segoe UI";
}

footer, footer a
{
    color: #COLOR;
}

span.smalltext {
        color: #COLOR;
}

a:link, a:visited {
    color: #COLOR;
    text-decoration: none;
}

a:visited {
    color: #COLOR;
}

a.new_win {
color: #COLOR;
}

a.new_win:link, a.new_win:visited {
    color: #COLOR;
}

h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a {
    color: #COLOR;
}

.navbar-default .navbar-nav &gt; li &gt; a, .navbar-default .navbar-brand
{
   color: #COLOR;
   font-weight: bold;
   font-family: "Segoe UI";
   text-shadow: 0 2px #COLOR;
}

.navbar-default, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    background: #COLOR;
    border-color: #COLOR;
    border-bottom-width: 0;
    box-shadow: 0 -3px #COLOR inset;
}

.navbar-nav {
background: #COLOR;
}

input, button, select, textarea {
    font: 95%/115% verdana, Helvetica, sans-serif;
    color: #COLOR;
    background: #COLOR;
    padding: 2px;
}

</style>

[MADI]

Did you get those navigation bar / dropdown menu codes to work? I tried that same coding sequence poached from the developer codes and couldn't get it to work for me

[fabrie]

hey! thanks for all of this, everyone! 0:

i was actually able to figure out navigation bar for the most part, though it probably looks a bit wonky. i can drop the code here tomorrow, since it's pretty late for me + it's sort of a mess right now.

[Orion]

lovely!! thank you <3