Profile Styling Guide
Official site resource (Tutorials)

~*~*~ This is somewhat a work in progress, everything is mostly here though! If you have any questions, please direct them to Ookami Kenran! ~*~*~

Table of Contents

🔗 Preface
🔗 Tools
🔗 Changing the Basics
🔗 Changing the Header
🔗 Meet the Elements
🔗 Extra Help
🔗 Legacy Transition Guide

Table of Contents

🔗 Preface
🔗 Tools
🔗 Beginner
🔗 Advanced
🔗 Expert
🔗 Extra Help
🔗 Legacy Transition Guide

Preface


The option to change your profile theme is on your profile, next to the "Edit page" option, called "Edit CSS".

You may need to refresh the page after you save to see the changes you made (most browsers cache style sheets).


On this page you can learn how to style your own profile using Cascading Style Sheets. This is a coding language that changes the presentation of a web page. If you're not familiar with this I suggest just copy-pasting the lines with the things you want to change into your box.

It is advised that you only change one or two things at a time so it is easier to find your mistakes. 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. Keeping that in mind, I also recommend that you order your code in the way that it appears on the page to help you find things when coding.

If you are looking for further assistance, check out our help section.




Tools


Note that
color: ;
always refers to text.




★☆☆☆☆

CSS Comments

Comments are parts of the code that the browser will ignore, so you can make note for yourself and others.
/* */

I recommend you use them liberally!
/* An example of a CSS comment. */





★☆☆☆☆

Spacing

Whitespace is ignored when the browser reads the code, so you have some freedom when it comes to writing your code so that it is easier to read.
Example:
h1,
h2,
h3,
h4 {
color: #FFFFFF;
}

is the same as:
h1, h2, h3, h4 {color:#FFFFFF;}





★☆☆☆☆

Editing the Logo

You can easily change the color of the logo, but if you want to make your own image, make sure that the image still has "Chibi Pixel Doll Dress-Up" in it.

★☆☆☆☆

Changing the Color of Our Special Graphics

[Coming Soon!]

★☆☆☆☆

Color Values

[Coming Soon!]




★★★☆☆

The Background Property


Size


Position


Attachment


Repeat





★☆☆☆☆

Hide Things

You can easily hide elements with one line of code:
{ display: none; }

This is not really recommended, except for
elements noted in violet
.




★★☆☆☆

Alpha % to # Table

This is handy, because you can still have transparency and use hex values instead of rgb().
Ex:
#80808080
would be #808080 (gray) at 50%.
Here are some helpful values:
Max/Min
100% — FF
0% — 00
Thirds
33% — 54
67% — AB
Quarters
25% — 40
50% — 80
75% — BF

Tens
90% — E6
80% — CC
70% — B3
60% — 99
50% — 80
40% — 66
30% — 4D
20% — 33
10% — 1A
Here's a converter that does percent, rgb(0-255), and hex!




★☆☆☆☆

Font Weight

To make bold text normal:
{ font-weight: normal; }

To make normal text bold:
{ font-weight: bold; }

Learn more: .




★★★☆☆

Text Decoration










★★★★★

Gradients

[Coming Soon!]




★★★★★

Responsiveness

This refers to how a page responds to being on different devices.
[Coming Soon!]



★☆☆☆☆

Changing the Basics


/* === Changing the color scheme === */
/* Main background color, image, and text color */
body, .screenshot-bg {
background: #FF4F91 url(
http://example.png
);
color: #680025;
}

/* h1 is the page title, and h4 is the footer text, h2 & h3 are used on other pages */
h1, h2, h3, h4 {
color: #FFFFFF;
}
/* OR */
h1 {
color: #FFFFFF;
}
h4 {
color: #000000;
}

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




★★☆☆☆

Changing the Header


/* ======= Changing the Header ======= */
/* Changing the color of the header */
#header {
background: #2284C8;
}

/* Avatar/Login area */
#top_right {
background: url(spotlight.png);
}

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

/* Main menu item colors (it may be nice to make the background match the page background) */
#header ul.menu a {
background: #FF4F91;
color: #08321D;
}
/* Changes in menu item colors when you move over it with the cursor */
#header ul.menu a:hover {
background: #000000;
color: #FFFFFF;
}
/* The selected tab (only needed if you have oekaki or you are an artist) */
#header ul.menu li.selected a {
background: #FF4F91;
color: #08321D;
}
/* When you hover over it */
#header ul.menu li.selected a:hover {
background: #000000;
color: #FFFFFF;
}





Meet the Elements


★☆☆☆☆

Comments Section


/* Comment area */
.comments {
background: #FF91B8;
}

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

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

*The
-color
is needed for the border.




★☆☆☆☆

Secondary Menu

idk what to use for the temporary colors


/* Secondary Menu */

#content ul.menu a {
background: #FF4F91;
color: #08321D;
}
/* Changes in menu item colors when you move over it with the cursor */

#content ul.menu a:hover {
background: #000000;
color: #FFFFFF;
}
/* You can challenge yourself by looking at the main nav and guess how to do the selected version of the secondary nav, which you may not see unless your theme is veiwed on other pages. By default it just adds an underline. */





★★☆☆☆

Avatar/Login Area Continued

idk what to use for the temporary colors, these are default :P


/* Links */
#top_right a,
#top_right a:link,
#top_right a:visited,
#top_right a:active {
color: #DAE5F2;
}
/* Links when you hover over them */
#top_right a:hover {
color: #FFFFFF;
}

/* Buttons; I recommend making them look like the main nav */
#top_right input[type="submit"],
#top_right input[type="button"] {
background-color: #DAE5F2;
color: #274052;
}
/* Buttons when you hover */
#top_right input[type="button"]:hover {
background-color: #DAE5F2;
color: #274052;
}





★★★★☆

Other


/* The box containing everything but the header and footer */
#content {}

/* Custom boxes */
/* (created by typing
[block=exampleName]text[/block]
in your profile text)
Check out the Custom Blocks How-To Guide if you're lost. */
#exampleName {}

/* Your oekaki gallery (will show when you've drawn on the oekaki board) */
#oekaki {}
/* The border around each oekaki */
.framed {
border: ;
}

/* The box containing your profile avatar (right above your equipped list) */
#profile_avi {}

/* The list worn item icons */
#equipped {}

/* Cursor */
/* The image used must be a .cur file (using .ani will not appear on all browsers). */
body { cursor: url(image.cur), auto; }





★★☆☆☆

Artists


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





★★★☆☆

Event


These will show when you are wearing one.
Displayed in chronological order.
Default height is 50px.

/* Your Halloween pumpkin */
#pumpkin {}

/* Your Saint Nicholas shoes */
#shoes {}





Extra Help


If you need help, remember that google is your friend!

If you are interested in understanding better, is a great site to use to help teach yourself! I still use it for a !

If all else fails, you can talk to one of the CSS designers.

Or you can look for an active CSS shop to find someone to make a theme for you! 😊

Kenran's CSS Help Desk




Legacy Transition Guide


The legacy header had a gradient image over it, along with the #avatar, which is no longer utilized.
#header still works, but #avatar can be changed to #top_right if you want an image behind the login/user area.
(Click the link if you want to know more about the login/user area.)

If you miss the gradient, add
background-image: linear-gradient(transparent, #ffffff65);
after your background in
#header
.

You can add a bottom border like the old one with
border-bottom: 1px solid #274052;

(Click here for more on borders)

For the menu items, delete everything before the
{
and replace it with this:
#header ul.menu a
;
...and for when you move over it with the cursor:
#header ul.menu a:hover


If you are a site artist and those who have make oekaki, it would make sense to add the selected code:
/* The selected tab (only needed if you have oekaki or you are an artist) */
#header ul.menu li.selected a { }
/* When you hover over it */
#header ul.menu li.selected a:hover { }


Also, there is what I call a secondary menu now.

If you had a trunk, make sure it says
background-image:
and not just
background:
.

I recommend changing
table
to
.comments;
especially if something isn't working properly.
Before, this would edit your changing booth, but this its not currently possible.

For all the other little extras, they may not be on the new site, feel free to comment and ask.
Wiki title:Profile Styling Guide
Last changed:January 31 by Karin
Page views:272
Visible to:anyone
Can be edited by:authors only
<< Viewing 200 - 240 of 254 >|
September 21, 2012 8:15 (10 years ago)
Well, yeah, HTML is potentially evil so it won't work just like that.

Changing the size is not possible now but we could make it possible if it's something you really want. Would probably make the BBCode look less nice/easy though.
Karin
October 3, 2012 12:36 (10 years ago)
this is confusing i need help i wanna make my profile look better >.<
Fluffball
October 3, 2012 21:36 (10 years ago)
Need help!
twizzy
October 3, 2012 23:46 (10 years ago)
I am soooo confused..... ._.
heather8899
October 4, 2012 15:15 (10 years ago)
First change your profile theme to "Custom", then choose "Enter custom style sheet" and copy-paste the code for the things you want to do from here to there.
Karin
October 8, 2012 11:34 (10 years ago)
I want to change the colour scheme but even that is confusing me...what part is the actual code?
Druna
October 8, 2012 16:51 (10 years ago)
Everything under "Changing the color scheme (beginner)", excluding the other headers, can be safely pasted into your style sheet. For beginners it works best to take just what you need and replace the color codes/images with the ones you want.
Karin
October 8, 2012 19:38 (10 years ago)
Okay, I'll give it a go.
Druna
October 11, 2012 7:42 (10 years ago)
how do you change your mouse?
lexi50501
October 11, 2012 8:43 (10 years ago)
I tried to add a picture as my background and it hasn't worked. :(
Druna
October 23, 2012 16:52 (10 years ago)
Lexi, there is a code for cursors at the bottom of the guide.

Druna, with the code you have in your profile now, you just have to add the url of the image to the "url()" part.
Rose Mouse
October 25, 2012 9:56 (10 years ago)
I dont know how to change my mouse! >.<
CookiieKyle
October 26, 2012 16:53 (10 years ago)
I'm not repeating myself.
Rose Mouse
October 26, 2012 21:06 (10 years ago)
i dont get it
AmyNi
October 29, 2012 17:00 (10 years ago)
Ask a question and maybe I can help you.
Rose Mouse
December 9, 2012 1:14 (10 years ago)
Nevermind, I got it
AmyNi
December 24, 2012 4:45 (10 years ago)
How do you hide the online text element?
Aki Izayoi
December 24, 2012 8:45 (10 years ago)
#online_text { display: none; }
#offline_text { display: none; }
Karin
January 17, 2013 19:30 (10 years ago)
How do I clear my CSS layout? Whenever I switch it to custom an/or make changes to the CSS, it's always the same! I don't want it that way. Please help!
supershanimal
January 17, 2013 19:37 (10 years ago)
Well, I just tried clearing the background, but it's all pink and won't change to the image when I try to do that. ???
supershanimal
January 17, 2013 19:43 (10 years ago)
Nevermind I got it!
supershanimal
January 18, 2013 4:21 (10 years ago)
Sorry supershanimal; this thread gets forgotten.
Rose Mouse
January 19, 2013 6:15 (10 years ago)
Still I Don't Get It...Please Help! >_<
Mayuki
January 19, 2013 15:39 (10 years ago)
You can also follow this guide up to step 4, and copy-paste the codes from above into the box you see there.
Karin
February 1, 2013 17:09 (10 years ago)
If you have questions, you can ask me. :)
Ookami Kenran
September 14, 2013 18:26 (9 years ago)
how do u make the background diffrent
cuitepie9090
September 14, 2013 18:27 (9 years ago)
beacsue my background wont change from pink
cuitepie9090
September 14, 2013 18:30 (9 years ago)
pleae helpe meh???!!!!
cuitepie9090
September 15, 2013 10:00 (9 years ago)
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
September 24, 2013 13:09 (9 years ago)
Is there any code for the trunk? ^.^
I tried something but it didnt worked~
Seon
September 27, 2013 12:18 (9 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 (8 years ago)
I added some css code to recolor your artist trunk, now, too.
Karin
June 7, 2014 12:43 (8 years ago)
Im new.........where is the style sheet box??
Kawaii Chup-chup
June 8, 2014 21:10 (8 years ago)
That's probably best answered by following the first few steps of this tutorial ^^
Karin
April 9, 2015 13:52 (7 years ago)
Is the Close parenthesis included? (,) (in the advance)
-thank you >///<"
KisakiShiemi
October 26, 2018 23:08 (4 years ago)
Updated to match the newest layout!
Karin
January 18, 2020 5:27 (3 years ago)
#oekaki { display: none } isn't working. :S
Ookami Kenran
January 19, 2020 6:44 (3 years ago)
Small request, could you name the class for the comments table?
Ookami Kenran
January 19, 2020 22:04 (3 years 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, 2020 23:00 (3 years 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, 2020 4:57 (3 years 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