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

Tools

/* 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:89
Visible to:anyone
Can be edited by:authors only
<< Viewing 229 - 243 of 243
September 24, 2013 13:09 (7 years ago)
Is there any code for the trunk? ^.^
I tried something but it didnt worked~
Seon
September 27, 2013 12:18 (7 years ago)
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
February 15, 2014 20:32 (6 years ago)
I added some css code to recolor your artist trunk, now, too.
Karin
June 7, 2014 12:43 (6 years ago)
Im new.........where is the style sheet box??
Kawaii Chup-chup
June 8, 2014 21:10 (6 years ago)
That's probably best answered by following the first few steps of this tutorial ^^
Karin
April 9, 2015 13:52 (5 years ago)
Is the Close parenthesis included? (,) (in the advance)
-thank you >///<"
KisakiShiemi
October 26, 2018 23:08 (2 years ago)
Updated to match the newest layout!
Karin
January 18 5:27 (10 months ago)
#oekaki { display: none } isn't working. :S
Ookami Kenran
January 19 6:44 (10 months ago)
Small request, could you name the class for the comments table?
Ookami Kenran
January 19 22:04 (10 months ago)
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.
Karin
January 20 23:00 (10 months ago)
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.
Karin
January 21 4:57 (10 months ago)
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
January 21 5:03 (10 months ago)
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
January 21 19:14 (10 months ago)
I've got it working now. :P
Ookami Kenran
March 9 21:02 (9 months ago)
Changing booth trunk isn't working.

Neither is #text, and #contents changes the whole page.
Ookami Kenran