THE BASICS OF PROFILE CUSTOMIZATION

guide made by

Table of contents

  1. Who I am
  2. What to expect
  3. Accessibility
  4. Tutorial & FQA
    1. List of codes that got disabled
    2. Use of <style> </style> tags
    3. Individual <style> tags for each code
    4. Why your code isn't working
    5. Code disappeared after editing text in profile bio
    6. HTML markdown in profile bio
    7. Prevention of codes disappearing
  5. Codes
    1. Elements in the header
    2. Elements in the profile card
    3. Elements in the bot card
      1. Normal bot cards
      2. Halloween bot cards
      3. Christmas bot cards
      4. 2025 bot cards
    4. Other/extra elements ("# characters", latest dropdown, etc.)
  6. Other Resources
    1. Luna's links/guides
    2. Oishii's guide
    3. W3School's links
    4. WebAIM's link
    5. Ursium's CSS template
  7. Where To Find Help

revamped on 11/01/25

This is only a simple guide.

Only simple elements will be shown and explained here, and not a lot of crazy things will be coded here. For a more fleshed out and complete CSS explanation, I recommend Luna's guide. If you are a visual learner, you can check out Oishii's visual learner's guide.


WHO I AM

Hello! I'm ryuunia_, but you can just call me reo. You might think I'm just a random bot creator who happened to love css and, honestly, yeah, I am. I kinda just spawned into JanitorAi's community and found out about CSS. I studied it in college. Pretty convenient, don't you think so? Let's not focus on that useless stuff. I used to be just like you. Seeing beautiful profiles, and being confused on how to do them. But, friends helped me along the way, and now I'm here making a guide.

WHAT TO EXPECT WHEN PROFILE EDITING

If you are new to CSS, then expect your profile to not look good at first.

Your profile may look WAY different on mobile and desktop, except if you knew how some ways how to make your profile for desktop users still look fine on mobile.
Since mobile and desktop have different sizes in their screen, on mobile, your profile may look a bit compressed.

ACCESSIBILITY

please... please read this.

You might be asking, "What is 'accessibility'?", well, let me answer it. To make it easy to explain, accessibility is making your profile easy to access and read. The pretty profile doesn't matter, the accessibility of it does. If your profile is pretty and aesthetic but it's hard for other users to read the text and elements, then what's the point of having an aesthetic profile if it can't even be used? That's why accessibility is important. Really, really important. I'm not saying that you can't have a good looking profile to be more appealing to other users who are viewing your profile, no. If at all, that is me. But remember, accessibility is important. You can have an aesthetic and appealing profile with cute fonts and bright colors, but if it cannot be accessed, especially by people with dyslexia and people who easily get eye strains, then there's no point to it. I won't mention any names, but you get what I mean, at least hopefully you do.

TUTORIAL & FQA

"I tried to put the code in my bio but it didn't work!!!" It must be because you put your code in the <Source code> section, which let me tell you, CSS doesn't work there. "So where do I put my codes for it to work??!"

Let me show you.

You will need to go to the Settings page. How to do so?

On the main page, click on your profile picture in the top right corner, as shown below.

After, you will see this menu with different tabs. Click on where it says Settings, under the 'Blocks' tab as such.

And then you will be directed into this page, shown as such. Congratulations! This is where you will put all your codes from now on.

Or you can do this:

On your profile, click the Edit profile button.

At the top, you'll see a "Edit CSS" button. Click that.

Then you'll see this pop up. Congratulations! You can also edit your CSS here.


Now, let's answer some questions from others that need answers.

 What are the codes that got disabled/deleted?
  • Music embeds (audio players and spotiy embeds)
  • Url("") (mask images, custom profile/bot card backgrounds, and the star on the bot card)
  • Media query (@media)
  • Keyframes (@keyrames)
  • Variables (var-)
  • Css notes (Not visible in the "Edit CSS" panel, still visible in the about me, will look like this: */ /*)
  • Custom fonts
 Do I have to put the codes in the "<style>" and "</style>" tags?

Yes, otherwise, the code will not work. For example:

1
2
3
4
5
6
7
8
<style>
.css-1uodvt1 {
    padding-top: 0px;
    flex-direction: column;
    justify-items: center;
    text-align: center;
}
</style>
 In that case, do I have to put the codes in their own individual <style> tags?

Actually, the answer is no. In my opinion, and other's opinions, it takes too much space. You can put all your codes in one <style> </style> to not take up much space, and saves you tons of time. For example:

<style>
.css-1uodvt1 {
    padding-top: 0px;
    flex-direction: column;
    justify-items: center;
    text-align: center;
}

/* Crystal Center */
.css-hjkukh {
    padding-top: 0px;
    flex-direction: row;
    justify-items: center;
    text-align: center;
    padding-left: NUMBERpx; /* adjusts the positioning of the badges */
}
</style>
 Okay, I put everything in correctly, but why is my code not working?

The cause of this can be many things. But some could be:

  1. Missing letters
    • Missing letters or characters could be semi-colons (;), dots (.), commas (,), etc.
      Missing characters and symbols could affect your code, and in return, make it not work.
  2. Missing words/sections

    • This is a mistake I see lot of people make. When you see a code and you see
      a part of it that you think it's useless, trust me, it isn't. Every section in a code
      is useful in one way or another, and if you delete it, the code will not work
      because that specific section of the code is gone.
    • Also be careful about single words and letters. When deleting things like, for example,
      [NUMBER], make sure you didn't accidentally delete any letters or words. Your
      code won't work, if even one letter or word is missing.
  3. You didn't put it in the <style> </style> tags.
    • Remember as I said above? Putting your codes in the <style> </style> tags are
      what are going to make your code appear. Not doing so will make the code not
      work.
  4. The class id is a unique id.
    • Some elements have unique ids. Unique ids are when the class id is different for
      each person. Some include the username, followers, etc. To find your own code, you
      can find it in inspect element.
  5. There's one or more extra characters in the code.

    • When you see something like [STYLE], make sure to delete the brackets. They interfere with the code.
    • When you're using a div element (<div="">), make sure there isn't any extra pair of quotation marks. They also interfere with the code.
 All my codes disappeared, and I didn't do anything! I just wanted to change the text in my bio!

When you click edit profile, you'll see the regular menu where you edit your text. DO NOT CHANGE ANYTHING VIA THE SOURCE CODE. It WILL completely remove all your css. If you want to change a text, add an image, or any other thing, you'd have to do it manually.

 How can I do that?

It's easy! All you need is some html:

text - <p>text here</p>
 → bold text - <strong>bold text here</strong>
 → italic text - <em>italic text here</em>
 → colored text - <p><span style="color:hex-code-here">text here</span></p> (You can replace the hex code with another color value like rgb/rgba)
image - <img src="image link here">
hyperlink - <a target="_blank" rel="noopener noreferrer nofollow" href="link-here">text here</a>
heading - <h1>heading text here</h1> (h1 can be changed from h1 all the way to h6
 → Though I do want to note that headings can't be done in the bio description.
line break - <hr> or ---

 What can I do to prevent my codes from just... disappearing?

I recommend to store all your codes in a document or a notepad. Don't be like me. I don't do that.

CODES

Elements emphasized with blue are the ones we are going to edit.

I will not cover on how to add fonts to text elements. If you want to find out, you can dm me on my discord or ping/ask me in JanitorAi's discord server, specifically in the bot creator's CSS discussion thread.
I will not cover :hover, :after, and :before elements in regards to text.

CSS colors can be found here.

Class ids (.css-######) labeled as ".class-id" means that the class id is a unique class id. You can find them using inspect element.

this section is a wip

 Elements in the header 

/* JanitorAi beta - combined */
.glow-logo:before /* border */ {
    content: "";
    background: HEX/COLOR; /* You can replace HEX/COLOR with a hex code of your choice, or a color. */
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 250%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    opacity: 1;
    border-radius: NUMBERpx; */ Replace NUMBER with a value (e.g. 5px). */
}

.css-1qj3ulc { /* "JanitorAi" text */
    font-weight: VALUE;  /* Replace VALUE with a number or word */
    font-size: NUMBERpx; /* Replace NUMBER with a value. For this, I recommend anything between 20-30px. */
    color: HEX/COLOR;
    margin-bottom: 0px;
}

.css-bda9ez {
    font-size: NUMBERpx; /* Replace NUMBER with a value. For this, I recommend anything between 15-18px. */
    color: HEX/COLOR;
    font-weight: VALUE;
    margin-left: 5px;
}

.glow-logo:after { /* Optional, but this is to change the background. */
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: HEX/COLOR;
    left: 0;
    top: 0;
    border-radius: NUMBERpx; */ Replace NUMBER with a value. You can match it with the one on the .glow-logo:before class. */
}

How it will end up looking:

1
2
3
4
5
6
.css-i6srjg { /* Search bar */
    background: HEX/COLOR;
    border: NUMBERpx STYLE HEX/COLOR;
    border-radius: NUMBERpx;
    color: COLOR; /* When you search something, the color of the text will be what you set here. */
}

How it will end up looking:

*/ "Create a character" button */
.css-1yhasuw { /* "Create a character" text */
    color: HEX/COLOR;
}

.css-1yhasuw a:hover { /* Color of the text after hovering over the button */
    color: #HEX/COLOR;
}

.glow-on-hover:after { /* Appearance of button before hovering over it */
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: COLOR;
    left: 0;
    top: 0;
    border-radius: NUMBERpx;
}

.glow-on-hover:before { /* Button after hovering over it */
    content: "";
    background: COLOR;
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    opacity: 0;
    transition: opacity .2s ease-in-out;
    border-radius: NUMBERpx;
}

How it will end up looking:

.css-fss3o9 { /* Announcement button /*
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    border-radius: NUMBERpx;
}

.css-fss3o9:hover, .css-fss3o9[data-hover] { /* Background color when hovering over it */
    background: COLOR;
}

.css-xl71ch svg { /* The icon on the button */
    fill: COLOR;
}

How it will look:

1
2
3
4
.css-18yip8r { /* Notifications button */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
}
1
2
3
.css-11o5hw8 svg { /* Notification icon color */
    fill: COLOR;
}
.css-2zp1xp { /* Circle when you have a notification */
    width: 0.5rem;
    height: 0.5rem;
    background-color: COLOR; /* Changes the color of the circle */
    border-radius: 9999px;
    position: absolute;
    top: 1px;
    right: 1px;
    outline: COLOR solid 2px; /* Changes the color of the outline around the circle */
}

How it will look:

The header is done!

 Elements in the profile card 

Little note first: the profile card is made up of various layers. If a code doesn't work, try changing the class id to another one that belongs to the profile card.

1
2
3
.class-id, .class-id, .class-id, .css-0 { /* Changing the background of the profile card to a solid color */
    background: COLOR;
}
1
2
3
.class-id .css-0 { /* Changing the color of the border around the profile card */
    background: COLOR !important;
}

How it will look:

1
2
3
4
5
6
.css-1uodvt1 { /* Centering the pfp, username, follower count, and join date (optional. If you don't want this, you don't have to implement it.*/
    padding-top: 0px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

How it will look:

^^ Notice how the username isn't centered unlike the other text. This happens a lot more often than you think. We will fix this issue.

1
2
3
.css-70qvj9 { /* Forces the username to center if it isn't */
    justify-content: center;
}
1
2
3
4
5
6
7
.css-18bnokj { /* Profile picture settings */
    object-fit: cover;
    box-shadow: none; /* Removes the annoying box-shadow */
    height: 150px; /* Changes the height of your profile picture */
    width: 150px; /* Changes the width of your profile picture */
    border-radius: NUMBERpx;
}
1
2
3
4
5
6
.class-id { /* Your username */
    font-weight: VALUE;
    font-size: NUMBERpx;
    line-height: 1.2;
    color: HEX/COLOR;
}
1
2
3
4
5
.css-1ciz3n { /* Follower count */
    font-size: NUMBERpx;
    color: HEX/COLOR;
    font-weight: VALUE;
}
1
2
3
4
5
.css-wjj1lc { /* Join date */
    font-size: NUMBERpx;
    color: HEX/COLOR;
    font-weight: VALUE;
}

or you can make it disappear by doing this:

1
2
3
.css-wjj1lc { /* Join date */
    display: none;
}

How it will look:

Note: Make sure your profile picture isn't too big, as it can block some buttons.

1
2
3
.css-y9k5u7 { /* Centers the "follow" and "options" button
    justify-content: center;
}
.Btn {
    height: 40px;
    border: none;
    border-radius: 10px;
    background: COLOR; /* Changes the color on the outer part of the button */
    background-size: 250%;
    background-position: left;
    color: HEX/COLOR; /* Changes the color of the "Follow" and "Following" text */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
    padding: 0 1rem;
}
.Btn:before { /* Optional, changes the background color of the button */
    position: absolute;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2px);
    height: 90%;
    border-radius: NUMBERpx;
    transition-duration: 1s;
    background-color: COLOR;
    background-size: 200%;
}

How it will look:

1
2
3
4
5
.css-15w88gn { /* "Options" button */
    background: COLOR;
    border: NUMBERpx STYLE HEX/COLOR;
    color: HEX/COLOR;
}
1
2
3
.css-15w88gn:hover, .css-15w88gn[data-hover] { /* Change the color of the background when hovering over the button */
    background: COLOR;
}
1
2
3
.css-15w88gn:active, .css-15w88gn[data-active] { /* Change the background color after clicking on the button */
    background: COLOR;
}
1
2
3
4
5
.css-bp2fv5 { /* Container for the "Block this creator" button */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    border-radius: NUMBERpx;
}
1
2
3
4
.css-hab1hf { /* "Block this creator" text */
    background: inherit; /* Makes the background the same color as the container */
    color: HEX/COLOR;
}

How it will look:

The profile card is done!

 Elements in the bot card 

Note: The class ids are different for each bot card type (normal ones, the halloween, the christmas, and the 2025).

1
2
3
.css-dltla, .css-1jf56se, .css-1s5evre, .css-12vfojg, .css-0 { /* Removes the border around the bot card */
    background: none !important;
}
Normal bot cards:
1
2
3
4
5
.css-1s5evre { /* Normal bot cards */
    background: COLOR;
    border-radius: NUMBERpx;
    border: NUMBERpx STYLE COLOR;
}
1
2
3
4
5
.css-pz44gm { /* Bot name */
    color: COLOR;
    font-weight: VALUE;
    text-align: center; /* Makes the bot name be in the center */
}
1
2
3
.css-1m151rf { /* Username on bot card */
    color: COLOR;
}
1
2
3
4
5
6
7
.css-96l1id { /* Color of text in the preview */
    padding: 0px;
    padding-bottom: 0px;
    font-size: 0.7rem;
    margin-top: calc(var(--chakra-space-1)* -1);
    color: HEX/COLOR;
}
1
2
3
4
5
6
7
.css-1lgnt2x { /* Line connecting to star */
    border-top: 1px solid HEX/COLOR;
    width: 80%;
    position: relative;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
1
2
3
4
5
6
.css-hl99y6 { /* Star connecting to the line */
    position: absolute;
    right: -45px;
    top: -38px;
    filter: FILTER; /* Replace FILTER with a standard filter like a grayscale, or you can convert a hex code to a CSS filter. Links will be in the resources */
}
1
2
3
4
5
.css-wexxj8 { /* Chat count ribbon */
    border-top-left-radius: 4px; /* Number can be edited if needed */
    border-bottom-left-radius: 4px; /* Number can be edited if needed */
    background: COLOR;
}
1
2
3
.css-euh5x6 { /* Text on chat count ribbon */
    color: HEX/COLOR;
}

How it will look:

Halloween bot cards:
1
2
3
4
5
6
7
8
9
.css-1xy4dr7 { /* The background color */
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: NUMBERpx;
    pointer-events: none;
    background: COLOR;
}
1
2
3
4
5
.css-2zo8pn { /* Bot name */
    text-align: center;
    font-weight: normal;
    color: HEX/COLOR;
}
1
2
3
4
5
6
7
.css-1ov83hg { /* Line on the halloween bot card */
    border-top: 1px solid HEX/COLOR;
    width: 80%;
    position: relative;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
1
2
3
4
5
6
.css-1bgu6ps { /* Star on halloween bot card */
    position: absolute;
    right: -45px;
    top: -38px;
    filter: FILTER;
}

How it will look:

Christmas bot cards:
1
2
3
.css-v57joh, .css-dltla, .css-1g0ng5r, .css-0 { /* change the color of the background */
    background: COLOR;
}
1
2
3
.css-v57joh:hover, .css-v57joh[data-hover] { /* change the color of the box shadow when hovering */
    box-shadow: 0 0 NUMBERpx COLOR;
}
1
2
3
4
5
6
.css-1qri81 { /* bot name */
    color: COLOR;
    font-size: NUMBERpx;
    text-align: center;
    font-weight: VALUE; /* changes the thickness of the text */
}

How it will look:

2025 bot cards:
1
2
3
.css-1n07wna, .css-dltla, .css-s64spq, .css-unmi70, .css-127dwlr { /* changes the color of the green background */
    background: #232c3d;
}
1
2
3
.css-1n07wna:hover, .css-1n07wna[data-hover] { /* color of the box shadow when hovering over the bot card */
    box-shadow: COLOR 0px 0px NUMBERpx;
}
1
2
3
4
5
6
7
.css-kesdt6 { /* bot name */
    color: COLOR;
    font-size: NUMBERpx;
    text-align: center;
    font-weight: VALUE;
    text-transform: uppercase;
}
1
2
3
4
.css-18reivm { /* username on 2025 bot card */
    text-shadow: COLOR 0 0 NUMBERpx;
    font-family: FONT;
}

How it will look:

The bot cards are done!

 Other/Extra elements 

1
2
3
4
5
.Btn2-purple { /* "# characters" button */
    background: COLOR;
    color: COLOR;
    border-radius: NUMBERpx;
}
1
2
3
.Btn2-purple:before { /* optional - change the color of the black background */
    background-color: black;
}
1
2
3
4
.css-9lg76n { /* "# characters" text */ 
    font-family: FONT;
    z-index: 10000;
}

How it will look:

1
2
3
4
5
.css-3rot3 { /* "Search for characters" bar */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    border-radius: NUMBERpx;
}
1
2
3
4
5
._searchInput_c7epr_1:hover, ._searchInput_c7epr_1:focus { /* color of border when hovering over the search bar */
    border: NUMBERpx STYLE COLOR;
    box-shadow: 0 0 0 1px COLOR;
    outline: none;
}
1
2
3
4
5
.css-19akvax:focus-visible, .css-19akvax[data-focus-visible] { /* color of border when actively typing */
    z-index: 1;
    border-color: COLOR;
    box-shadow: COLOR 0px 0px 0px 1px;
}

How it will look:
normal           hovering over it        actively typing

1
2
3
4
.css-1n2in4t { /* filter button */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
}
1
2
3
.css-1n2in4t svg { /* color of the filter icon */
    fill: COLOR;
}
1
2
3
4
5
6
7
.chakra-ui-dark .css-irb94a:not([data-theme]), [data-theme="dark"] .css-irb94a:not([data-theme]), .css-irb94a[data-theme="dark"] { /* tag menu */
    background: COLOR;
    color: COLOR;
    backdrop-filter: blur(NUMBERpx); /* or set as none if you don't want the blurred background */
    border: NUMBERpx STYLE COLOR;
    border-radius: NUMBERpx;
}
1
2
3
4
5
6
.css-1w58nos { /* tags in the menu */
    background: COLOR; /* you can also make it transparent */
    border: NUMBERpx STYLE COLOR !important;
    box-shadow: none !important;
    color: COLOR;
}
1
2
3
4
5
.css-oqdsp6 { /* active on the tag */
    background: COLOR;
    border: NUMBERpx STYLE COLOR !important;
    color: COLOR;
}

How it will look:

The tag menu:

Latest dropdown!! Oh boy, it's gonna be long...

1
2
3
4
5
.transparent .react-select__control { /* background, border and whatnot */
    background: transparent;
    border-radius: NUMBERpx;
    height: 40px;
}
1
2
3
.dark .react-select__control:hover, .transparent .react-select__control:hover, .react-select__menu-portal .react-select__control:hover { /* color of border when hovering over the box */
    border-color: COLOR;
}
1
2
3
.dark .react-select__placeholder, .transparent .react-select__placeholder, .dark .react-select__single-value, .transparent .react-select__single-value, .react-select__menu-portal .react-select__placeholder, .react-select__menu-portal .react-select__single-value { /* "Latest" text why the fuck is there so much class ids */
    color: COLOR;
}
1
2
3
.dark .react-select__indicator-separator, .transparent .react-select__indicator-separator, .react-select__menu-portal .react-select__indicator-separator { /* color of seperator */
    background-color: COLOR;
}
1
2
3
.css-8mmkcg { /* arrow color */
    fill: COLOR;
}
1
2
3
4
5
6
7
8
.dark .react-select__menu, .transparent .react-select__menu, .react-select__menu-portal .react-select__menu { /* background of the menu */
    background-color: COLOR;
    font-family: FONT;
    z-index: 10000;
    border-color: COLOR;
    box-shadow: 0 NUMBERpx NUMBERpx COLOR; /* or just set as none */
    backdrop-filter: blur(10px);
}
1
2
3
4
5
6
.dark .react-select__option, .transparent .react-select__option, .react-select__menu-portal .react-select__option { /* background of all the clickable options idk how to explain it */
    background-color: transparent;
    color: COLOR;
    z-index: 10000;
    border-bottom: NUMBERpx solid COLOR; /* or just set as none */
}
1
2
3
4
.dark .react-select__option:hover, .transparent .react-select__option:hover, .react-select__menu-portal .react-select__option:hover { /* hovering over the clickable options */
    background-color: COLOR;
    cursor: pointer;
}
1
2
3
4
.dark .react-select__option--is-selected, .transparent .react-select__option--is-selected, .react-select__menu-portal .react-select__option--is-selected { /* color of background when actively clicking on an option */
    background-color: COLOR;
    color: COLOR;
}

How it will look:

 Your profile is done, and the end product will look like this! 

OTHER RESOURCES

 From: LunaXLee

Luna's markdown, HTML, and basic CSS knowledge rentry
Luna's CSS guide & code haven

 From: Oishiidesu

Oishii's visual guide for visual learners

 From: W3school

Border styling (solid, dashed, dotted, etc.)
Font-weight values
HTML color names
All the web safe fonts

 From: WebAIM

Challenges and solutions regarding accessibility

 From: ursium

Their CSS template

 From: Isotropic

Converting hex codes to CSS filters

WHERE TO FIND HELP

There are multiple places you can go to to find help! Those places are:

go back to the very top

Edit
Pub: 27 Jul 2024 08:09 UTC
Edit: 30 Jan 2025 11:57 UTC
Views: 6292
Auto Theme: Dark