So you've seen all these people with amazing profiles, but you have NO clue on how to do it yourself? Don't worry, I got you!

(I recommend reading this whole thing to get the best results. On a website based mostly on reading, I'd be surprised if people were unable to)

So as of recent, I've been seeing a LOT of people asking questions about CSS, or just straight up having no idea what to do, and I get it, I've been there too. And while there's so many amazing tutorials, such as Iorveths guide and Bluem's guide. But I still keep seeing a lot of questions, so I've tried to make my own completely simplified visual guide and I hope this helps!

Here is my profile if anyone wants to see, it's honestly very bare-boned in comparison to some other people, and in NO WAY am I a CSS pro. I learnt how to do a few things few these guides that I listed just above, as well as a few other things which you can see on my guide.

My own profile

Do note that if you are on mobile and don't have access to the inspect element feature, it will be a lot harder to change specific things about your profile, but you can still get some preset CSS codes through lunaxlee's guide, googling the thing you want to change, and I will also be trying to answer as many comments as I can, so if you have a specific question or want a specific code, I cant TRY to help with that, unless it's for animations, that i am ABSOLUTELY CLUELESS ABOUT.

But anyways, enough yapping, here is my guide below! I didn't go into too much depth or explain all the things mentioned in the guide so it would be more simpler to understand (I couldn't be bothered to decorate it, soz 😭)

Please share with friends if this helped! 👍

https://docs.google.com/presentation/d/1FYRSXJ12AgGUbzwv1e57XyL1cPi_RAgumA4jkrO2Qzo/edit?usp=sharin

Edit: Currently not taking any questions due to how busy I have been, apologies!

I've seen a lot of people seem to struggle with learning CSS but start to understand it better once they put it into practice. I'm hoping this helps.

I made a JAI CSS template. Heavily commented with explanations for easy use. Of course, still open for improvement. The profile template (should work with copy + paste) can be found here. Any ideas for extra features, improvements, criticism on poorly explained comments, etc is greatly appreciated. Feel free to take anything from the template no credit necessary. If you have a neat feature on your profile and feel like contributing, or have an idea but don't know how to execute it, just let me know and I'll try to implement it into the template.

Links:
Version 1
Version 2
Version 3
Current

Edit: Learned that #2025 bot cards have a different container from normal bots. Updated template link.

Edit 2: Filter was apparently messed up due to reuse of classes. Fixed.

Edit 3: Update to filter class caused mix-up with username. Made the selector more specific for the username.

I’m SO thankful for the people who explained how to customize your profile and who gave the css and the codes! You are true saviors.

Still trying to figure out some things, but I’m really happy with how it looks. I’m shitty at coding and understanding everything, but the result is there at least.

Hello!

I'm in the middle of reworking my profile page and I was looking to see if I could get some help or if someone has user friendly guide on how to make the following changes on the CSS:

1.) Reformat the Avatar, Title, and Member Since to be more centered like in the second image.

2.) Create toggle tabs (Mainly for a about me section, achievements, and my release schedule.

3.) Changing the colors and font style of the button, total/text, search input, container, sorting/value tabs, char name, creator name, and list container.

I know it's a lot but I wanted to make my page more visually appealing and I'm no expert on CSS. Any help would be greatly appreciated!