THE BASICS OF PROFILE CUSTOMIZATION

by Reo

What to expect
Accessibility
Tutorial & FQA
Codes
Resources

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.

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

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
17

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

CODES

Elements emphasized with red squares are the ones we are going to edit.

For the custom fonts, I will only be covering the username and followers. For other elements, you can find out on your own.
this section is a wip

 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

*/ JanitorAi beta - combined */
.glow-logo:before */ border */ {
    content: "";
    background: linear-gradient(10deg, HEX/COLOR, HEX/COLOR, HEX/COLOR, HEX/COLOR, HEX/COLOR, HEX/COLOR, HEX/COLOR); */ Adjust the number of degrees if wanted */
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 250%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    opacity: 1;
    border-radius: 8px;
}

.css-1ej4ex */ "Janitor" text */ {
    font-family: CUSTOM-FONT; */ Replace `CUSTOM-FONT` with your font's name */
    font-weight: FONT-WEIGHT; */ Replace `FONT-WEIGHT` with your font's weight  */
    font-size: FONT-SIZE; */ Replace `FONT-SIZE` with your font's size, can adjust */
    line-height: 1.33;
    color: HEX/COLOR;
    margin-bottom: 0px;
}

.css-bda9ez */ "Beta" text */ {
    font-size: var(--chakra-fontSizes-md);
    color: HEX/COLOR;
    font-weight: 700;
    font-family: Jura;
    margin-left: var(--chakra-space-1);
}

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

*/ "Create a character" button, announcements button, and profile - combined */
.css-1yhasuw */ "Create a character" button */ {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: var(--chakra-space-1);
    -webkit-padding-start: var(--chakra-space-2);
    padding-inline-start: var(--chakra-space-2);
    -webkit-padding-end: var(--chakra-space-2);
    padding-inline-end: var(--chakra-space-2);
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--chakra-space-3);
    color: HEX/COLOR;
}

.glow-on-hover */ Background and text color of "Create a character" button */ {
    padding: 1px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    color:HEX/COLOR;
    text-align: center;
    font-family: Jura;
    font-weight: 700;
    background: HEX/COLOR;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before */ "Create a character" button when you hover over it */ {
    content: "";
    background: linear-gradient(10deg, #000000, #000000, #000000, #000000, #000000, #000000, #000000);
    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: 10px;
}

button */ Background for announcement and profile */ {
    background: #000000;
    padding: 0;
}

How it will end up looking: