HOW TO EDIT YOUR PROFILE ON JANITOR.AI VISUAL LEARNER EDITION

So you want a cool theme on your profile but have nowhere to start?
Looking at piles of code and have no idea what to do?**

WHO AM I? Hi, I'm Oishiidesu. 3 weeks ago, I was just like you. Profiles were starting to pop up everywhere and I had no idea. I asked friends and they helped me along the way. (Thank you Iorveth, Maddie, and Happyegg!). But staring at lists of code gave me a headache, plus I'm a visual learner. 3 weeks later to now, I am a bit more comfortable with coding. But I still hate staring at lists of code. So it's video time!

LINK TO RESOURCES LunaxLee's pile of code, Another Resource BIG THANK YOU TO LUNA FOR BEING SO QUICK WITH GATHERING CODES! This guide wouldn't exist without you and the other creators listed help.


made by oishiidesu!


What do I start with first? So! This is what your profile may look like.

Alt Tag

Yeah, it doesn't really look that... coherent.

THE FIRST STEP

So! The first thing we're going to do is pick a theme. Long before we even touch a website, we have to look at the following: ______________ 1. Icon 2. Background 3. Color hex codes! _________ So, onto pinterest! Alt Tag
I want my theme to be bowser, but I want a certain look. So I look up bowser and the color I want. Alt Tag
I like one of these! So I'm going to pick it and put it on my profile. Here is a video of how to change your icon! Alt Tag Ahh... this looks better. Alt Tag Now, we need to put this picture into my favorite website ever to get our profile theme hexes. Cooloso! Alt Tag This is the colors we are going to use for our profile. Using this website helps me find out what colors are in the photo so everything is seamless! Using this hex, I'm going to change the background of the profile to a different color. Alt Tag See how good it looks already? (HINT! Make sure the text is readable, I chose the brightest color in the picture for the text and the darkest for the background. Now it's time to pick a background! You can choose a simple color, or you can use an actual background picture. (HINT! Make sure it coordinates with the colors on your icon!) (HINT 2! If you can't find a good background picture, try to just look up images with the two colors in it! Doesn't have to be from a certain fandom, OR you can put it into photoshop and use an overlay to make the colors the same.) (HINT 3! Make sure to use your search engine and make sure the image is LARGE, so it isn't pixelated!) Alt Tag There we go! I couldn't find a good background, so I made my own on Photopea. I took the two colors in the back of my icon and made it a gradient.

NOW ONTO THE CODING...

Me? I like to work from the top down, so we're going to start with the Janitor Ai logo and the other corresponding elements. To do this, we have to find their specific .css (or try out Lunaxlee's guide to find them, but sometimes they don't work because we have unique .css) Here is a video on how to find a specific class Alt Tag (HINT! See at the bottom right where it shows the <style>? You can copy and paste it into your About Me to directly edit it!) ALL CODE GOES INTO YOUR ABOUT ME SECTION IN YOUR PROFILE SETTINTGS ->__________

HOW TO EDIT THE JANITOR AI LOGO

<style> .css-1ej4ex { font-family: var(--chakra-fonts-heading); font-weight: var(--chakra-fontWeights-bold); font-size: var(--chakra-fontSizes-2xl); line-height: 1.33; color: #f70103; margin-bottom: 0px; } </style> Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! Alt Tag

__________

HOW TO EDIT THE JANITOR AI (BETA) LOGO

<style> .css-bda9ez { font-size: var(--chakra-fontSizes-md); color: #f50b04; font-weight: 700; font-family: Jura; margin-left: var(--chakra-space-1); } </style> Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! Alt Tag

__________

HOW TO EDIT THE BACKGROUND OF THE JANITOR AI LOGO

<style> .glow-logo:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: rgb(0 0 0); left: 0; top: 0; border-radius: 8px; } </style> Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! Alt Tag

__________

HOW TO EDIT THE EDGES OF THE JANITOR AI LOGO

<style> .glow-logo:before { content: ""; background: linear-gradient(10deg, #000000, #000000, #000000, #000000, #000000, #000000, #000, #000000, #000000, #000000); 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; } </style> Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! (I changed all the colors into black. Mess around with the border too if you want! Alt Tag

__________

HOW TO EDIT THE HEADER

<style> .css-p641ht { display: flex; -webkit-box-pack: justify; justify-content: space-between; position: fixed; padding-top: var(--chakra-space-1); padding-bottom: var(--chakra-space-1); background: rgb(0 0 0); box-shadow: var(--chakra-shadows-md); z-index: 2; backdrop-filter: blur(10px); padding-inline-start: var(--chakra-space-12); padding-inline-end: var(--chakra-space-12); width: var(--chakra-sizes-full); -webkit-box-align: center; align-items: center; height: var(--chakra-sizes-16); } </style> Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! Alt Tag

__________

HOW TO EDIT THE SEARCH BAR

<style> .css-hgv3sj { font-size: var(--input-font-size); min-width: 7.5rem; outline: #fe0102 solid 2px; outline-offset: 2px; position: relative; appearance: none; transition-property: var(--chakra-transition-property-common); transition-duration: var(--chakra-transition-duration-normal); --input-font-size: var(--chakra-fontSizes-md); --input-padding: var(--chakra-space-4); --input-border-radius: var(--chakra-radii-md); --input-height: var(--chakra-sizes-10); background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; color: var(--chakra-colors-whiteAlpha-800); background-color: var(--chakra-colors-whiteAlpha-200); border: var(--chakra-borders-none); border-radius: 8px; font-weight: var(--chakra-fontWeights-light); -webkit-box-pack: start; justify-content: flex-start; padding-inline-start: var(--input-height); padding-inline-end: var(--input-height); height: var(--chakra-sizes-10); width: 100%; } </style> Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! Alt Tag

__________

HOW TO EDIT THE CREATE A CHARACTER

-> <style> .glow-on-hover:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: rgb(0 0 0); left: 0; top: 0; border-radius: 10px; } </style>

<style> .css-1yhasuw { display: flex; padding: var(--chakra-space-1); padding-inline-start: var(--chakra-space-2); padding-inline-end: var(--chakra-space-2); -webkit-box-align: center; align-items: center; gap: var(--chakra-space-3); color: red; } </style> <-
Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! (NOTE: I messed up the colors and went back to fix them, the code is still perfectly fine, just make sure you add the right colors!) Alt Tag

__________

HOW TO EDIT THE ANNOUNCEMENT/ICON/TAG BUTTON (ADD A BORDER OR A BACK COLOR)

<style> .css-fss3o9 { display: inline-flex; appearance: none; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; user-select: none; position: relative; white-space: nowrap; vertical-align: middle; outline: #f30707 solid 2px; outline-offset: 2px; line-height: 1.2; border-radius: var(--chakra-radii-md); font-weight: var(--chakra-fontWeights-semibold); transition-property: var(--chakra-transition-property-common); transition-duration: var(--chakra-transition-duration-normal); height: var(--chakra-sizes-10); font-size: var(--chakra-fontSizes-md); color: var(--chakra-colors-whiteAlpha-900); padding-inline-start: var(--chakra-space-2); padding-inline-end: var(--chakra-space-2); min-width: var(--chakra-sizes-10); } </style> <style> button { background: #ff0000; padding: 0px; } </style> Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! Alt Tag

__________

HOW TO CHANGE LATEST, TRENDING, ETC

<style> .react-select-container .react-select__placeholder, .react-select-container .react-select__single-value { color: RED; } </style> <- COLOR

__________

HOW TO EDIT THE ICON

<style> .css-1uodvt1 { padding-top: 0px; flex-direction: column; justify-items: center; text-align: center; } </style>

<style> .css-hsi2ui { height: 250px; width: 500px; } } </style> Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! Use the top video to center your icon, and the bottom to change the dimensions of it! Alt Tag Alt Tag

__________

HOW TO EDIT BOT CARD COLOR AND BORDER

<style> .css-1s5evre { background-color: BLACK; } </style> Card

<style> .css-0 { background: RED !important;} </style> Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! Use the top video to center your icon, and the bottom to change the dimensions of it! Alt Tag -> more detailed code and owner found by Luna's guide

__________

HOW TO EDIT THE FOLLOW BUTTON

<style> .css-y9k5u7 { flex-direction: column; /* follow button container */} </style> Container

<style> .Btn:before { position: absolute; content: "FOLLOW"; color: #fa7ea0; display: flex; align-items: center; justify-content: center; width: 97%; height: 90%; border-radius: 8px; transition-duration: 1s; background-color: #ffc4d2; background-size: 200%; /* follow button content */} </style> Follow button container

<style> .Btn { width: 140px; height: 40px; border: none; border-radius: 10px; background: #fa7ea0; /* follow button border */} </style> Border of button Here is the code above, and the gif below. Make sure to do the inspect and find JanitorAi's specific class using the video above! Use the top video to center your icon, and the bottom to change the dimensions of it! Alt Tag Alt Tag

__________

SO YOU WANT TO CHANGE YOUR FONT...

This was one of the hardest things for me to figure out even with guides. So I'm going to try and break it down the best I can. This is instructions directly from LunaxLee's resource.

STEP 1 - GO TO GOOGLE FONTS.COM

Google Fonts

STEP 2 - PICK A FONT AND CLICK TO GET THE EMBED

Alt Tag

COPY AND PASTE THE EMBED AND ANY CSS CLASS IN YOUR ABOUT ME (DO NOT CLOSE THE GOOGLE FONTS PAGE AT ALL)

Alt Tag Alt Tag

NOW, PUT ANY REGULAR TEXT IN THIS FORMAT...

<div class="FONT CLASS NAME">TEXT</div> and you're done! Psst, the class name is the lower case one! Alt Tag

CHANGE USERNAME FONT

<style> .css-YOURSPECIFICCLASS { font-family: YOUR FONT NAME IN EMBED font-weight: 100; font-style: normal; } </style> Alt Tag <-

CHANGE JANITOR.AI FONT

<style> .css-1ej4ex { font-family: "Lilita One", sans-serif; font-weight: var(--chakra-fontWeights-bold); font-size: var(--chakra-fontSizes-2xl); line-height: 1.33; color: #f70103; margin-bottom: 0px; } </style> PSST! You have this already, we did this to change the color. Go back up and replace the font-family with your chosen font! <-

CHANGE CREATE A CHARACTER FONT

Look at the last video to see how to change everything that can be changed with fonts! Give a man a fish and he'll ask for more, teach a man to fish and... well. Alt Tag

CHANGE BOT CARD TOP FONT

<style> .css-1ifv49 { font-size: 13px; display: flex; -webkit-box-align: center; align-items: center; font-family: "Lilita One", sans-serif; font-weight: var(--chakra-fontWeights-bold); color: rgb(245, 52, 8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style>

HOW TO CHANGE THE PUBLIC CHARACTERS FONT AND WORDS

.css-YOURCLASS { font-family: 'FONT FAMILY'; color: #COLOR HEX; text-transform: uppercase/lowercase/propercase; margin-inline-start: 20px; font-size: ANY NUMBERpx; }change font, size color, text style

WORKING ON FINDING THE CODE to change text

HOW TO CHANGE TOTAL CHARACTERS FONT AND COLOR

<style> .css-YOURCLASS { font-family: "Lilita One", sans-serif; color: RED; font-size: var(--chakra-fontSizes-lg); } </style> Alt Tag

HOW TO CHANGE RIBBON COLOR

<style>.css-wexxj8 {background: RED !important;}</style> <div class="content css-wexxj8"></div> THIS CODE SHOULD BE UNIVERAL SO IMMEDIATE COPY AND PASTE

HOW TO CHANGE SMALL USER COLOR AND FONT

-> <style> .css-YOURCLASS { transition-property: var(--chakra-transition-property-common); transition-duration: var(--chakra-transition-duration-fast); transition-timing-function: var(--chakra-transition-easing-ease-out); cursor: pointer; text-decoration: none; outline: transparent solid 2px; outline-offset: 2px; color: rgb(245, 52, 8); font-size: var(--chakra-fontSizes-xs); font-weight: var(--chakra-fontWeights-bold); display: inline-flex; -webkit-box-align: center; align-items: center; } </style>

Alt Tag

LASTLY... HOW TO FIX THIS

Alt Tag

HERE IS HOW TO CHANGE FONTS IN THE BUILT IN INSPECT SOURCE, JUST BE SURE TO COPY AND PASTE THE STYLE INTO YOUR ABOUT ME WITH THE RIGHT <STYLE> </STYLE>! Alt Tag

IT'S THE END, HERE IS WHAT THE FINAL RESULT LOOKS LIKE

Alt Tag

CONGRATULATIONS! You've now made a basic barebones profile. All the fancy stuff will be added beneath this later. Credits to LunaxLee and the creators for some of the codes! If you have any questions, I'm a mod at Janitor.Ai's Discord, tag me as @Oishiidesu! My Profile

Edit
Pub: 26 Jun 2024 22:44 UTC
Edit: 27 Jun 2024 06:46 UTC
Views: 8850