Julia’s ULTRA simplified

visual guide

To J.AI CSS Profiles

A few things to note:

• I am in NO WAY a ‘CSS Pro’ so you may have to fact check me and I may get a few things wrong, apologies if this is the case
• English is not my first language,so sorry if the grammar is not good
• If you are on mobile, it may be a little harder to change certain things you want about your profile, in which you can use CSS Presets, google the thing you want to change, or leave a comment on my reddit post, I’ll try my best to help!
• Also, to simplify this as much as I can, I won’t go into depth to explain everything mentioned, I’ll only show you how to actually do the basics, nor will i talk about more complex css stuff (audio, fonts, animations, etc.) since it will make this too long, instead, ask me in the comment section OR refer to some of the other css tutorials, such as this one, which explains it way better than me

​

Without further ado, let’s go!

For this tutorial, let’s use an example

We will be changing this profile from:

THIS

THIS

To

I will try to leave all code used in the comment section of the reddit post!

Find me: @tea parties! at the dollhouse

Let’s look at the format in which you should format any visual things (like username, pfp, etc.)

1. Click on your pfp at corner of the page then settings

2. Scroll till u find ‘about me’ section

3. Now in that box you’re going to need to type this: <style> .css- {} </style>

This is the like the default layout of how almost all CSS codes are written, so you’re gonna need to remember this

It comes in different forms too, depending on what propery is being changed, example:

To change audio elements: <audio> .css-{} </audio>

​

Now let’s learn how to change the thing we want to! Open a new tab while keeping the other one open…

4. Then right click on whatever you want to change then click ‘inspect element’ In this case, i want to center my username, pfp also followers, so I will right click on that

5. Now here’s where it gets a little trickier, it should take you to a page like this. You need to hover over each DIV until it highlights the thing you want to change, as you can see below

See all this text here? To make this tutorial clearer, we’ll be referring to them as DIVs. Keep this in mind!

(no, thats not their ACTUAL name. Please dont refer to them as DIVs Irl 🥲)

Now here’s the “fun” part!

Now, let’s learn how to ACTUALLY change your desired aspect. Once you’ve clicked on the text that highlighted what you want to change:

6. Look below, you should see a box like this that gives you all sorts of options of properties you can change. This part may be a little trial and error, clicking on any of these texts will give you a drop down menu of different things to chose from. Keep playing around and changing different aspects till you find the one that changes what you want. Most of the time, it should be simple since the red text will label it, but sometimes, it won’t be as simple. If you can’t find the right thing, you may have hovered over the wrong DIV

​

In my case, changing the ‘flex-direction’ property to say ‘column’

=

centering my pfp and username, pretty cool, right?

Final part: Actually writing the code needed to change the property

Now you’ve made your desired changes to your profile, it’s now time to actually change this thing, this part is VERY important that you pay attention, as it’s the reason most people struggle with CSS not working

​

7. Now, whatever thing that you changed on your profile, should have a .css- code assigned to it, YOU NEED TO COPY THIS! If you don’t understand what i mean:

In my case, i changed the ‘flex direction’

Right above, i see a .css- code, which i will copy

8. Back to the ‘about me’ section in settings, i should still have the preset code: <style> .css- {} </style>

You should now replace the ’.css-’ text with the code you just copied, like so:

​

7. Now, back to your profile, you need to copy EVERYTHING on ONLY the thing you changed, as you can see below:

​

I changed the ‘flex-direction’ property, so i will copy and paste the red and black text, INCLUDING the semi-colon

9. Now for the final time in the about me section, inbetween the {} brackets, paste the thing you just copied. The finished product should look something like this

AND THAT’S IT! If everything is done correct, your changes should be made. It’s that simple!

Now, you’ve probably seen a bot creator with a cool profile and wondered, “How the hell do they do that?”

​

Luckily for us, using inspect element also works on OTHER profiles, meaning you can sometimes copy the exact code other people used

For this, I will use Axo’s profile as an example, since hers are always so nice :)

Say for example, i want to make my profile picture look like this. Once again, inspect element on the thing you want

Now, you can either use the same method we previously talked about; hovering over the DIVs, finding your desired aspect, then configuring it to the way you want it to be

OR…

1. If you want their EXACT code: Click on the person’s username OR profile picture (TRUST ME), then YOU MUST click on a DIV that begin with “h2 class” if you clicked on their username, or “img alt” if you clicked on their pfp. Afterwards, look down again till you find something that’ll look like this

2. This time however, instead of changing the properties, click any one of the text that says <style>

3. It should take you to a page that looks like this, if it doesn’t, you may have hovered over the wrong DIV, remember, it MUST start with “h2 class” or “img alt”. Keep clicking drop down boxes until you find the one that includes the code that changes your desired aspect, luckily for me, Axo has labelled this code, so it was easy to find! Copy the text then paste it into your about section REMEMBER TO ADD <style> AT THE BEGINNING AND </style> AT THE END

4. And there you go! Keep in mind, this method is not really effective for text based elements due to fonts and stuff like that which I won’t go into depth about here

Remember, having the ability to use other people’s CSS codes does NOT give you the right to just blatantly copy their whole theme! Try to be as original and creative as you can!

Welp, there you have it! I really hope this tutorial helped! Again, sorry for any bad grammar!

​

Keep in mind this slide is a work in progress, and I’ll probably be constantly updating it when I learn anything new.

​

Any questions, please leave a comment, I’ll try to answer, or you guys can help eachother out.

​

My J.ai Profile if anyone’s interested

(sorry for all the shameless ahh self promotions 💀)

​

​