Warning: Undefined variable $uid in /customers/4/4/1/chibidoll.com/httpd.www/legacy/session_reg.php on line 21 Profile Styling Guide

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



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
  • 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: .




★★★☆☆

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, 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.

Last changed: March 9, 2024 by Ookami Kenran
Author(s): Ookami Kenran, Karin, Rose Mouse
Visible to users and non-users Warning: Attempt to read property "username" on null in /customers/4/4/1/chibidoll.com/httpd.www/legacy/wiki.php on line 191

Disregard the last three posts... Let me restart.
___

I wouldn't mind trying to help make something like that! I could use some help with a list of things to include.
___

How do you feel if I make some notes like I did above, I won't change anything, I just want note some updates and suggestions.
Ookami Kenran
I forgot to add/ask: do you want it a new wiki, or where?
Ookami Kenran
I think the migration guide should just be a chapter on this wiki, if you look back in the wiki change history you can probably find the most important changes, along with your experience. If you want to add some more (easy) tricks for people to fancy up their profile I'd say go for it! Oh something I just thought of, this page has no example pictures of any kind, maybe it would be user-friendlier after we do that. One last note, the reason why all the descriptions are between comment tags is because people had the tendency to copy-paste the whole page into their profile.
Karin
Not a problem! ...I'll just use my experience and add to it as needed.

I was thinking about making the tutorial section on my CSS page have extra tricks, but I could do it here instead.

Maybe we could use images, but that was part of the reason why I had to redo the block guide. I think a better way is to use the blocks I used there. Though we do have the problem where you can't put code tags inside blocks...
Ookami Kenran
I think you're doing great with this, but for the users it might be better to keep your TODO lists on another page so it doesn't feel so unfinished here. You can always keep improving after all, doesn't mean users don't want to reference it in the meantime. And then I also don't have to bother other users with my feedback.
Karin
body, .screenshot-bg {}

The screenshot-bg class is needed so it can capture the theme correctly while taking a screenshot. Please try to include it from now on.
Karin
Can you explain that again, Karin? I want to understand fully.

Note to self: I should make a dark version so the Table of Contents isn't displayed twice. Once I get that done, ask Karin if it possible to make a page an exception to the force darkmode setting. (otherwise make a note at the top of the page. :( )
Ookami Kenran
The screenshot thing is because it captures only a part of the page and the background styling is on the body element which we don't capture. So applying the same style to that screenshot-bg class makes better screenshots.
Karin
And I see what you mean about the dark mode.
Karin
I think I understand.
Ookami Kenran