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.

  1. How i Customize my Janitor.Ai Profile
    1. PART 1: Profile CARD
  2. Resources
  3. Here is what my profile looks without codes, simple customizing:
  4. How to put the star thingy on your background, simple customizing:
  5. How to Center your profile picture:
  6. How to change the size of your Profile picture:
  7. How to change the shape of your profile picture to square:
  8. How to center the following Button:
  9. How to Customize your following button:
  10. How to change the text only in your Bio
  11. How to Fade Your Profile picture
  12. New update! (profile card)
  13. UPDATED THIS CODE CUZ ITS BAD.
  14. How to style the details and summary dropdown menu
  15. END OF PART 1: PROFILE CARD
    1. PART 2: bot CARD
  16. Where is what my profile looks like currently:
  17. How to change your bot card background, SOLID
  18. How to change your bot card background, LINEAR-GRADIENT
  19. How to change your bot card background, RADIAL-GRADIENT
  20. How to change your bot card Name
  21. How to change your bot card chat count
  22. How to change your bot card chat count, LINEAR-GRADIENT
  23. How to change your bot card bio
  24. How to change your bot card username
  25. How to change the line on the bot card
  26. How to change the the bot card border
  27. New Update! (Bot Card)
    1. NOTE: make sure to check out profile card again, there is a update in that section!
  28. How to color the bot card star
  29. How to fade the bot card image
  30. How to center the bot card name
  31. END OF PART 2: BOT CARD
    1. PART 3: EXTRA
  32. How to change the search for characters font
  33. How to change the create a character font
  34. New Update!
  35. how to change the icon on the chat count ribbon
  36. How to Center or position the Search Characters box and Lastst box menu
  37. How to change the color of all icons
  38. How to Make the Summary, and details dropmenu smoother
  39. the end, thank you for viewing this! 冀
  40. 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:

Alt Tag

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!

Alt Tag

How to put the star thingy on your background, simple customizing:

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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

  1. How i Customize my Janitor.Ai Profile
    1. PART 1: Profile CARD
  2. Resources
  3. Here is what my profile looks without codes, simple customizing:
  4. How to put the star thingy on your background, simple customizing:
  5. How to Center your profile picture:
  6. How to change the size of your Profile picture:
  7. How to change the shape of your profile picture to square:
  8. How to center the following Button:
  9. How to Customize your following button:
  10. How to change the text only in your Bio
  11. How to Fade Your Profile picture
  12. New update! (profile card)
  13. UPDATED THIS CODE CUZ ITS BAD.
  14. How to style the details and summary dropdown menu
  15. END OF PART 1: PROFILE CARD
    1. PART 2: bot CARD
  16. Where is what my profile looks like currently:
  17. How to change your bot card background, SOLID
  18. How to change your bot card background, LINEAR-GRADIENT
  19. How to change your bot card background, RADIAL-GRADIENT
  20. How to change your bot card Name
  21. How to change your bot card chat count
  22. How to change your bot card chat count, LINEAR-GRADIENT
  23. How to change your bot card bio
  24. How to change your bot card username
  25. How to change the line on the bot card
  26. How to change the the bot card border
  27. New Update! (Bot Card)
    1. NOTE: make sure to check out profile card again, there is a update in that section!
  28. How to color the bot card star
  29. How to fade the bot card image
  30. How to center the bot card name
  31. END OF PART 2: BOT CARD
    1. PART 3: EXTRA
  32. How to change the search for characters font
  33. How to change the create a character font
  34. New Update!
  35. how to change the icon on the chat count ribbon
  36. How to Center or position the Search Characters box and Lastst box menu
  37. How to change the color of all icons
  38. How to Make the Summary, and details dropmenu smoother
  39. the end, thank you for viewing this! 冀
  40. 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:

Alt Tag

How to change your bot card background, SOLID

Copy the code, and paste it in settings.

<style> .css-1s5evre { background-color: #0b0314; } </style>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

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>

Alt Tag

just replace ’Lime` with any color you want, and that is it!

Alt Tag

it also changes the color of these little icons too!

  1. How i Customize my Janitor.Ai Profile
    1. PART 1: Profile CARD
  2. Resources
  3. Here is what my profile looks without codes, simple customizing:
  4. How to put the star thingy on your background, simple customizing:
  5. How to Center your profile picture:
  6. How to change the size of your Profile picture:
  7. How to change the shape of your profile picture to square:
  8. How to center the following Button:
  9. How to Customize your following button:
  10. How to change the text only in your Bio
  11. How to Fade Your Profile picture
  12. New update! (profile card)
  13. UPDATED THIS CODE CUZ ITS BAD.
  14. How to style the details and summary dropdown menu
  15. END OF PART 1: PROFILE CARD
    1. PART 2: bot CARD
  16. Where is what my profile looks like currently:
  17. How to change your bot card background, SOLID
  18. How to change your bot card background, LINEAR-GRADIENT
  19. How to change your bot card background, RADIAL-GRADIENT
  20. How to change your bot card Name
  21. How to change your bot card chat count
  22. How to change your bot card chat count, LINEAR-GRADIENT
  23. How to change your bot card bio
  24. How to change your bot card username
  25. How to change the line on the bot card
  26. How to change the the bot card border
  27. New Update! (Bot Card)
    1. NOTE: make sure to check out profile card again, there is a update in that section!
  28. How to color the bot card star
  29. How to fade the bot card image
  30. How to center the bot card name
  31. END OF PART 2: BOT CARD
    1. PART 3: EXTRA
  32. How to change the search for characters font
  33. How to change the create a character font
  34. New Update!
  35. how to change the icon on the chat count ribbon
  36. How to Center or position the Search Characters box and Lastst box menu
  37. How to change the color of all icons
  38. How to Make the Summary, and details dropmenu smoother
  39. the end, thank you for viewing this! 冀
  40. 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>

Alt Tag

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.

Edit
Pub: 23 Dec 2024 19:51 UTC
Edit: 05 Feb 2025 07:29 UTC
Views: 3311