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.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-1ifv49 - bot names
- .css-tn683j - username on bot card
- .css-1lgnt2x - line that separate tags and preview, connected to the star
- .css-19ihot3 - said star ^
- .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-rioh04 - bot imageProfile 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-hsi2ui - profile picture
- .css-17i40f - edit button for profile picture
- .Btn - follow button
- .css-1x04uxb - Edit profile buttonWebpage
- .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 footerTag 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 selected

<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>

Written by ursium. The follow button is made up of two parts, the button itself, and another class id that sits behind it to act as a border. You will have to customize each separately!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>Styling the button broken up into two parts, as mentioned above. Styling the button itself:
<style>
.Btn:before {
color: COLOR; /* text color */
text-shadow: VALUEpx VALUEpx color; /* can add text shadow to said text */
background-color: COLOR; /* background color */
font-family: FONT;
/* follow button content */}
</style>Styling the border around it:
<style>
.Btn {
background: COLOR; /* follow button border */}
</style>Just a basis to work off of. Add and omit things as needed.

<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 and Ikyokeye<style>
.css-dltla, .css-1jf56se, .css-1s5evre, .css-19n2nzy {
background: rgba(1, 1, 1, 0) !important;
}
</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..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:

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

Credits to Ikyokeye for the original entry in the original site.
Due to this having various steps, I'll provide a little table of contents here: (just make use of the arrow in the bottom right to get back here)

Google Fonts is a library of open source and free fonts offered by google itself. We make use of this website because it's the most trusted site (and perhaps the only one) we can use. Lead developer of JanitorAI, Shep, said that he'd want the website Dafont to be used as well, but at the moment nothing is set in stone yet and google.fonts is still our main go-to for font sources.In this section I'll just be doing a quick discussion of some of the terminology. But you can otherwise just head to the next part.First, let's start with Fonts and Noto.

Determining the difference between these two first so you don't get confused as to which bunch to pick from. Because honestly, it's nearly all the same. You only need to pick Noto if you need a font for a specific language.

To set up, we need the embed code. Here's a step by step process on how to get it:First, let's pick a font. For this demo, I'll pick Montserrat.

Upon clicking the font, you'll be taken to the page bellow. Click on the Get font button to get to the next page.

Note, you can get more than one font in one embed code. Just redo Step 1-2; go to the fonts page and pick another font, then click Get font on that font's page.After clicking get embed code, you should be taken to the page below. Make necessary adjustments to the font before copying the embed code by simply clicking the Copy code button in the grey box, then paste it into your editor. Preferably paste it above the section of your code that styles your font, or in a separate area where you'd put your embed codes.

To apply custom font to the text on the website, we have to go back to the embed code page and copy the following:

This is the CSS class that would basically apply the font. To use it to apply font to the certain text, simply replace the Class ID to the ID of the element you wanted to have the custom font. If you chose a font with many variations, it may have more CSS classes.In this case, I want to use this font for my bots' names.So, I copy the following:
.montserrat-<uniquifier> {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}Then I change .montserrat-<uniquifier> (the class ID) to the one for the bot names, which is .css-1ifv49. It should look like the following..css-1ifv49 {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}Put the code in in your editor. Remember, this should be put within <style>.Go here for a list of known universal class IDs.If you want the font to have color, just do this:
.css-1ifv49 {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
color: COLOR; /* Replace COLOR with the color you want */
}

To 'type' with custom font, we once again go back to the embed code page for the CSS class.

This specific CSS class' ID requires a uniquifier. Other fonts may not need this (until you need to assign different colors). For this demo, we'll apply a unique ID (but you can leave the some class IDs as is).So, we have this pasted into the editor:
.font1 {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
Where font1 is the class ID.Outside of <style>, in whichever part of the page you want the text to be, apply the class ID as a class in HTML tags. Like so:For all paragraphs within the page:
<p class="font1"> TEST TEXT </p>Or simply do:
<div class="font1"> TEST TEXT </p>

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-rioh04{
filter: FILTER(100%);
-webkit-filter: FILTER(100%);
-webkit-transition: all 0.2s ease;
}
/* HOVER ACTION */
.css-rioh04: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-rioh04{
-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

Credits

Original Creator

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