PROFILE CUSTOMIZATION TUTORIAL FOR JAI WIP !!!

by garlic18

Ethics

Come up with an idea

I believe it's a bit difficult to jump straight into coding without a real idea. What I usually do is look for sources of inspiration! It can come from anything, a poster, an album cover, ur own art, or even a billboard. The point of doing this is to have something to refer to if u feel lost or miss something. This will also enable you to determine which colors will be used, and if your source of inspiration has text, to get an idea of the font.

How to use a source of inspiration

I'll use an example to give an idea of the many ideas that can be drawn from a source of inspiration.
From this image i can retrieve many elements: font, color, and a general theme.

All these colors come from the image above. I've assigned them a role, so i can easily refer to them when creating the profile! :)
I don't know any site that is particularly good at recognizing fonts, so i often go to Google Fonts and Free Webfonts to look for one that matches my example. For now, just choose a font u like and keep it aside, I'll explain how to use it.

Preparing the profile

Once your idea is ready, before you start coding, you can personalize your profile a little.

Let's start coding!

If ur idea is well established and you have the resources to start coding, then it's time to get coding (ᵔ⩊ᵔ)

Where to code on JAI?

There are currently two ways to code on JAI. The first is to click on your profile, go to settings, then to the “about me” section.
about me section

But I think there's a more effective way. Go back to ur profile page and click on the “edit profile” button.
edit profile button

After clicking this button, u should see an “edit css” button centered at the top of ur profile.
edit css button

Once u have clicked on this button, u should see this:
coding interface

This is the place to code! I prefer to use this than the about me section in the parameters, because even if the result remains the same, this coding interface features auto-completion which makes coding much quicker and easier! :D

How to code on JAI?

To customize your profile on JAI, you'll need to use a programming language called “CSS” (cascading style sheet).

An element is what makes up a web page. An image is an element, a text is an element... And every element on JAI has a class! Thanks to this, we can modify them by identifying them in our code and assigning them a style other than the predefined one. To find out the class of an element, you need to “inspect” it.
...see "find elements to modify"

How to code in CSS?

First of all, its important to have a document similar to this one:

1
2
3

<style>
    /* All your code will be between these tags! If you place code outside of them, it will be ignored. */
</style>

There is NO need to rewrite these tags multiple times!

1
2
3
4
5
6

<style>
    /* All your code will be between these tags! If you place code outside of them, it will be ignored. */
    <style>
        /* This will NOT work and will cause your code to break! */
    </style>
</style>

Keep your code clean!

Its really important to have a clean code so as not to get lost! Here are some examples:

It's an organized, commented code, u won't get lost!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<style>
     /* website header */
    .css-p641ht {
        background: black;
    }

    /* username */
    .css-2mfldf {
        font-family: 'Xanh-Mono';
        text-shadow: 0px 0px 6px white;
        text-transform: uppercase;
        font-weight: normal;
    }
</style>

This code is not very organized and not commented, you risk getting lost and doing stupid things! :<

1
2
3
4
5
6
7
8
9

<style>
    .css-p641ht { background: black;
    }

    .css-2mfldf {
        font-family: 'Xanh-Mono'; text-shadow: 0px 0px 6px white;
        text-transform: uppercase;
        font-weight: normal; }
</style>

How to make a comment?

1

/* put ur text between the slashes and asterisks !  */

Find the elements to modify

Place your mouse over the element you want to modify (or select text) then right click and search for "inspect element".

Once you click on "inspect element" you should see something similar to this appear on your screen:
This is where you will be able to find the class of an element.

If you were focused on an element, then this window will open highlighting the element in question. If I had selected the text "public characters" and inspected the element this is what I would have seen :
The code corresponding to the selected element has a blue background to highlight it.

How to customize your profile card?

Here you will find pieces of pre-made code accompanied by advice.

Center your profile picture, username, follower count

1
2
3
4
5
6
7
8

<style>
    /* center profile picture, username, follower count  */
    .css-1uodvt1 {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
</style>

Inpired by Rosewing's code.

Make a "wide" profile picture

1
2
3
4
5
6
7

<style>
    /* profile picture  */
    .css-hsi2ui {
      height: NUMBERpx; /* adjust the values so that your profile picture stands out well. */
      width: NUMBERpx; /* adjust the values so that your profile picture stands out well. */
    }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<style>
    /* profile picture  */
    .css-hsi2ui {
      height: NUMBERpx; /* adjust the values so that your profile picture stands out well. */
      width: NUMBERpx; /* adjust the values so that your profile picture stands out well. */
    }

    /* profile picture, username, follower count  */
    .css-1uodvt1 {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
</style>

Add this code or the one below if u don't want the text to be centered.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<style>
    /* profile picture */
    .css-hsi2ui {
      height: NUMBERpx; /* adjust the values so that your profile picture stands out well. */
      width: NUMBERpx; /* adjust the values so that your profile picture stands out well. */
      margin: 0 auto;
    }

    /* profile picture, username, follower count  */
    .css-1uodvt1 {
        display: block;
    }
</style>

Add a mask to your profile picture

Choose an image, but be aware that it will have to be transparent!
☆ ☆ These three work because they have a transparent background. It's a bit awkward, but basically, what isn't transparent will become transparent, and that's what makes the mask. The background, on the other hand, needs to be transparent, as it will delimit the mask. You can find lots of amazing masks on pinterest or other sites :D

Once you've decided on your image, you'll need to upload it to an image hosting site. It's a bit tricky to find a good image hosting site, so I recommend you do your own research or use catbox or imgur.

If you're using imgur, once you've uploaded the image, right-click on it and click on “copy image address” to get a direct link.

A direct link ends with the file name (jpeg, png...)

When you're good with the image and have a direct link, you can move on to coding.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<style>
    /* profile picture */
    .css-hsi2ui {
        -webkit-mask-image: url(direct link to your image);
        mask-image: url(direct link to your image);
        -webkit-mask-position:center;
        -webkit-mask-repeat:no-repeat;
        mask-position:center;
        mask-repeat:no-repeat;
        mask-size: NUMBERpx; /* It's up to you to adjust the mask size so that it's not too big or too small. */
    }
</style>

Credits to maddieismystar's code.

Follow button

There are ample resources about the follow button on CSS for JAI, I recommend u go there to personalize ur button.

Using fonts, working on text in CSS

If you haven't made your choice of font yet, I recommend these sites to find a good font! (^‿^)

• Google Fonts
• Free Webfonts (please note that this site may be down sometimes.)

How to Google Fonts

To use a font from Google Fonts, here are the steps to follow :

• Click on the font you have chosen then on "get font"
  
• You should see a menu appear, click on "get embed code"
  
• After clicking on "get embed code" you should arrive at this submenu, click on @import
  
• Simply copy the code and put it at the top of your CSS document.
  
• This is how your document should look :
  
• Now go back to google font and copy this part :
  
• This is how your document should look :
  

Now, if u want to change the font of anything, take the class of the element in question and add :

1

font-family: "FONT NAME";

Like that :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<style>
    @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

    .dotgothic16-regular {
      font-family: "DotGothic16", sans-serif; /* copy this line and paste it into the element to change its font */
      font-weight: 400;
      font-style: normal;
    }

    /* username */
    .css-2mfldf {
        font-family: "DotGothic16", sans-serif; /* like that ! :D */
    }

</style>

How to Free Webfonts

There are fewer choices than on Google Fonts, but the use is a little simpler. Go to the site, search for a font that suits you, then copy the code.

Now, u just have to put it in your document :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<style>
    @font-face {                  
      font-family: 'CabinetGrotesk'; /* copy this line and paste it into the element to change its font */
      src: url(https://humantooth.neocities.org/fonts/CabinetGrotesk-Regular.woff) format('woff'); 
      font-weight: normal;
      font-style: normal;
    } 

    /* username */
    .css-2mfldf {
      font-family: 'CabinetGrotesk'; /* like that ! :D */
    }

</style>

Choose a font for all text on your profile

1
2
3
4
5

<style>
   * {
        font-family: "FONT NAME";
    }
</style>

Working with text with CSS

Its possible to change text beyond just color or font with CSS, here are some examples.

code	result
text-transform: uppercase;	CAPITALIZES ALL LETTERS OF AN ELEMENT
text-transform: lowercase;	puts all letters of an element in lowercase
font-weight: normal;	if you have bold text by default, this allows you to remove it
font-weight: bold;	bold text
font-size: NUMBERpx;	change text size
font-variant: small-caps;
font-style: italic;	italicizes a text
text-decoration: line-through solid #COLOR;	strikeout
letter-spacing: NUMBERpx;	c h a n g eㅤ l e t t e r ㅤ s p a c i n g

Create a “neon” effect

To create a neon effect, simply use text-shadow.

1
2
3
4
5
6
7

<style>
    /* username */
    .css-2mfldf {
      text-shadow: 0px 0px NUMBERpx #COLOR; /* change the number to widen the effect */
    }

</style>

Result :