NOTICE

Please read before carrying onto the guide!As per a recent Creator Server meeting, url() will be permanently disabled due to it being potentially abused for malicious intent. Again, this doesn't affect the <img srs=""> tag. However, this also means that we cannot have music players either.Because of this, we will be removing or replacing code that makes use of url() on this guide in the future. We will try to provide new code and resources for backgrounds and such, and the devs have said that they will provide a different means to upload custom images.Here are other disabled features (no further updates on them yet):media query - used for responsive site design
keyframes - used for animation
CSS notes - used for labeling (/* Text */)Attempts at adding these will result in these parts of the code to be deleted on the CSS editor on the public view of your profile. The full version of your code may still be available in your About Me section. Best thing to do is to copy it from that field so you can save it in a separate document.Devs of the JanitorAI site have said that they will be reverting back to the old version, however there's no updates as to when. It is best to save a backup of your code and to work around what are disabled.If you've read through all that, you can continue by pressing the home button.

• Home

Actually, let’s start with this question: How do you make a website?We start with that question as making a website requires three coding languages; HTML, CSS, and Javascript.Javascript - Language used to make the website interactable for users. As we cannot (and are not allowed to) tweak with the Javascript of the site, this is the last time I’ll mention this language.HTML - HyperText Markup Language. HTML is used to create and structure a website’s content. You should know what HTML looks like, as we are able to edit our profile and character bios with the use of HTML. You could see HTML coding when you open Source Code, the About Me section in settings (aka the huge block of code you see when you first started editing in About Me), or when you open Inspect Element.CSS - Cascading Style Sheets. Another coding language for structuring and styling the content that you’ve implemented with the use of HTML (or XML). Initially, we are not able to see CSS on the JanitorAI website unless we open Inspect Element. However now we are able to put it into About Me and the HTML/CSS editor to customize our profiles.So, how is it possible that we are able to code CSS into our profiles?This is because the About Me and CSS/HTML editor sections are like entry points to your profile’s HTML/CSS document. Fun fact: in the earlier versions of JanitorAI, the ‘Settings’ page was the only way for you to edit your profile, and the About Me section was (and still is) the profile bio.

It was mentioned where in the previous section, but here’s some instructions:

Notes:
- The About Me field in the Settings page is still usable for putting in code, but it's recommended to use this new field so it's easier to view your view your changes without having to switch between tabs. However (at the moment), you can only see the results of your coding after you click the save button.- Just like the About Me field, this editor directly accesses your profile bio (profile card).- Your bio's initial contents (as well as any coding you've put in About Me) will also automatically be put in here the first time you open the editor.- Remember to backup your code before using the editor for the first time.

It’s obvious it’s important. This section tells you how to better organize your code, etcBefore anything though, if you want to test your code without having to go back and forth between your profile and the settings page, you could tweak coding on Inspect Element (the changes are not permanent so you will still have to put the code in the editor), or go to websites like VSCode

Let’s get this out of the way: for your sake, put all CSS classes (codes), ones that are meant to style after the content that was already in About Me or the CSS/HTML editor (from editing profile bio). This is so you know where everything is.The only exemption to this are elements that you are adding to the bio or the profile page with the use of code. Elements like the audio player or images, which belong in the bio part of About Me and CSS/HTML editor.

This is another reason why it’s best to put all CSS codes at the bottom of the editor, after the HTML that’s from the profile bio. The way the website works is that the HTML document (basically the script that contains all content of the webpage) is read from top to bottom. It loads in what is read first in the script.The order of the coding also may affect the functionality or the performance of the overall page.

To save some time, I recommend going to sites like w3schools.com to learn about other HTML and CSS tags.But basically, tags are the things that call the function of the code. For example, in the Source Code of your text editors, you will find that each paragraph is put within <p></p>. In this case, p means paragraph. It’s safe to say that all things that are placed inside ‘<’ and ‘>’ is a tag.For styling (using CSS) we mostly make use of <style>. If you’ve noticed, for each (or most) base code I’ve put in this doc I put <style> and </style>. The only way for them to work is if you put it within style, as this tag dictates that the code is to be used for styling content.So what specifically belongs under a style tag? Look at the codes I’ve provided, then you’ll see it’s the code that includes the class ID and the properties that you’ve assigned to it (properties are the things like ‘color’, ‘border-style’, ‘background-image’).Ex:
.css-0 {
background-color: white;
}You may also see bits of code that start with @keyframes or @media. These belongs within style too.

The truth is, no. The reason why I put each base code I’ve provided here is because I know the people going into the guide would skip the introduction where I would have put this explanation. I also put them all in style (the ones that require it anyway) on the guide to make it idiot proof. No offense.But yes, anyway, you can put every CSS code within one <style>. Like so:<style>
.css-1uodvt1 {
padding-top: 0px;
flex-direction: column;
justify-items: center;
text-align: center;
}
.css-rioh04{
-webkit-mask-image: url(IMG URL);
mask-image: url(IMG URL);
-webkit-mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-position:center;
mask-repeat:no-repeat;
}
</style>

You don’t need to give each class ID their own sections of code if they’ll have the same properties/design. So instead of this:.css-1ifv49 {
}
.css-tn683j {
}
.css-x2gqu0 {
}Do this:
.css-1ifv49, .css-tn683j, .css-x2gqu0 {
}You can do this with however many other class IDs. This prevents you from overloading your page with CSS, which may affect performance too.

Label sections of your codes like this, so you don’t confuse yourself:/* pfp, username, follower count */
.css-1uodvt1 {
padding-top: 0px;
flex-direction: column;
justify-items: center;
text-align: center;
}
/* profile picture shape */
.css-hsi2ui {
-webkit-mask-image: url(IMG URL);
mask-image: url(IMG URL);
-webkit-mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-position:center;
mask-repeat:no-repeat;
}Basically encase words within /* */. Text within them will not be read as code. Just remember that this only works within the style element.To label outside of <style> you'd have to do this:<!-- TEXT -->

Or basically what is unneeded in code. You can also go to the Ethics portion of this guide.- The fundamental tags of an HTML document.
I mean, the following tags:
<!DOCTYPE >
<html> </html>
<body> </body>This is because the process of adding coding in About Me or in the CSS/HTML editor is just you directly injecting code into the site's HTML document. The tags above are unneeded as these are already included in the webpage's document. In short, you do not need to insert another HTML document into the HTML document.

Expectations
1. Expect that things will not look the same for mobile and PC. Mobile and PC screens do not have the same dimensions, sizing, and even some elements have different IDs.2. Expect that things will not look the same for others. When you’re customizing your profile you are customizing the version that you see. The sizing of elements in your profile may be different for others, especially since you customize your profile around certain elements that only you would be able to access on your profile (like the edit profile button).3. Remember that customization that you can do is only visible on your profile. Your bot card design will not be visible outside of your profile page.Limitations
1. If it is not obvious already, you are only limited to customizing the profile. Your profile is the only webpage that has something like the About Me field or the new CSS/HTML editor. The Source Code function on the text editors for character and profile bios only allow a limited amount of HTML coding (this does not include CSS).2. There are only so many things that can be done with CSS. Like mentioned before, CSS is used for structuring and styling the content that you’ve implemented with the use of HTML. If there are things only possible for Javascript, then it is only possible if you use Javascript— which cannot be used on JanitorAI.3. Just to reiterate, we should not use (or even be allowed) to use Javascript. This is due to security concerns.

1. Do not incorporate NSFW media. Yes, JanitorAI is an 18+ site but be sensible. You shouldn’t put actual porn as a part of your design, or have porn sounds autoplay and on loop. People are here to read about cock and balls, not to see them.2. Avoid using Javascript that majorly affects the website’s functionality, or overall do not use Javascript.3. Avoid incorporating designs (images, color schemes, etc) that may cause harm to others. There are people sensitive to flashing lights, bright colors, and more as these can affect their physical health. Remember that people can have seizures from them or intense headaches/migraines.4. Readability over aesthetic. (Kind of like adding onto number 3). For your and other users' sakes, prioritize your profile being cohesive, meaning all its contents can be read and accessible. If readability cannot be achieved with the plan that you had on hand, think of a different way to incorporate the design, replace it with a different design, or just don't do it at all.5. Credit the original author of your code - If you are copying directly from someone's profile credit that creator. It's common decency/common sense. If we do not like our bot definitions being stolen then people do not like their css coding to be copied without their permission.6. In addition to 5, credit the person who initially came up with the design - It's also just common decency to credit people who came up with the design that you've blatantly copied.

Class IDs are the identifiers for certain elements. AKA, these things: .css-1fjbtim. If it isn't obvious, these are the most important part of your code. It dictates which element is being altered/manipulated.If you've read the troubleshooting guide you will learn that one of the biggest reasons why code isn't working is due to the class ID being 'wrong'. How does it become 'wrong'?1. The class ID in the code is incorrect and instead manipulates another element. (Ex: you want to change the appearance of a box, but the class ID you got is instead for a triangle.)2. The class ID in the code was initially 'correct' so it was working before, but now it doesn't. Ways it 'changed':
a. There was a site update. Each time there is an update to the site, some of the class IDs change.
b. You changed an element outside of the CSS and it changed the class ID (Ex: changing the color of your profile card through Edit Profile changes the class ID for the element of the profile card's color.)3. The class ID given to you is actually unique to the person who gave it to you. Meaning, the element on your profile page has its own class ID which isn't similar to others. (Ex: person 1 has the class id .css-1 for their username, person 2 has the class id .css-2 for their username.)If this happens, you'd have to search for your own class ID through Inspect Element.

This button lets you view the page in different dimensions (like the size of your phone or tablet).

This is a section listing class IDs that are known to be universal (not unique). So if you don't find an ID for a specific element here, it's likely because it's unique or the ID you're looking for is for an element that's too specific. If you find that a class ID has been changed due to a website update, or that it's wrong, you're free to dm me @ lunaxlee on Discord.IMPORTANT: due to certain circumstances we are NOT able to update this list as accurately and immediately as we could. If the class IDs do not work for you, you have to look for it yourself, or you will have to ask someone to look for you.IDs Shared by Elements
Class IDs that affect more than one element.
- .css-0 - bot and profile card border and gradient.Bot Card
All bot card class IDs should be universal. If there are some here that do not work, it's likely that an update made some elements have unique class IDs.
- .css-zgqw37 - bot names (.css-azzeyf for halloween bot cards)
- .css-1fee8z7 - username on bot card (.css-1kgeezy for halloween bot cards)
- .css-1lgnt2x - line that separate tags and preview, connected to the star (.css-1ov83hg for halloween cards)
- .css-hl99y6 - said star ^ (.css-1bgu6ps for halloween cards)
- .css-x2gqu0 - tags on bot cards (excluding limitless tag)
- .css-1ylu7un - Limitless tag
- .css-96l1id - character bio preview on bot cards
- .css-wexxj8 - chat count ribbon
- .css-1q7rmf0 - bot image (use .css-rlobw7 for border radius)
- css-9r71k4 - bot name for bots with Halloween tags
- .css-1sxhvxh - new bot card background colorProfile Card
Note: Many elements on the bot card are unique. You'll have to inspect element to find ones that you may need.
- .css-1uodvt1 - container for profile picture, username, follower number, badges, and edit profile button.
- n.css-hjkukh - container for ALL badges
- .css-x3wokz - container for Crystal Badge
- .css-c2uxn6 - container for Book Badge
- .css-18bnokj - profile picture
- .css-17i40f - edit button for profile picture
- .Btn - follow button
- .css-1x04uxb - Edit profile button
- .css-o5an2m - username (does not include verification badge. double check if your class id for username is this too)Webpage
- .css-w86fka - footer (bottom of page)
- .css-p641ht - header
- .css-spn4bz - footer text (content & privacy policy, term of use, etc)
- .css-1kfwg46 - footer text container (use if above class id does not work)
- img.chakra-image.css-0 - stars on footer
- .css-1cd408u - public characters text
- .css-1qj3ulc - jai logo textTag Menu
- .chakra-button.css-1n2in4t - tag menu button on default (bots are not being filtered by tag)
- NOTE: this ID may now be unique. Please inspect first. .chakra-button.css-1p8dq80 - tag menu button when bots are being filtered by tag
- .chakra-ui-dark .css-irb94a:not([data-theme]), [data-theme="dark"] .css-irb94a:not([data-theme]), .css-irb94a[data-theme="dark"] - tag menu background/box
- .css-dcyl1x - 'Tags' text
- .css-1w58nos - tags when unselected
- .css-oqdsp6 - tags when selectedWebsite Update Buttons
Aka the box that shows up when the website has an available update. Credits to Maddieismystar for finding these
- .css-c0nfge - dismiss button
- .css-1enp3j4 - click me to update
- .css-xi606m - new update available text
- .css-1duo6l5 - box container (the grey box)Profile Page Character Page Numbers
- .css-1gpctw1 - arrows
- .css-kzd6o0 - numbers when not selected
- .css-1xdrgup - numbers when selectedCustom Tags
Note: Since there are so many of these it's safe to assume that there could be more classes. If some of these do not work or if they do not cover all of the tags you see on your profile, please just look for the rest of the classes yourself.
.css-1t7cr7r
.css-nau46n
.css-te7bk9
.css-ig54u3
.css-1y4mmmh
.css-6rbyi7
.css-1cpu9xn
.css-15a9rzl
.css-bbh9r8
.css-1wup3jh
.css-4a6x12
.css-dh5wzu
.css-2z4d2q
.css-w6qtul
.css-asw0s3
.css-1uxpdiz
.css-1d8p23w

<style>
.css-1fjbtim {
opacity: 0;
}
</style>

<style>
.css-52az4s {
border-radius: 0px;
}
</style>

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

Credits to maddieismystarNote: This code makes use of a separate image to set the shape of your profile picture, aka mask. Make sure that the image you are using is transparent on the parts you want covered/where the shape doesn't show your profile picture.<style>
.css-hsi2ui {
-webkit-mask-image: url(IMG URL);
mask-image: url(IMG URL);
-webkit-mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-position:center;
mask-repeat:no-repeat;
mask-size: SIZE;
}
</style>

Replace IMG URL with the link of the mask you want to influence the shape of your pfp. Make sure the link ends in .png or .jpg. All IMG URL values should be the same.
Replace SIZE using this page for reference.

Original code by Rosewing, edited by ursium for the new update. Example in Rosewing's profile as well.<style>
.css-hjkukh {
position: relative;
justify-content: center;
/* badge centering */
}
</style>

Original code by ursium. New code by weirdykins.To center it, you can adjust the container that it (+ the options button) are housed in:
<style>
.css-y9k5u7 {
justify-content: center; /* centers the follow and options button */
}
</style>New code for follow button (includes text customization):
<style>
/* follow btn */
.Btn[data-following='true']:before { /* "followed" button */
position: absolute;
content: "TEXT" !important; /* input your text here */
color: #COLOUR; /* font colour */
border: NUMBERpx STYLE #COLOUR; /* border styling */
border-radius: NUMBERpx; /* how rounded the button is */
background-color: #COLOUR; /* background colour of the button */
font-family: FONT; /* set the font for the button */
}
.Btn[data-following='false']:before { /* "follow" button */
position: absolute;
content: "TEXT" !important; /* input your text here */
color: #COLOUR; /* font colour */
border: NUMBERpx STYLE #COLOUR; /* border styling */
border-radius: NUMBERpx; /* how rounded the button is */
background-color: #COLOUR; /* background colour of the button */
font-family: FONT; /* set the font for the button */
}
.Btn span { /* removes default "follow/followed" text */
visibility: hidden;
}
</style>

<style>
.css-96l1id {
color: COLOR;
}
</style>
Note: changes the color of the preview text on the bot card, aka the character bio that is being previewed on the bot card. Does not change the color of the text on the actual bot page.Change COLOR to your desired hexcode, rgb/rgba, or color nameExample:

For Gradient<style>
.css-1s5evre {
background: GRADIENT !important;}
</style>Replace GRADIENT...
... with linear-gradient -similar to the original gradient pattern of bot cards reference for linear gradient
... or radial-gradient -colors begin appearing from the middle reference for radial gradientYou may also refer to the Gradient Patterns for specific patterns.For Solid Color<style>
.css-1s5evre {
background-color: COLOR;
}
</style>Replace COLOR with the word of the color, a specific hex code, or rgb.
Examples:

For Image/Gif Background
<style>
.css-1s5evre {
background-image: url('LINK');
}
</style>
Example:

NOTE: this code is known to not work most of the time, likely due to the class IDs. I highly recommend to Inspect Element and check if the class IDs match the ones below. If they do not, replace the class IDs listed below with the ones for your bot cards.Credits to Silverado, Ikyokeye for the original code, and Crowbirdie for the new version.<style>
.css-0 { background: rgba(1, 1, 1, 0) !important;} /* sets css-0 as transparent; removes gradients*/
@media screen and (min-width: 48em) {
}
</style>
<style>
/*bot card general color*/
.css-12vfojg {
background: transparent;
}
.css-dltla {
background: transparent;
}
.css-1jf56se {
background: transparent;
}
.css-1s5evre {
border: none;
border-radius: 0;
}
</style>Example:

NOTE: This requires making .css-0 transparent. This will remove the default gradient and borders of the profile card, Public Characters box, bot card, and tags menu.<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: NUMBERpx;
border-style: STYLE;
border-color: COLOR;
}
</style>Change COLOR to any color. hexcode or rgba/rgb.
Change NUMBER to whatever thickness you want border to be.
Change STYLE to whatever style you want. Use this w3school page as a reference for this.Credits to Ikyokeye for the previous code.Example:

Credits to Maddieismystar<style>
.css-1jf56se, .css-dltla, .css-19n2nzy, .css-0 {
border-radius: 0px; }
</style>NOTE / EXPLANATION: .css-0 also needs to be affected IF you use .css-0 to change bot card borders.Example:

solid color (whole bot card, including image)<style>
.css-1jf56se {
background: COLOR !important;
z-index: 10;
opacity: OPACITY;}
</style>Credits to ikyokeye
Replace COLOR with the word of the color, a specific hex code, or rgb.
And replace OPACITY with a value from 0 to 1.0 (other values are in decimal; 0.1 to 0.9). The lower the value, the more transparent it is.gradient (whole bot card, including image)<style>
.css-0 {
background: GRADIENT !important;
z-index: 10;
opacity: OPACITY;}
</style>Replace GRADIENT...
... with linear-gradient -similar to the original gradient pattern of bot cards reference for linear gradient
... or radial-gradient -colors begin appearing from the middle reference for radial gradient
And replace OPACITY with a value from 0 to 1.0 (other values are in decimal; 0.1 to 0.9). The lower the value, the more transparent it is.Example:

Credits to Iorveths<style>.css-wexxj8 {background: COLOR/GRADIENT !important;}</style>
<div class="content css-wexxj8"></div>Replace COLOR with the word of the color, a specific hex code, or rgb.
OR
Replace GRADIENT...
... with linear-gradient -similar to the original gradient pattern of bot cards reference for linear gradient
... or radial-gradient -colors begin appearing from the middle reference for radial gradient

Credits to Maddieismystarimg.css-19ihot3 {
position: absolute;
/* Positioning image -- will vary for each person so play around */
right: -35px;
top: -30px;
height: [NUMBER]px; /* Resize as you want */
width: auto;
content: url("LINK");
}Replace LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make use of file hosting sites like imgur to upload your image and to get a link.
[NUMBER] with a number (for resizing).

Taken directly from the site. This is the code for the line in bot cards, connected to the star. Use this to mess around with the line.If there's a need, use .css-1ov83hg for the halloween cards' lines..css-1lgnt2x {
border-top: 1px solid rgb(175, 149, 230); /* 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: 80%; /* refers to the length of the line */
position: relative;
margin-top: var(--chakra-space-3); /* the space between the bot preview and the line */
margin-bottom: var(--chakra-space-3); /* the space between the tags and the line */
}

Written by ursium. This is just a basis, add and take things away as you need (i.e., you don't have to keep all the labeling notes in! Just trying to be user friendly).Customizing the tags:<style>
.css-x2gqu0 { /* bot card tags */
border: VALUEpx STYLE COLOR; /* the border. replace VALUE with a number to determine border thickness, STYLE with dashed, dotted, or solid for the style, and COLOR with a hexcode */
border-radius: VALUEpx; /* corner rounding */
background: COLOR; /* background color */
font-family: FONT; /* replace with your custom font if you are using one */
color: COLOR; /* text color */
box-shadow: none !important; /* this will make the default shadow go away */
}
</style>You can also customize how the tags appear when a user hovers over them:<style>
.css-x2gqu0:hover, .css-x2gqu0[data-hover] { /* tags on hover */
border: VALUEpx STYLE COLOR; /* refer to above */
background: COLOR;
transform: scale(1.1); /* enlarges it on hover */
}
</style>
Example:

For custom tags: you can go to the known universal IDs section to get the class IDs for the custom tags. Note that there's so many of them and there's a possibility that there are some that weren't found.

Credits to Ikyokeye<div class="overlay-gif"></div>
<style>
.overlay-gif {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('LINK');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
z-index: 2;
pointer-events: none;
opacity: OPACITY;
}
</style>Replace LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make use of file hosting sites like imgur to upload your image and to get a link.
Replace OPACITY with 0 (invisible), 1 (visible, won't show what's behind the gif), or any number between 0.1 to 0.9 (semi-transparent).

Credits to Maddieismystarimg.chakra-image.css-0 {
content: url("IMAGE URL"); /* .css-0 will affect the background on mobile most likely */ }Replace LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make use of file hosting sites like imgur to upload your image and to get a link.Example:

Credits to MaddieismystarNOTE: the class id .css-f4qq0w must be replaced as the class id for the Public Characters box is now unique. So if this code does not work, please Inspect Element first to get the correct class id..css-f4qq0w {
visibility: hidden; /* Removing 'Public Characters' */
}
.css-f4qq0w:after {
visibility: visible;
content: "NEW TEXT";
font-family: CHECK CUSTOM FONTS SECTION;
position: absolute; /* Absolutely important */
/* Positioning the new text */
left: 5px;
top: 0px; }Replace NEW TEXT with what you want 'Public Characters' to be replaced with.
And as said in all caps, check custom fonts section for how to apply custom fonts.Example:

NOTE: This on default puts the page doll at the bottom right of the page. Property change options for positioning are listed. Ways to make the page doll only show on mobile and putting more than one page doll is also listed.''<div class="page-doll">
<img src="IMAGE LINK" alt="Page Doll">
</div><style>
/* Page doll coding */
.page-doll {
position: fixed;
bottom: 10px; /* For positioning. Adjust as needed. Can change 'bottom' to 'top' */
right: 10px; /* For positioning. Adjust as needed. Can change 'right' to 'left' */
z-index: 1000;
}.page-doll img {
width: --px; /* Change -- to the size you want the page doll to be*/
height: auto;
cursor: pointer;
}
</style>If you want to add an additional page doll, you can duplicate the style code but make the class ID different (as well as the positioning). Here is an example;<div class="page-doll">
<img src="IMAGE LINK" alt="Page Doll">
</div>
<div class="page-doll-2">
<img src="IMAGE LINK 2" alt="Page Doll">
</div><style>
/* Page doll coding */
(Insert code for .page-doll ).page-doll-2 {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
}.page-doll-2 img {
width: --px;
height: auto;
cursor: pointer;
}
<style>If you want the page-doll to ONLY show on pc browser pages, and not on mobile, you can add this:@media (max-width: 600px) {
.page-doll {
display: none;
}
}If you have more than one page-dolls:@media (max-width: 600px) {
.page-doll, .page-doll-2 {
display: none;
}
}

Written by Ursium. Similar to the follow button, the total characters count is made up of two 'buttons.' The process for customizing it also the same.<style>
.Btn2-purple:before {
transition: none; /* gets rid of the animation on it */
background: COLOR; /*total chars background color */}
.Btn2-purple {
background: COLOR; /*total chars border */}
.css-9lg76n {
font-family: 'FONT';
color: COLOR; /*total characters text*/}
</style>For FONT, refer to the fonts section here.
As always, COLOR is to be replaced with the name, hexcode, or rgb/rba of your chosen color.

Written by Ursium You can customize the tags menu that users filter your bots in a few different steps.Note: replace the words in all caps with your own values such as: hexcodes for COLOR, numbers for VALUE, border styles (solid, dashed, dotted) for STYLE.First, the button to access the menu:<style>
.css-1n2in4t, .css-8l42c1 { /* tag menu button */
background: COLOR;
border: VALUEpx STYLE COLOR;
border-radius: VALUEpx; /* corner rounding */
svg {
fill: COLOR; /* color of the tag icon */
}
}
</style>For FONT, refer to the fonts section here.
As always, COLOR is to be replaced with the name, hexcode, or rgb/rba of your chosen color.

Next, how the tags appear on the menu. Please note that if you have set a new color to css-0, it will effect the background of the tags menu. Here is the code for customizing the tags:<style>
.css-1w58nos {
box-shadow: none !important; /* this will remove the default shadow. you could replace it with a new one if thats the style you like */
border: VALUEpx STYLE COLOR !important; /* border styling */
border-radius: VALUEpx; /* corner rounding */
background-color: transparent;
font-family: FONT; /* change the font of the tags */
font-size: VALUEpx;
color: COLOR /* color of text */
}
</style>

Last, you can customize how the tags appear once selected.<style>
.css-oqdsp6 {
box-shadow: none !important;
border: VALUEpx STYLE COLOR !important;
border-radius: VALUEpx;
background-color: COLOR;
font-family: FONT;
font-size: VALUEpx;
color: COLOR;
}
</style>

<a target="_blank" rel="noopener noreferrer nofollow" href="LINK DESTINATION"><img src="LINK" alt="ALT TEXT"></a>Replace LINK DESTINATION with the link you want the button to lead to.
LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make use of file hosting sites like imgur to upload your image and to get a link.
And ALT TEXT with the text you want displayed when you hover over it or when the image doesn't load.Examples on Iorveths' profile. Aka these images:

Credits to: OishiidesuThe following code is one way to create a working white button. It can be used as a basis to create your own buttons.First, the CSS portion of the code; this code needs to be put in a <style> tag:<style>
.pressable-button {
display: inline-block;
padding: 10px 20px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center; /* Center text in the button */
text-decoration: none; /* Remove underline from text */
color: black; /* Set text color */
font-family: sans-serif; /* Set font */
}
/* Change COLOR to whatever color you want. */
.pressable-button:hover {
background-color: COLOR; /* background color when you hover over the button */
}
.pressable-button:active {
background-color: COLOR; /* background color of the button after you click on it */
}
</style>Second, the HTML portion of the code. This will turn into the button and can be placed anywhere within the editor outside of <style><a href="LINK" class="pressable-button">Press Me</a>

WIP!

This text also involves coding in HTML (though it's easy, trust me). While I will show you how to do this I recommend going to w3schools for the Details page or in general how to style it, or go to the creator server for this forum post on how to do it if you find that this guide is confusing.To add the expandable section you make use of the following code (HTML):<details>
<summary>TITLE OF SECTION</summary>
CONTENTS OF THE SECTION
</details>Note that the code above does not belong within <style>. This element will also display within your bio automatically as well.Replace all capitalized words with the content that you want. You can either do text, images, or both. To put in image, you can use this code:<img src="IMAGE LINK" alt="TITLE OR DESCRIPTION OF THE IMAGE">And when you're typing text, I highly recommend doing:
<p> TEXT HERE </p>To style the title or the content, you will make use of the usual format we used to style the other elements of our profile. So, like this:
CLASS ID {
PROPERTIES AND VALUES
}
This code will of course belong within <style>.If you chose to stick with text for the contents, you can make the text bold, italicized, and etc with HTML, but for further styling you'd have to use CSSPROPERTIES AND VALUES
Properties are stuff like background-color and padding, whereas values are what we set them as (so, red and 5px according to the earlier examples). There's no way I'll list ALL of the properties you can/should use, so I'll again, point you towards w3schools, w3schools' example on how to style it or even ChatGPT to figure out a way to style, however I'll give you the base code with labels.<style>
/* Container of the content */
details {}/* Title container and text */
details > summary {}/* Styling for the content */
details > p {}</style>To remove or replace the arrow that displays on default next to the title, you can either:Put this property under details > summary:
list-style: none; (for no arrow)Or go to these pages to replace them:
Examples for changing the list style
Examples on how to set your custom bullet using your own images

WIP

A system font or web-safe font is one that’s already assumed to be on the vast majority of users’ devices.This section will provide:
- 'What is a web-safe font'
- how to use them
- other properties to use for fonts, and
- links to resources where you can see web safe and fallback fonts.

As mentioned before; a system font or web-safe font is one that’s already assumed to be on the vast majority of users’ devices. Meaning that these fonts should already be installed in your device.Web-safe fonts are perfect to use when you cannot/do not want to import fonts using embed codes or source links.Despite the name, though, web-safe fonts aren't 100% safe, in a way that there's still a possibility that these fonts may not have been downloaded or installed correctly in other devices. The possibility for this to happen is really low, but still, there is a possibility. So when we make use of a font, we always put in a fallback font.Fallback fonts will act as a backup if in case the font you wanted to use is not working for some reason. Fallback fonts typically are fonts from generic and common font families, like serif. If the fallback font doesn't work either, it will move onto the next fallback font, and then onto the next one if it doesn't work, then the next...

Web-safe fonts do not require adding in a source. You can type them in for the font-family field as is. Usually, the layout looks like this:font-family: font name, fallback font;The first font listed is the first one that will be loaded. Again, if the font doesn't work, it will move onto the next font. If that doesn't work, it will move on again...This means you can have more than two fonts listed in there. For example:font-family: Arial, Helvetica, sans-serif;If Arial fails, it will use Helvetica. If Helvetica then fails (while Arial does not work), it will move onto sans-serif. Note that your last fallback font must be one of the most generic families to make sure that, even if all else failed, you still have one font.Just a reminder that the code should look like this:
<class ID> {
font-family: <font>, <font>;
}

These are just other basic properties that you can add to your code to further manipulate the appearance of your text.Color
color: COLOR;
Change COLOR to hexcode, rgb, or the color word.Font size
font-size: SIZE;
Change SIZE to a number with the pixel unit (example: 15px), a size (small, large, etc.), a percentage (100%, etc), or anything that is listed here.Font weight (bold text)
font-weight: ;
Go here for a list of values.Font style (italic text)
font-style: ;
Go here for a list of values.

To give a text a 'glowing' effect, just apply the 'text-shadow' to your CSS class. I recommend going to w3schools' pages on text-shadow and box-shadow, or going to this site that has code generators for this. But it's simple, you just have to add the text-shadow property. Done like so:<style>
SAMPLE ID {
/* insert other properties */
text-shadow: 2px 2px 8px COLOR;
}
</style>

You are free to adjust the glow effect using the numbers.
Replace COLOR with your chosen color/hexcode.
SAMPLE ID with a class ID. You can click here for this guide's list of universal class IDs.As an example, here is my code that I use for my profile:
.css-2mfldf, .css-tn683j {
font-family: "Playfair Display SC", serif;
font-weight: 700;
font-style: italic;
color: #d4af37;
text-shadow: 2px 2px 8px #c4a747;
}If you want to give an element (specifically, a container) a glow then you can change text-shadow to box-shadow.

The codes displayed below have the automatic hover feature, meaning that the overlay will stay on the elements unless you hover your cursor over it.Credits to Iorveths

Note: if you don't want the filter to disappear upon hovering, delete the section of the code labeled HOVER ACTION. For the value FILTER, check this page to figure out how to add specific filters.all images (including profile picture, bot image, images located in profile card)<style>
/* FILTER CODE */
img{
filter: FILTER(100%);
-webkit-filter: FILTER(100%);
-webkit-transition: all 0.2s ease;
}
/* HOVER ACTION */
img:hover{
filter: none;
-webkit-filter: none;
transition: 0.2s ease;
}
</style>bot image only<style>
/* FILTER CODE */
.css-1yg1q7c{
filter: FILTER(100%);
-webkit-filter: FILTER(100%);
-webkit-transition: all 0.2s ease;
}
/* HOVER ACTION */
.css-1yg1q7c:hover{
filter: none;
-webkit-filter: none;
transition: 0.2s ease;
}
</style>

This can be useable for anything other than images.This code makes it possible to put images next to each other on the profile card, essentially making rows. The example below is taken from Iorveths' profile (profile linked after the code)Credits to Iorveths

<div class="row">
<div class="column">HTML CODES FOR IMAGES/GIFS</div>
<div class="column">HTML CODES FOR IMAGES/GIFS</div>
</div>
<style>
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
/* (optional) Responsive design for mobile devices */
@media screen and (max-width: 600px) {
.column {
width: 100%; /* Full width on small screens */
}
}
</style>Replace HTML CODES FOR IMAGES/GIFS with the HTML code that displays images on your profile card. You can access the code of images/gifs you have already uploaded before by opening the </> Source Code in the text editor. You may also use the code you used for clickable images, or go to this site that generates image code for you.

Credits to MaddyBlackbart]Example found here<style>
.css-79elbk{
content:url('LINK')
}
</style>Replace LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make use of file hosting sites like imgur to upload your image and to get a link.

Feel free to test if this could work as an alternative for page dollsCredits to Eeenku<style>
.css-1s5evre {
background-image: url ('LINK')
background-repeat: no-repeat;
background-position: POSITION;
background-size: IMAGESIZEpx;
}
</style>Values:
IMAGESIZE: size of the image/gif
POSITION: where to put it- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottomAlternatively: you could put these instead of background-position: POSITION;:
background-position-x: POSITIONpx;
background-position-y: POSITIONpx;And for background-size: IMAGESIZEpx;, you can do instead do either of the following:background-size: cover;
background-size: contain;Look here for more ways to do the positioning.

Credits to Maddieismystar<style>
.css-1yg1q7c{
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
</style>If you want to decrease the faded part, add more black like so:
(black, black, black, transparent)For more info on messing around with the gradient property, look here

Format:Link - Title/Description of resource

Format:Link - Title/Description of resource

Format:Link - Title/Description of resource

Format:Link - Title/Description of resource

Format:Link - Title/Description of resource

WIP

::before and ::after are pseudo-elements used to insert content before and after the element that belongs to the class ID it is used on. In code, you may see them like this:.css-1234::before {
insert css
}::before adds content before the element, whereas ::after adds content after the element.This can be used to add more form or style to pre-existing elements on a site. One of it's most known uses are for text. We typically use it to customize existing text on our profile pages, like our follower counts. An example:

The text 'To my 3641 followers, thank you!' initially used to just say '3641 followers'. I achieved this by using both pseudo-elements. Here's the code I used:.css-1ciz3n::before {
content: "To my ";
}
.css-1ciz3n::after {
content: ", thank you!";
}These pseudo-elements can be used to add other content like images.

Credits

Original Creator

Editors
Nickel
HappyEgg
MaddieIsMyStar
Ursium
Vistifice
LeashedLuxThank you to all those who contributed by sharing their code and other information. And also thank you to JAI devs and staff :>