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
      5. Valentines 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 14/03/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.

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?

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)
  • Variables (var-)
  • Css notes (Not visible in the "Edit CSS" panel, still visible in the about me, will look like this: */ /*)
  • Custom fonts
    Media quey 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 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　★

⎗
✓
 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
/* JanitorAi beta - combined */
.glow-logo { /* container of the button */
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: NUMBERpx STYLE COLOR;
    outline: none;
    text-align: center;
    background: COLOR; /* color of the background for the button */
    position: relative;
    z-index: 0;
    border-radius: NUMBERpx; /* roundness of the button */
    box-shadow: NUMBERpx NUMBERpx NUMBERpx COLOR; /* it's not recommended to use this and just use filter: drop-shadow(), so you can just set this as none, example: box-shadow: 0 0 6px white; */
    text-shadow: NUMBERpx NUMBERpx NUMBERpx COLOR; /* adds a shadow to the text, example: text-shadow: 0 0 6px white; */
    backdrop-filter: NUMBERpx; /* adds a blur effect to the background. isn't visible if the background is opaque */
}

.css-e8xvxi h2 { /* "JanitorAI" text */
    font-weight: VALUE; /* replace VALUE with a word/number. example: 400, bold, etc. */
    font-size: NUMBERpx; /* you can also use --rem. the original size is 1.875rem */
    line-height: 1.33;
    color: COLOR; /* replace with a hex code or word. example: #718fb7, white, etc. */
    margin-bottom: 0px;
}

.css-bda9ez { /* "Beta" text
    font-size: NUMBERpx; /* default size is 1rem */
    color: COLO;
    font-weight: VALUE;
    margin-left: NUMBERpx; /* space between the "beta" and "JanitorAI" word. default is 0.25rem */
}

How it will end up looking:

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.css-i6srjg { /* search bar */
    color: COLOR; /* color of text when searching something */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    border-radius: NUMBERpx;
}

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

How it will end up looking:

⎗
✓
 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
*/ "Create a character" button */
.css-1yhasuw { /* "Create a character" text */
    color: COLOR;
}

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

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

.glow-on-hover:before { /* appearance of button: afte hovering */
    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:
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
.css-18yip8r { /* notifications button */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    border-radius: NUMBERpx;
    color: COLOR; /* color of bell icon */
}

.css-2zp1xp { /* dot when you have a notification */ 
    background: COLOR; /* color of dot */
    outline: NUMBERpx STYLE COLOR; /* outline around the dot */
}

.css-18yip8r:hover, .css-18yip8r[data-hover] { /* hovering over the button */
    background: COLOR; /* changes the color of the background */
    color: COLOR; /* changes the color of the bell icon */
}

[role="group"]:hover .css-2zp1xp, [role="group"][data-hover] .css-2zp1xp, [data-group]:hover .css-2zp1xp, [data-group][data-hover] .css-2zp1xp, .group:hover .css-2zp1xp, .group[data-hover] .css-2zp1xp { /* color of the dot after hovering over the button */
    outline-color: COLOR;
    background: COLOR;
}

.css-k0tskw { /* notifications menu */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    border-radius: NUMBERpx; /* default is 16px */
}

.css-m867rh { /* border seperating header with notifications */
    border-bottom: NUMBERpx STYLE COLOR;
}

.css-zx7xxo { /* "notifications" title */
    background-image: linear-gradient(to right, COLOR, COLOR);
}

.css-1hqavs2 { /* color of dot next to notification */
    background: COLOR;
}

How it will look:

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
.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:

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
.class-id, .class-id, .class-id, .css-0 { /* profile card container */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    border-radius: NUMBERpx;
}
⎗
✓
1
2
3
.css-0 { /* getting rid of the ugly grey border */
    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: 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
.css-18bnokj { /* profile picture */
    width: NUMBERpx;
    height: NUMBERpx;
    border-radius: NUMBERpx;
    box-shadow: none; /* removes the box-shadow under the picture */
}
⎗
✓
1
2
3
4
5
6
.class-id { /* Your username */
    font-weight: VALUE;
    font-size: NUMBERpx;
    line-height: 1.2;
    color: 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;
}
⎗
✓
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
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.Btn {
    height: 40px;
    border: none;
    border-radius: NUMBERpx;
    background: COLOR; /* Changes the color on the outer part of the button */
    background-size: 250%;
    background-position: left;
    color: 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;
}
⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
.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%;
}
⎗
✓
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).

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-zgqw37 { /* bot name */
    color: COLOR;
    font-size: NUMBERpx;
    text-align: center; /* centers the bot name */
}
⎗
✓
1
2
3
.css-1m151rf { /* Username on bot card */
    color: COLOR;
}
⎗
✓
1
2
3
.css-96l1id { /* color of text preview */
    color: COLOR;
}
⎗
✓
1
2
3
4
.css-1lgnt2x { /* line connecting to star */
    border-top: NUMBERpx STYLE COLOR;
    width: NUMBER%; /* changes the length of the line */
}
⎗
✓
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;
}
⎗
✓
1
2
3
4
5
.css-1ylu7un { /* limitless tag */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    color: COLOR;
}
⎗
✓
1
2
3
4
5
.css-x2gqu0 { /* regular tags */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    color: COLOR;
}

How it will look:

Halloween bot cards:
⎗
✓
1
2
3
4
.css-7l95y2 { /* bot name */
    color: COLOR;
    text-align: center;
}
⎗
✓
1
2
3
4
.css-1ov83hg { /* line connecting to star: halloween bot card */
    border-top: NUMBERpx STYLE COLOR;
    width: NUMBER%;
}
⎗
✓
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:hover, .css-v57joh[data-hover] { /* box shadow when hovering over: christmas bot card */
    box-shadow: 0 0 NUMBERpx COLOR; /* you can also set this as none */
}
⎗
✓
1
2
3
4
5
.css-6pkpcc { /* bot name: christmas bot card */
    color: COLOR;
    font-weight: VALUE;
    text-align: center;
}
⎗
✓
1
2
3
4
.css-xr5j9y { /* line on christmas bot card */
    border-top: NUMBERpx STYLE COLOR;
    width: NUMBER%;
}

How it will look:

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: COLOR 0px 0px NUMBERpx;
}
⎗
✓
1
2
3
4
5
.css-kesdt6 { /* bot name: 2025 bot card */
    color: COLOR;
    text-shadow: none; /* gets rid of the green text-shadow */
    text-align: center;
}
⎗
✓
1
2
3
.css-vquwtv { /* gets rid of the green glow on the username */
    text-shadow: none;
}
⎗
✓
1
2
3
4
.css-nackew { /* line connecting to star: 2025 bot card */
    border-top: NUMBERpx STYLE COLOR;
    width: NUMBER%;
}
⎗
✓
1
2
3
4
5
6
.css-ee63sa { /* star on bot card: 2025 bot card */
    position: absolute;
    right: -45px;
    top: -38px;
    filter: FILTER;
}

How it will look:

Valentines bot cards:
⎗
✓
1
2
3
.css-12lnk4a:hover, .css-12lnk4a[data-hover] { /* box-shadow when hovering over valentines bot card */
    box-shadow: NUMBERpx NUMBERpx NUMBERpx COLOR;
}
⎗
✓
1
2
3
4
.css-1on0xzz { /* bot name: valentines bot card */
    color: COLOR;
    text-align: center;
}
⎗
✓
1
2
3
4
.css-1pjvf4r { /* line connecting to star: valentines bot card */
    border-top: NUMBERpx STYLE COLOR;
    width: NUMBER%;
}
⎗
✓
1
2
3
4
5
6
.css-1h8fads { /* star connected to line: valentines bot card */
    position: absolute;
    right: -45px;
    top: -38px;
    filter: FILTER;
}

The bot cards are done!

★　Other/Extra elements　★

⎗
✓
1
2
3
4
5
.Btn2-purple { /* "# characters" button */
    background: COLOR;
    color: COLOR; /* changes the color of the text */
    border-radius: NUMBERpx;
}
⎗
✓
1
2
3
.Btn2-purple:before { /* optional - change the color of the black background */
    background: COLOR;
}

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-3rot3:focus-visible, .css-3rot3[data-focus-visible] { /* actively clicking on the search bar */
    z-index: 1;
    border-color: COLOR;
    box-shadow: 0 0 0 1px COLOR;
}
⎗
✓
1
2
3
4
5
6
.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;
    color: COLOR;
}

How it will look:


⎗
✓
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
.css-dcyl1x { /* "filters" title */
    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; /* you can also make it transparent */
    border: NUMBERpx 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: NUMBERpx 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: 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 */
    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
.css-qr46ko { /* container of the latest dropdown */
    background: COLOR;
    border: NUMBERpx STYLE COLOR;
    border-radius: NUMBERpx;
}
⎗
✓
1
2
3
4
5
6
.dark .react-select__option, .transparent .react-select__option, .react-select__menu-portal .react-select__option { /* background of the clickable options */
    background: COLOR;  /* default is transparent */
    color: COLOR;
    z-index: 10000;
    border-bottom: NUMBERpx 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

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
Raw PDF PNG
Report
Pub: 27 Jul 2024 08:09 UTC
Edit: 23 Mar 2025 02:10 UTC
Views: 12729
Auto Theme: Dark
new·what·how·langs·contacts