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. Codes that affect all bot cards
      2. Christmas bot cards
      3. 2025 bot cards
      4. Valentines bot cards
      5. Beach 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
    6. Isotropic's link
    7. Puppy/permanent's list of CSS templates
  7. Where To Find Help

revamped on 20/09/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_ on both jai and discord, 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.

Some challenges ae noted down in this website, along with solutions on how to solve them. It really helps with accessibility.

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?

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 'Media Library' tab as such.

And then you will be directed into the "Account Information" page. You can click on "show editor" under the About Me heading. This is where you can throw in your HTML and CSS.

Or you can use the in-page CSS editor:

On your profile, on the profile card in the top right, click the paint palette icon. A box at the bottom will appear, which is the CSS Editor Tool.

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)
  • Variables (var-)
  • CSS notes (Not visible in the CSS Editor, still visible in the about me, will look like this: */ /*)
  • Custom fonts
    Media query and keyframes are back!
★　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:

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<style>
.css-1uodvt1 {
    padding-top: 0px;
    flex-direction: column;
    justify-items: center;
    text-align: 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, o a missing quotation mark. 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 CSS forum's casual 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.

★　Elements in the header　★

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* JanitorAi beta - combined */
.pp-top-bar-logo { /* container */
    background: COLOR; /* replace with hex code/color value (red, white, etc.) */
    border: [NUMBER]px [STYLE] [COLOR]; /* replace including the brackets with their corresponding values (STYLE can be solid, dotted, etc.) */
    border-radius: [NUMBER]px; /* roundness of the corners */
}

.pp-top-bar-logo-name { /* "JanitorAI" text */
    font-weight: [VALUE]; /* replace VALUE with a keyword/number (400, bold, etc.) */
    font-size: [NUMBER]px; /* you can also use --rem. the original size is 1.875rem */
    color: COLOR;
}

.pp-top-bar-logo-sub-name { /* "Beta" text */
    font-size: [NUMBER]px; /* default size is 1rem */
    color: [COLOR];
    font-weight: [VALUE];
}

How it will end up looking:

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.pp-top-bar-search { /* search bar */
    color: [COLOR]; /* color of text when searching something */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [NUMBER]px;
}

.css-j1p8gu { /* magnifying class icon */
    color: [COLOR]; /* color of the magnifying glass */
    opacity: 1; /* visibility of the icon, the default is 0.4 */
}

How it will end up looking:

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
*/ "Create a character" button */
.pp-top-bar-create-char { /* "Create a Character" text */
    color: [COLOR];
}

.pp-top-bar-create-char:hover { /* color of text when hovered over */
    color: COLOR;
}

.glow-on-hover:after { /* appearance of button: before hover */
    background: [COLOR];
    border-radius: [NUMBER]px;
}

.glow-on-hover:before { /* appearance of button: after hover */
    background: linear-gradient([NUMBER]deg, [COLOR], [COLOR]); /* --deg is the direction of the gradient */
    border-radius: [NUMBER]px;
}

How it will end up looking:
1st image before hovering, 2nd image after hovering

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
._notificationsButton_16xfi_7 { /* notifications button */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [NUMBER]; /* percentage can also work */
}

._notificationIcon_16xfi_31 { /* color of bell icon */
    color: [COLOR];
}

._notificationsBadge_16xfi_41 { /* new notification indication/red dot */
    background: [COLOR];
    border-radius: [VALUE];
    color: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
}

._notificationsButton_16xfi_7:hover { /* hovering over button */
    background: [COLOR];
}

._notificationsButton_16xfi_7:hover ._notificationIcon_16xfi_31 { /* color of bell after hover */
    color: [COLOR];
}

._notificationsPopover_16xfi_72 { /* notifications menu */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [NUMBER]px;
}

._popoverHeader_16xfi_100 { /* border separating header */
    border-bottom: [NUMBER]px [STYLE] [COLOR];
}

._popoverTitle_16xfi_109 { /* notifications title */
    font-size: [NUMBER]px;
    font-weight: [VALUE];
    color: [COLOR];
}

._unreadIndicator_18k4v_23 { /* unread indicator */
    background: linear-gradient([NUMBER]deg, [COLOR], [COLOR]);
}

._subjectUnread_18k4v_116 { /* "new comment on ---" */
    background: linear-gradient(to right, [COLOR], [COLOR]);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

How it will look:

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
._notificationsButton_1p8j9_7 { /* announcements button */
    background: #1a202c;
    border: 2px solid #718fb7;
    border-radius: 50%;
}

._notificationsButton_1p8j9_7:hover { /* background color on hover */
    background: [COLOR];
}

._notificationIcon_1p8j9_31{ /* color of announcement icon */
    color: [COLOR];
}

._notificationsPopover_1p8j9_72 { /* announcements menu */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [NUMBER]px;
}

._popoverTitle_1p8j9_111 { /* popover title */
    font-size: [NUMBER]px; /* default is 1rem */
    font-weight: [VALUE];
    color: [COLOR];
}

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
4
5
.pp-uc-background { /* profile card */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [NUMBER]px;
}
⎗
✓
1
2
3
.class-id, .class-id, .css-0 { /* gets rid of the gradient */
    background: transparent !important;
}

How it will look:

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

How it will look:

⎗
✓
1
2
3
.css-70qvj9 { /* Forces the username to center if it isn't */
    justify-content: center;
}
⎗
✓
1
2
3
4
5
6
.pp-uc-avatar { /* profile picture */
    width: [NUMBER]px;
    height: [NUMBER]px;
    border-radius: [VALUE];
    box-shadow: none; /* removes the box-shadow under the picture */
}
⎗
✓
1
2
3
4
5
.pp-uc-title { /* username */
    font-weight: [VALUE];
    font-size: [NUMBER]px;
    color: [COLOR];
}
⎗
✓
1
2
3
4
5
.pp-uc-followers-count { /* follower count */
    font-size: [NUMBER]px;
    color: [COLOR];
    font-weight: [VALUE];
}
⎗
✓
1
2
3
4
5
.pp-uc-member-since { /* join date */
    font-size: [NUMBER]px;
    color: [COLOR];
    font-weight: [VALUE];
}
⎗
✓
1
2
3
.css-hjkukh { /* centering the badge(s) */
    justify-content: center;
}

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;
}
⎗
✓
1
2
3
4
5
.pp-uc-follow-button { /* follow button */
    border-radius: [VALUE];
    background: [COLOR]; /* outer border of the button */
    color: [COLOR]; /* color of follow/following text */
}
⎗
✓
1
2
3
4
5
.Btn:before { /* inner background of follow button */
    background-color: [COLOR];
    color: [COLOR];
    border-radius: [VALUE];
}
⎗
✓
1
2
3
4
5
6
.pp-uc-options-menu { /* options button */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [VALUE];
    color: [COLOR];
}
⎗
✓
1
2
3
.css-15w88gn:hover, .css-15w88gn[data-hover] { /* changes color of background on hover */
    background: [COLOR];
}
⎗
✓
1
2
3
.css-15w88gn:active, .css-15w88gn[data-active] { /* changes background color after click */
    background: [COLOR];
}
⎗
✓
1
2
3
4
5
.css-bp2fv5 { /* container for the "Block this creator" button */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [NUMBER]px;
}
⎗
✓
1
2
3
4
.css-hab1hf { /* "Block this creator" text */
    background: inherit; /* makes the background the same color as the container */
    color: [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).

Codes that affect all bots:
⎗
✓
1
2
3
4
5
.css-zgqw37 { /* bot name */
    color: [COLOR];
    font-size: [NUMBER]px;
    text-align: center; /* centers the bot name */
}
⎗
✓
1
2
3
4
.pp-cc-creator-name { /* username on bot card */
    color: [COLOR];
    font-size: [NUMBER]px;
}
⎗
✓
1
2
3
4
.pp-cc-description { /* text preview */
    color: [COLOR];
    font-size: [NUMBER]px;
}
⎗
✓
1
2
3
4
.pp-cc-star-line { /* line connecting to star */
    border-top: [NUMBER]px [STYLE] [COLOR];
    width: [NUMBER]%; /* changes the length of the line */
}
⎗
✓
1
2
3
.pp-cc-star { /* star connecting to the line */
    filter: [FILTER]; /* replace with a standard filter like a grayscale, or you can convert a hex code to a CSS filter */
}
⎗
✓
1
2
3
4
5
.pp-tag-limitless { /* limitless tag */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    color: [COLOR];
}
⎗
✓
1
2
3
4
5
.pp-cc-tags-regular { /* regular tags */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    color: [COLOR];
}
⎗
✓
1
2
3
4
5
.pp-cc-tags-custom { /* custom tags */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    color: [COLOR];
}
⎗
✓
1
2
3
4
.pp-cc-tokens-count { /* token count */
    color: [COLOR];
    text-shadow: none; /* removes the text shadow from the text */
}
⎗
✓
1
2
3
4
5
.pp-cc-ribbon-wrap { /* chat count ribbon */
    border-top-left-radius: [VALUE];
    border-bottom-left-radius: [VALUE];
    background: [COLOR];
}
⎗
✓
1
2
3
.pp-cc-chats { /* chat count on ribbon */
    color: [COLOR];
}
⎗
✓
1
2
3
4
5
.css-1s5evre { /* main bot container */
    background: [COLOR];
    border-radius: [VALUE];
    border: [NUMBER]px [STYLE] [COLOR];
}
Christmas bot cards:
⎗
✓
1
2
3
.css-v57joh:hover, .css-v57joh[data-hover] { /* box shadow when hovering over: christmas bot card */
    box-shadow: 0 0 [NUMBER]px [COLOR]; /* you can also set this as none for no box shadow */
}
2025 bot cards:
⎗
✓
1
2
3
.css-1n07wna:hover, .css-1n07wna[data-hover] { /* color of the box shadow when hovering over the bot card */
    box-shadow: 0 0 [NUMBER]px [COLOR];
}
⎗
✓
1
2
3
.css-wtoukl { /* gets rid of the green glow on the username */
    text-shadow: none;
}
Valentines bot cards:
⎗
✓
1
2
3
.css-12lnk4a:hover, .css-12lnk4a[data-hover] { /* box-shadow when hovering over valentines bot card */
    box-shadow: 0 0 [NUMBER]px [COLOR];
}
Beach bot cards:
⎗
✓
1
2
3
.css-1dl87xx:hover, .css-1dl87xx[data-hover] { /* box-shadow when hovering over beach bot card */
    box-shadow: 0 0 [NUMBER]px [COLOR];
}

The bot cards are done!

★　Other/Extra elements　★

⎗
✓
1
2
3
4
.pp-tabs-wrapper { /* characters tab */
    background: [COLOR];
    border-bottom: [NUMBER]px [STYLE] [COLOR];
}
⎗
✓
1
2
3
.css-1jj3srb[aria-selected=true], .css-1jj3srb[data-selected] { /* "characters" text color */
    color: [COLOR];
}
⎗
✓
1
2
3
4
.pp-tabs-indicator { /* neon line at the bottom */
    background: [COLOR];
    box-shadow: 0 0 [NUMBER]px [COLOR]; /* or set as none */
}

How it will look:

⎗
✓
1
2
3
4
5
.Btn2-purple {
    background: [COLOR];
    color: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
}
⎗
✓
1
2
3
.Btn2-purple:before { /* optional - change the color of the black background */
    background: [COLOR];
}
⎗
✓
1
2
3
4
5
.Btn2-purple:hover { /* color of text when hovered over */
    color: [COLOR];
    text-shadow: 0 0 [NUMBER]px [COLOR];
    border-color: inherit;
}

How it will look:

⎗
✓
1
2
3
4
5
.css-3rot3 { /* "search for characters" bar */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [NUMBER]px;
}
⎗
✓
1
2
3
4
5
._searchInput_1tkkb_1:hover, ._searchInput_1tkkb_1:focus { /* color of border when hovering over the search bar */
    border: 1px [STYLE] [COLOR];
    box-shadow: 0 0 0 1px [COLOR];
    outline: none;
}
⎗
✓
1
2
3
._searchInput_1tkkb_1 { /* color of text when actively typing */
    color: [COLOR];
}

How it will look:

⎗
✓
1
2
3
4
.pp-fl-filter-button { /* filter button */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
}
⎗
✓
1
2
3
.pp-fl-filter-button svg { /* color of the filter icon */
    fill: [COLOR];
}
⎗
✓
1
2
3
4
5
6
.chakra-ui-dark .css-1dljitb:not([data-theme]), [data-theme="dark"] .css-1dljitb:not([data-theme]), .css-1dljitb[data-theme="dark"] { /* tag menu */
    background: [COLOR];
    color: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [VALUE];
}
⎗
✓
1
2
3
4
.css-dcyl1x { /* "filters" heading */
    color: [COLOR];
    font-weight: [VALUE];
}
⎗
✓
1
2
3
4
.css-178jenf { /* "tags" subheading */
    color: [COLOR];
    font-weight: [VALUE];
}
⎗
✓
1
2
3
4
5
6
.css-1w58nos { /* tags in the menu */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR] !important;
    box-shadow: none !important; /* or you can add one if you'd like */
    color: [COLOR];
}
⎗
✓
1
2
3
4
5
.css-oqdsp6 { /* active on the tag */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR] !important;
    color: [COLOR];
}

How it will look:

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

⎗
✓
1
2
3
4
5
.transparent .react-select__control { /* background, border and whatnot */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [VALUE];
}
⎗
✓
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
4
.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 */
    color: [COLOR];
    font-weight: [VALUE];
}
⎗
✓
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
.dark .react-select__menu, .colored .react-select__menu, .transparent .react-select__menu, .react-select__menu-portal .react-select__menu { /* removes gray background */
    background: transparent;
    border: none;
}
⎗
✓
1
2
3
4
5
.css-qr46ko { /* container of the latest dropdown */
    background: [COLOR];
    border: [NUMBER]px [STYLE] [COLOR];
    border-radius: [NUMBER]px;
}
⎗
✓
1
2
3
4
5
.dark .react-select__option, .transparent .react-select__option, .react-select__menu-portal .react-select__option { /* clickable options */
    background: [COLOR];  /* default is transparent */
    color: [COLOR];
    border-bottom: [NUMBER]px [STYLE] [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];
    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

★　From: Puppy/permanent

Class ID breakdown
List of CSS templates (in CSS forum)

WHERE TO FIND HELP

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

go back to the very top

Warning

LINK

You are about to visit a link which has been flagged with the above content warnings. Do you wish to continue?

Cancel
Edit
Raw PDF PNG

Pub: 27 Jul 2024 08:09 UTC

Edit: 21 Sep 2025 04:16 UTC

Views: 24616

Auto Theme: Dark

new·what·how·langs·contacts