How i Customize my Janitor.Ai Profile
PART 1: Profile CARD
By: Kombroia (A autistic person)
Note
Note: i have a reading disability, so i am not good at Explaining, so i hope my words make sense. BUT i know you will find this guide useful. and maybe some of you guys will understand. i did not make any of this codes, (i made some in hereee) so credits to everyone who managed to do them and make it work.
- How i Customize my Janitor.Ai Profile
- Resources
- Here is what my profile looks without codes, simple customizing:
- How to put the star thingy on your background, simple customizing:
- How to Center your profile picture:
- How to change the size of your Profile picture:
- How to change the shape of your profile picture to square:
- How to center the following Button:
- How to Customize your following button:
- How to change the text only in your Bio
- How to Fade Your Profile picture
- New update! (profile card)
- UPDATED THIS CODE CUZ ITS BAD.
- How to style the details and summary dropdown menu
- END OF PART 1: PROFILE CARD
- Where is what my profile looks like currently:
- How to change your bot card background, SOLID
- How to change your bot card background, LINEAR-GRADIENT
- How to change your bot card background, RADIAL-GRADIENT
- How to change your bot card Name
- How to change your bot card chat count
- How to change your bot card chat count, LINEAR-GRADIENT
- How to change your bot card bio
- How to change your bot card username
- How to change the line on the bot card
- How to change the the bot card border
- New Update! (Bot Card)
- How to color the bot card star
- How to fade the bot card image
- How to center the bot card name
- END OF PART 2: BOT CARD
- How to change the search for characters font
- How to change the create a character font
- New Update!
- how to change the icon on the chat count ribbon
- How to Center or position the Search Characters box and Lastst box menu
- How to change the color of all icons
- How to Make the Summary, and details dropmenu smoother
- the end, thank you for viewing this! 冀
- NEW RENTRY: https://rentry.co/How_to_code_your_janitor_ai_profile_kombroia#how-to-customize-your-janitor-ai-profile-page
Resources
Here is where i get the codes from: https://cssforjai.ju.mp Another useful Guide that is similar to this: https://rentry.co/oishiiscssvisualguide if you need Dividers go to here: https://rentry.org/SilverHasNoLife Another website that has good Dividers: https://rentry.co/dividercore
Now, lets start with the coding!
Here is what my profile looks without codes, simple customizing:
to change the backgrounds and stuff, you need to go to your Profile , and when you see Edit profile click on it, and when you do, you will see 2 little icons on the right. also when you scroll down you will get to edit your bio, and you can add images! the top is just a preview of what your profile will actually look like. after that, make sure you hit Save Changes!
How to put the star thingy on your background, simple customizing:
tap on the Painting icon, and scroll down, and you will see something that says effects, click on none, and it will show you a menu of the effects that is available. remember, there are only 3 effects. after you done chosing one effect that you like, close the menu out, and save it by clicking on Save changes.
How to Center your profile picture:
Copy the code, and paste it in settings.
<style>
.css-1uodvt1 {
padding-top: 0px;
flex-direction: column;
justify-items: center;
text-align: center;
}
</style>
Go to settings, and paste the CODE into your About me, its where your main persona is, i know the username look a little off. You don't need to replace the code or change it up, just paste it in your About me in profile settings.
How to change the size of your Profile picture:
Copy the code, and paste it in settings.
<style>
.css-18bnokj {
width: 300px;
height: 300px;
</style>
Make sure the width, and the height has the same number px. and if you want to change the size to make it look bigger, you can delete '300px' and put '400px' to make it a bit bigger. you dont have to change anything else, just the number px!
How to change the shape of your profile picture to square:
Copy the code, and paste it in settings.
<style>
.css-18bnokj {
width: 700px;
height: 400px;
</style>
this also changes the size, but it also changes the shape to make it a bit wider. if the Width and height does not have the same number px, it would look just like that, or it could look so much bigger and taller. by the way, you dont have to change anythingl unless you want to of course.
How to center the following Button:
Copy the code, and paste it in settings.
<style>
.css-y9k5u7 {
justify-content: center; /* centers the follow and options button */
}
</style>
the devs remove the Ability to see our own following button, so i had to go on my other janitor account. the following button is now in the middle! you def don't need to change the code, just paste it in your profile settings! if you wanna see how your following button looks you would have to go on other account.
How to Customize your following button:
needed website: https://htmlcolorcodes.com
Copy the code, and paste it in settings.
<style>
/* follow btn */
.Btn[data-following='true']:before { /* "followed" button */
position: absolute;
content: "YAY THANKS :)" !important; /* input your text here */
color: #1e9e7f; /* font color */
border: 2PX SOLID #b4438e; /* border styling */
border-radius: nah; /* how rounded the button is */
background-color: NOTHING; /* background colour of the button */
font-family: ARIAL; /* set the font for the button */
}
.Btn[data-following='false']:before { /* "follow" button */
position: absolute;
content: "JOIN THE GARDEN" !important; /* input your text here */
color: #1e9e7f; /* font color */
border: 2PX SOLID #b4438e; /* border styling */
border-radius: NOTHING; /* how rounded the button is */
background-color: NOTHING; /* background colour of the button */
font-family: ARIAL; /* set the font for the button */
}
.Btn span { /* removes default "follow/followed" text */
visibility: hidden;
}
</style>
this might be a little confusing, but let me help you! replace the words that are in Capital letters, you can also replace the word 'NOTHING' and put '10px' where the border-radius is, if you do that, it will make your button more round. and also you can replace 'NOTHING' where the background-color is, with your desired color! i updated this part. The screenshot is working now! this is what it looks like!
How to change the text only in your Bio
Copy the code, and paste it in settings.
<style>
.css-njzqh0 { color: #b4438e; font-family: CURSIVE; font-weight: 300; font-size: 30PX;
}
</style>
Replace the words that are in Capital letters, and replace the word '#b4438e', that's a color for the text. so replace it with any hex color code you like, or you could just type in 'blue' or 'pink', I recommend checking this website out: https://htmlcolorcodes.com Also about the font weight, the bigger the number is, the more bold the text will be, like for example, if you were to replace '300' and put '800' the text will change to bold.
How to Fade Your Profile picture
Copy the code, and paste it in settings.
<style>
.css-18bnokj{
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
</style>
You don't need to replace anything or change up the code, just paste it in your About Me, in settings!
New update! (profile card)
UPDATED THIS CODE CUZ ITS BAD.
How to style the details and summary dropdown menu
Copy the code, and paste it in settings.
Customizing the dropdown box
<style>
summary {
padding: 0px;
width: 100%;
background-color: transparent;
border-radius: 49px;
box-shadow: none;
cursor: pointer;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
font-weight: 100;
color: white;
text-align: center;
font-size: 30px;
position: relative;
}
details {
background-color: #894B26;
border: 1px solid black;
border-radius: 30px;
padding: 0px;
margin: 0px;
box-shadow: none;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
font-weight: 100;
color: white;
font-size: 30px;
}
</style>
the text that goes together with this code
<details>
<summary>TITLE HERE</summary>
♡ PARAGRAPH HERE
♡ PARAGRAPH HERE
♡ PARAGRAPH HERE
♡ PARAGRAPH HERE
</details>
okay so the code above is customizing the box and the text. it also allows you to change the text size inside the box! the code at the bottom is a example! you can replace anything else, but dont touch 'position: relative;' or 'text-align: center;' and 'cursor: pointer;' and lastly dont't touch 'Width: 100%' those make the text appear in the middle. if you were to decrease the width, the box will appear on the left and not in the center. the box-shadow is to make the box glow a little bit. put NONE;
if you don't want the box to glow. the border-radius changes the shape of the box, right now the box is circled. if you want the box to be square put border-radius: NONE;
. also leave background-color: transparent;
alone.
END OF PART 1: PROFILE CARD
- How i Customize my Janitor.Ai Profile
- Resources
- Here is what my profile looks without codes, simple customizing:
- How to put the star thingy on your background, simple customizing:
- How to Center your profile picture:
- How to change the size of your Profile picture:
- How to change the shape of your profile picture to square:
- How to center the following Button:
- How to Customize your following button:
- How to change the text only in your Bio
- How to Fade Your Profile picture
- New update! (profile card)
- UPDATED THIS CODE CUZ ITS BAD.
- How to style the details and summary dropdown menu
- END OF PART 1: PROFILE CARD
- Where is what my profile looks like currently:
- How to change your bot card background, SOLID
- How to change your bot card background, LINEAR-GRADIENT
- How to change your bot card background, RADIAL-GRADIENT
- How to change your bot card Name
- How to change your bot card chat count
- How to change your bot card chat count, LINEAR-GRADIENT
- How to change your bot card bio
- How to change your bot card username
- How to change the line on the bot card
- How to change the the bot card border
- New Update! (Bot Card)
- How to color the bot card star
- How to fade the bot card image
- How to center the bot card name
- END OF PART 2: BOT CARD
- How to change the search for characters font
- How to change the create a character font
- New Update!
- how to change the icon on the chat count ribbon
- How to Center or position the Search Characters box and Lastst box menu
- How to change the color of all icons
- How to Make the Summary, and details dropmenu smoother
- the end, thank you for viewing this! 冀
- NEW RENTRY: https://rentry.co/How_to_code_your_janitor_ai_profile_kombroia#how-to-customize-your-janitor-ai-profile-page
PART 2: bot CARD
Where is what my profile looks like currently:
How to change your bot card background, SOLID
Copy the code, and paste it in settings.
<style>
.css-1s5evre {
background-color: #0b0314;
}
</style>
Where it says #0b0314
, you want to replace it with the color you like, and that is it! :) make sure you have the ';' at the end at ALL times. (sorry for picking a dark color.)
How to change your bot card background, LINEAR-GRADIENT
Copy the code, and paste it in settings.
<style>
.css-1s5evre {
background: linear-gradient(#0b0314, yellow, #0b0314) !important;}
</style>
Don't mess with anything else, just replace #0b0314
(#0b0314 is the dark purple color as you can see) and replace yellow
with any color you like. remember, only 3 colors are allowed for this code, it looks a little weird when i put 2 or 4 colors.
How to change your bot card background, RADIAL-GRADIENT
Copy the code, and paste it in settings.
<style>
.css-1s5evre {
background: radial-gradient(#0b0314, yellow, #0b0314) !important;}
</style>
same thing goes for radial-gradient. just replace #0b0314
and yellow
with a word color, or color code, which ever you would prefer! same thing lol... but the gradient is different.
How to change your bot card Name
Copy the code, and paste it in settings.
<style>
.css-pz44gm { color: white; font-family: Garamond, serif; font-weight: 800; font-size: 20PX
}
</style>
Replace White
WITH the color you want instead. repalce Garamond, serif
and put the font you want, or you can just leave it how it is. List of fonts Names, and examples here: https://www.w3schools.com/cssref/css_websafe_fonts.php
How to change your bot card chat count
Copy the code, and paste it in settings.
<style>.css-wexxj8 {background: BLACK !important;}</style>
Replace black
with a color code, or just a word color, and that is it! you dont need to change anything else!
How to change your bot card chat count, LINEAR-GRADIENT
Copy the code, and paste it in settings.
<style>.css-wexxj8 {background: linear-gradient(Black, white) !important;}</style>
Hi, i hope you are finding this useful so far! replace Black
and white
with a different color you like! make sure !important;
is at the end, next to the parentheses()
How to change your bot card bio
Copy the code, and paste it in settings.
<style>
.css-96l1id { color: WHITE; font-family: Garamond, serif; font-weight: 300; font-size: 20px;
}
</style>
you can just replace white, with the color you want. you can also change the size of the text, but i recommend the text being small, not too big. replace 20px
with 30px
or a bigger number if you want the text to be a bit bigger.
How to change your bot card username
Copy the code, and paste it in settings.
<style>
.css-1m151rf { color: #6614c2; font-family: Garamond, serif; font-weight: 300; font-size: 20px;
}
</style>
replace #6614c2
with a color you would like to choose! if you want the text to be smaller, replace 20px
with 15px
or a smaller numbermf you id like.
How to change the line on the bot card
Copy the code, and paste it in settings.
<style>
.css-1lgnt2x {
border-top: 2PX SOLID #6614c2; /* 1px is the thickness of the line, 'solid' refers to the type of line, rgb() is the color which you can replace with color names and hexcode */
width: 90%; /* refers to the length of the line */
position: relative;
margin-top: -10px; /* the space between the bot preview and the line */
margin-bottom: 10px; /* the space between the tags and the line */
}
</style>
replace 2px
and put a better number if you want the line to be thick for example, you can replace 2PX
and put 6px
to have a thicker line. you can also replace solid
and put dotted
or dash
if you want! #6614c2
is a color code so replace it, and put ANY color you like to put in. and lastly 90%
. if you were to replace 90%
with something like... 30%
the line is not longer anymore, but if you were to keep it at 90%
the line will stay long. and everything else, Ignore it if you want.
How to change the the bot card border
Copy the code, and paste it in settings.
<style>
.css-0 { background: rgba(1, 1, 1, 0) !important;} /* sets css-0 as transparent. Remove if this was already previously set/unneeded */
.css-1s5evre {
border-width: 2px;
border-style: SOLID;
border-color: WHITE;
}
</style>
hello! i hope you are having a wonderful day! so, you want to replace SOLID
and put DOTTED
or dashed
only if you want to, if not keep it solid. replace white
and put anyone color you like, lovey! make sure ;
is at the end of the words you are replacing! and that is it! don't delete or change anything else!
New Update! (Bot Card)
NOTE: make sure to check out profile card again, there is a update in that section!
How to color the bot card star
Copy the code, and paste it in settings.
<style>
.css-hl99y6, .css-1bgu6ps {
filter: brightness(0) saturate(100%) invert(17%) sepia(70%) saturate(4737%) hue-rotate(13deg) brightness(98%) contrast(106%);
</style>
in order to do this you need to go to this website: https://angel-rs.github.io/css-color-filter-generator/ , if you paste a hex code color, it will give you a color filter. make sure you have ;
at the end as always.
How to fade the bot card image
Copy the code, and paste it in settings.
<style>
.css-1q7rmf0 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
</style>
Just paste the code into your settings, and that is it! if your bot card background is yellow, the fading will be yellow as well.
How to center the bot card name
Copy the code, and paste it in settings.
<style>
.css-pz44gm {
font-family: "Berkshire Swash", serif;
color: YELLOW;
text-align: center;
font-weight: 800;
font-size: 17px;
position: relative;
</style>
Replace "Berkshire Swash", serif;
with a font, like: Aral;
or Cursive;
if you want to! leave the position alone, and leave the text-align alone, those help your text appear in the center, you don't want to mess with that. font weight: 800; makes your text bold, if you dont want your text to be bold just replace 800;
with 300
to make it less bold. replace yellow with any color you want. the font size makes the text bigger!
END OF PART 2: BOT CARD
PART 3: EXTRA
How to change the search for characters font
Copy the code, and paste it in settings.
<style>
.css-3rot3 { font-family: CURSIVE; font-weight: 800; font-size: 20PX;
}
</style>
you can ONLY change the font, and the font weight, and the size of the text only. replace cursive
with any font that is listed here: https://www.w3schools.com/cssref/css_websafe_fonts.php or here: https://www.cssfontstack.com
How to change the create a character font
Copy the code, and paste it in settings.
<style> .css-1yhasuw { color: yellow; font-family: cursive; font-weight: 300; font-size: 20px; } </style>
replace cursive
with any font that is listed here: https://www.w3schools.com/cssref/css_websafe_fonts.php or here: https://www.cssfontstack.com. replace yellow
(it is the color of the text) with any color you want. IF you want to.
New Update!
how to change the icon on the chat count ribbon
Copy the code, and paste it in settings.
<style> .css-euh5x6 svg { visibility: hidden; display: none; } .css-euh5x6:before { visibility: visible; content: "🤍"; font-family: CURSIVE; color: PINK; font-size: 15px; } </style>
replace 🤍
with a emoji or a symbol that you like! you don't have to mess with the font size, i recommend having the font size small, it makes the emoji bigger or symbol. you can find symbols here: https://coolsymbol.com you don't really have to mess with the font style...
How to Center or position the Search Characters box and Lastst box menu
Copy the code, and paste it in settings.
<style>
.css-m8ywhg {
flex-direction: column-reverse;
align-content: center;
justify-content: center;
align-items: center;
flex: 1;
}
.css-6su6fj {
width: 100%;
}
.css-zdpt2t {
margin-left: 0%;
width: 100%;
}
.css-mcoi9a {
margin-left: 0%;
justify-content: center;
}
.css-1jy826p {
width: 100%;
flex: 1;
}
</style>
This code will put the items in line! just paste this in your settings, thats all!
How to change the color of all icons
Copy the code, and paste it in settings.
<style>
svg {
fill: LIME;
</style>
just replace ’Lime` with any color you want, and that is it!
it also changes the color of these little icons too!
- How i Customize my Janitor.Ai Profile
- Resources
- Here is what my profile looks without codes, simple customizing:
- How to put the star thingy on your background, simple customizing:
- How to Center your profile picture:
- How to change the size of your Profile picture:
- How to change the shape of your profile picture to square:
- How to center the following Button:
- How to Customize your following button:
- How to change the text only in your Bio
- How to Fade Your Profile picture
- New update! (profile card)
- UPDATED THIS CODE CUZ ITS BAD.
- How to style the details and summary dropdown menu
- END OF PART 1: PROFILE CARD
- Where is what my profile looks like currently:
- How to change your bot card background, SOLID
- How to change your bot card background, LINEAR-GRADIENT
- How to change your bot card background, RADIAL-GRADIENT
- How to change your bot card Name
- How to change your bot card chat count
- How to change your bot card chat count, LINEAR-GRADIENT
- How to change your bot card bio
- How to change your bot card username
- How to change the line on the bot card
- How to change the the bot card border
- New Update! (Bot Card)
- How to color the bot card star
- How to fade the bot card image
- How to center the bot card name
- END OF PART 2: BOT CARD
- How to change the search for characters font
- How to change the create a character font
- New Update!
- how to change the icon on the chat count ribbon
- How to Center or position the Search Characters box and Lastst box menu
- How to change the color of all icons
- How to Make the Summary, and details dropmenu smoother
- the end, thank you for viewing this! 冀
- NEW RENTRY: https://rentry.co/How_to_code_your_janitor_ai_profile_kombroia#how-to-customize-your-janitor-ai-profile-page
How to Make the Summary, and details dropmenu smoother
Copy the code, and paste it in settings.
<style>
details {
background: none;
padding: 10px;
}
details summary {
cursor: pointer;
transition: margin 150ms ease-out;
}
details[open] summary {
margin-bottom: 10px;
}
</style>
you just have to copy, then paste the code in settings and click update profile.
i don't have a video so here is a laggy gif. code made by Me <3
the end, thank you for viewing this! 冀
NEW RENTRY: https://rentry.co/How_to_code_your_janitor_ai_profile_kombroia#how-to-customize-your-janitor-ai-profile-page
the new rentry is not finished.