Profile Styling Guide
Official site resource (Tutorials)

If you are a dark mode user,

please select "View custom theme"

--don't worry the CSS on this page has dark and light modes too!

~*~*~ 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

You can have a solid color and/or an image for your background.
Background is smart because you can enter a color value, url, both, even multiple images!
Please note that it is recommended to enter a color even if you want an image background, for times when your image isn't loaded.
Explain the code below
background: lightblue url("https://www.w3schools.com/cssref/img_tree.gif") no-repeat fixed center;
no-repeat fixed center;
is part of the background short hand. You can find out more at
w3scools' background ref
For
elements noted in yellow
it is required to use -image or -color.

Size

Contents

Position

Contents

Attachment

Contents

Repeat

Contents

★☆☆☆☆

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

★☆☆☆☆

Font Weight

To make bold text normal:

{ font-weight: normal; }

To make normal text bold:

{ font-weight: bold; }

Learn more:

w3scools' font-weight ref

★★★☆☆

Text Decoration

Text decoration is short hand for three properties, but only -line is required. Ex:
{ text-decoration: underline; }
Other examples of
text-decoration-line
are
none|underline|overline|line-through
.
You can also combine them:
{ text-decoration: underline overline; }
{ text-decoration: none; }
will take off any text decoration.

The second property is
text-decoration-color
; you can use any color value here.
If you use the
text-decoration
shorthand, at this point it would look something like this:
{ text-decoration: underline red; }
The result would be a red line under your text (red or not).
Or you could simply change the color of an underline by adding
text-decoration-color: red;

The third and last property is
text-decoration-style
.
The options are:
solid|double|dotted|dashed|wavy
An example would be
{ text-decoration: underline lime wavy; }
would result in a wavy lime underline
Or you could simply change the style of an underline by adding
text-decoration-style: dashed;
You can also do just -line and -style:
text-decoration: underline dashed;

★★★★★

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,

w3schools

is a great site to use to help teach yourself! I still use it for a

reference

!

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

.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:March 9 by Ookami Kenran

Author(s):Ookami Kenran, Karin, Rose Mouse

Page views:318

Visible to:anyone

Can be edited by:authors only

<< Viewing 164 - 204 of 258 >|

August 10, 2011 2:19 (12 years ago) ~_~ I hardly notice when people post here. Best to message me.
August 19, 2011 9:29 (12 years ago) still doesn't work for me.. RADDA RADDA >:3
August 20, 2011 1:59 (12 years ago) Fixed it for you. You have to put the.. place? (i guess that's what I'll call it) For example: body, header, table. So follow this format: place { background: url (urlhere); other stuff; } Of course replace the italic things.
August 31, 2011 17:37 (12 years ago) Thank you! ~ ^^ I usually use google chrome elements.. but i couldn't find a thing and this helped me ! :D
September 1, 2011 1:36 (12 years ago) I use Firefly, which also shows you the elements in FireFox. Somethings don't show up though.
October 2, 2011 12:17 (12 years ago) How can we have our own cursor for our profile page?
October 2, 2011 12:21 (12 years ago) Yeah how can we have one? I will use the ones I make. owo
October 2, 2011 21:08 (12 years ago) Add this code to the body part of you style sheet: cursor: url(), auto; The image has to be a ".cur" or a ".ani" file type. ".ani" will only show in IE, any other browser will use their default cursor. (So if you want people to see the one you put in, use a ".cur".)
October 30, 2011 10:26 (12 years ago) Maybe I'll just use my default (I mean the one I made, without putting it there.)
November 27, 2011 17:11 (12 years ago) I see this, /* Item artist indicator (add a background image if you want it to show) */ #booth_link { background: url(booth.png); width: 100px; height: 100px; } but is that how you change the text color of "Looks like this person has made items!?"
November 28, 2011 1:20 (12 years ago) Try adding "color:#...;" to that part.
November 29, 2011 0:59 (12 years ago) nope...
December 1, 2011 12:13 (12 years ago) Oh, durr! >.< You want to change the text not the link, so you change "#booth_link" to "#booth_text". Did it for you though. :D
December 2, 2011 21:57 (12 years ago) thanks honey. ^^
December 18, 2011 6:50 (12 years ago) what code is to be used when you have a large image that stretches the page to make it a small image......
December 22, 2011 16:02 (12 years ago) I can't figure this out for my life right now. xDD I'm usually so good at this stuff. D:
December 22, 2011 22:00 (12 years ago) What exactly do you need help with Sarah? You should probably send me a message. Smile, you don't want an image to stretch? You'd add "image-size: 00px 00px" to the part of the code you want small (replacing the 00's with the size you want, or use a %.)
January 22, 2012 1:16 (12 years ago) So for the body would you write the thing she said? (background: #FF4F91 url(background.png); color: #680025) And plus where do u get these backgrounds? Do you draw them?
January 22, 2012 1:18 (12 years ago) Can you write an example please? Sorry to be a bother :/
January 23, 2012 1:51 (12 years ago) Im TOTTALY CONFUSED
January 24, 2012 6:07 (12 years ago) Oops, didn't notice the comments here. But I've messaged you on your profile; I think I cleared it up.
February 18, 2012 0:29 (12 years ago) Herp I'm dumber than a mollusk
April 5, 2012 9:29 (12 years ago) Remember the header with CPPDU name with, HOW DO I MAKE IT RAINBOW? (just curious)
April 5, 2012 13:25 (12 years ago) Did you try to put "rainbow" in the spot where #000000 is? Uh...that's kinda just a shot in the dark, but it may work, but if it doesn't, it is either impossible or I was wrong, & you'll have to do more investigating. P:
May 23, 2012 21:37 (11 years ago) The logos from event layouts are specially edited by myself. There's no code (other than the image's url) to make the logo on your profile rainbow.
June 12, 2012 8:23 (11 years ago) It works...
June 26, 2012 1:32 (11 years ago) I still don't understand this. Can someone please help me?
June 26, 2012 16:10 (11 years ago) You add the codes above to your Custom Style Sheet on your profile, then change the colors or images to the ones you want. If you need more help let me know via profile message.
July 22, 2012 3:01 (11 years ago) wow your a smart girl rose mouse!!!
July 22, 2012 3:09 (11 years ago) waaaaaaaaah it cant its refusing me and confusing me i type all the codes it cant appear somebodyhelp waaaaaah
July 22, 2012 19:12 (11 years ago) Thanks Destiny, but majority of the content on this page was originally written by Karin; I've only edited things to be more understandable. Also, I've learned what I know from her and Google. I've left you a message on your profile explaining things.
July 28, 2012 4:27 (11 years ago) ok
September 18, 2012 21:52 (11 years ago) Hey guyss, how do I add music to my profile? :o I added the embedded video code from youtube in the profile text section and it came out as text.
September 19, 2012 21:20 (11 years ago) What I added to my profile is this: [youtube]http://www.youtube.com/embed/LwH4ZRyN2B0[/youtube] What exactly did you add to yours?
September 20, 2012 2:18 (11 years ago) There is a code you can add that auto plays youtube videos if that's what you're looking for.
September 21, 2012 0:35 (11 years ago) Ohh, I stuffed the html code thinking a miracle might happen lol: <iframe width="420" height="315" src="http://www.youtube.com/embed/mgOK4M3DV-8?rel=0" frameborder="0" allowfullscreen></iframe>. Is changing the size possible too? Thank you both for the help~
September 21, 2012 8:15 (11 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.
October 3, 2012 12:36 (11 years ago) this is confusing i need help i wanna make my profile look better >.<
October 3, 2012 21:36 (11 years ago) Need help!
October 3, 2012 23:46 (11 years ago) I am soooo confused..... ._.
October 4, 2012 15:15 (11 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.

Profile Styling GuideOfficial site resource (Tutorials)

This website is ©2008-2024 Karin Driel - Content is © to the respective authors

Profile Styling Guide
Official site resource (Tutorials)