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.

The option to change your profile theme is called "Edit CSS". 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 page title */
h1, h2, h3, h4 { color: #FFFFFF; }

/* Link color */
a:link, a:visited, a:active, a { color: #A60033; }
/* Link color when you move over it */
a:hover, 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, #header { 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, #header a { background-color: #FF4F91; color: #08321D; }
/* Changes in menu item colors when you move over it with the cursor */
#menu a:hover, #header a:hover { background-color: #000000; color: #FFFFFF; }

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, #content {}

/* 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 Halloween pumpkin (will show when wearing one) */
#pumpkin {}

/* Your pet (will show when wearing one) */
#petdata {}

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

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

/* Your comments section */
.comments {}

/* 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 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.
Wiki title:Profile Styling Guide
Last changed:January 20 by Karin
Author(s):Karin, Rose Mouse
Page views:42
Visible to:anyone
Can be edited by:authors only
<< Viewing 228 - 242 of 242
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.
Is there any code for the trunk? ^.^
I tried something but it didnt worked~
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.
I added some css code to recolor your artist trunk, now, too.
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 ^^
Is the Close parenthesis included? (,) (in the advance)
-thank you >///<"
Updated to match the newest layout!
#oekaki { display: none } isn't working. :S
Ookami Kenran
Small request, could you name the class for the comments table?
Ookami Kenran
One remark, when styling a page, could you leave our logo in? Sure you can restyle it but we want the site to stay recognizable.
New site: Oekaki now has its #oekaki id, and comments were already in a .comments class which I now added to the guide. #profile_avi and #equipped have gotten id's as well so you can move them.
The part about the comment table was to differentiate between the comments and avis vs the submission area. D&D3.5 is an example of why, I want the pic to only be in one place (not the submission area).
Ookami Kenran
Oh my...
I don't know if the CSS for my links broke because of something I did or you did... (I should have paid attention before I made the first edit...)

I would like to suggest making it possible to go tho previous versions for CSS too, I've had 3 time now that that could have come in handy...
Ookami Kenran
I've got it working now. :P
Ookami Kenran