Profile Styling Guide
Official site resource (Tutorials)

On here you can style your own profile using Cascading Style Sheets. They are a type of coding that change the layout of elements of a web page. If you're not familiar with them I suggest just copy-pasting the lines with the things you want to change into your box. For colors hexadecimal color codes are used, images you obviously have to host somewhere first. And if a change doesn't appear right away, try refreshing the page.

To enter a style sheet, first set your theme to "custom" and save, an option to "enter custom style sheet" will appear. You may need to refresh the page after you save to see the changes you made (most browsers cache style sheets).

If you decide to play around with it more, note that the ordering is important; things more to the bottom take precedence over things written at the top. Also, if all you want to change is the background image of something, edit "background-image" and not "background" or you will overwrite all aspects of the background. When in doubt, check Google or use the comment box to ask questions. Note that I'm pretty new to this myself. If you have any experience with this kind of thing don't hesitate to make suggestions.

Changing the color scheme (beginner)

/* Background color/image and text color */
body { background: #FF4F91 url(http://your_photobucket_or_something/background.png); color: #680025; }

/* Comment box/changing booth color */
table { background-color: #FF91B8; }
/* Color of text "character description for <user>" */
h1 { color: #FFFFFF; }

/* Link color */
a:link, a:visited, a:active { color: #A60033; }
/* Link color when you move over it */
a:hover { color: #FFFFFF; }

Changing the header (advanced)

/* Changing the color of the header */
#header { background-color: #2284C8; }
/* And of course the piece of background behind the avatar */
#avatar { background-image: url(../../../img.php?gradient_bg=2284C8); }

/* Changing the color (or image) of the logo */
#menu { background-image: url(../../../img.php?logo=9420A2); }

/* Menu item colors (it may be nice to make the background match the page background) */
#menu a:link, #menu a:visited, #menu a:active { background-color: #FF4F91; color: #08321D; }
/* Changes in menu item colors when you move over it with the cursor */
#menu a:hover { background-color: #000000; color: #FFFFFF; }

Previous header style

/* Changing the color of the header and the graphics along with it */
#header { background-color: #2284C8; background-image: url(../../../img.php?header=2284C8); }
/* And of course the piece of background behind the avatar */
#avatar { background-image: url(../../../img.php?avi_bg=2284C8); }


/* Old style logo and menu position */
#menu { background-image: url(../../../img.php?title=9420A2&border=000000); padding-left: 5px; }


/* "Last comment" color */
.header a:link, .header a:visited, .header a:active { color: #08321D; }
/* "Last comment" color when you move over it */
.header a:hover { color: #FFFFFF; }

#menu{ color: #08321D; } /* menu dividers */


Manipulating the elements (expert)

/* Giving all the avatars in the comment box a custom background */
td.avibox { background-image: url(spotlight.png); }

/* Changing the speech bubble */
.speechbox span { background-color: #FFDEE9; border-color: #E33D75; }
.bubble_tail { background-image: url(../../../img.php?bubble=FFDEE9&border=E33D75); }

/* Changing your artist trunk colors/image (follow the example if you want to change the whole image) */
a.trunk { background:url(../../../img.php?trunk=96AFC2&straps=FFFFFF); }

/* The box containing your profile text */
#text {}

/* The box containing your profile avatar */
#profile_avi {}

/* Custom boxes */
/* (created by typing [block=(namehere)]text[/block] in your profile text) */
/* Here is a guide; check here if you have problems*/
#(namehere) {}


/* Your Easter egg (will show when wearing one) */
#egg {}

/* Your Christmas tree (will show when wearing one) */
#tree {}

/* Your oekaki gallery (will show when you've drawn on the oekaki board) */
#oekaki {}

/* The list of layer icons of worn items */
#equipped {}

/* Profile comment indicator in the header */
#comment {}

/* Online/offline indicator (add a background image if you want it to show) */
#online { background: url(online.png); width: 100px; height: 100px; }
#offline { background: url(offline.png); width: 100px; height: 100px; }

/* Item artist indicator (add a background image if you want it to show) */
#booth_link { background: url(booth.png); width: 100px; height: 100px; }

/* The list of artists of worn items */
#equipped_text {}

/* The text saying whether you're online/offline */
#online_text { color: #00FF00; }
#offline_text { color: #FF0000; }

/* The text showing the link to your booth*/
#booth_text {}

/* The following code can be used to hide an element: */
{ display: none; }

/* The following code can be used to remove the background image of an element: */
{ background-image: none; }

/* This code changes the appearance of the cursor while on your profile.
The image used must be a .cur file, using .ani will not appear on all browsers.*/

body { cursor: url(image.cur), auto; }

Hall of fame
People who have customized their profiles

---

Extra help
If you think you're up to it,
a great source of code is
the W3School website.

Last changed: February 15, 2014 by Karin
Author(s): Karin, Rose Mouse
Visible to users and non-users

how do u make the background diffrent
cuitepie9090
beacsue my background wont change from pink
cuitepie9090
pleae helpe meh???!!!!
cuitepie9090
You'll have to copy paste the exact code you find on this page into your profile's style sheet box, and replace the color code (#FF4F91) by whatever you want it to be.
Karin
Is there any code for the trunk? ^.^
I tried something but it didnt worked~
Seon
Yes, there is a code for the trunk:
a.trunk {
background-image: url(http://website/trunk.png);
}
But you'll need to use a trunk image with 2 trunks: closed above and open below.
Karin
I added some css code to recolor your artist trunk, now, too.
Karin
Im new.........where is the style sheet box??
Kawaii Chup-chup
That's probably best answered by following the first few steps of this tutorial ^^
Karin
Is the Close parenthesis included? (,) (in the advance)
-thank you >///<"
KisakiShiemi