Directory

What is CSS & HTML

Where to put CSS & HTML code

• About Me
• Pros and Cons to using About Me
• CSS Editor
• Pros and Cons to using the CSS editor
• Other functions
• Known bugs and risks when using About Me and the CSS Editor
• Some questions

How to format code

• Where to put your code
• Organize your code in order of priority
• Tags, and do you put everything in <style>?
• Do you put everything in their individual style element?
• Giving elements the same style
• Labeling what codes are for (CSS or HTML comments/notes)
• What not to put in your code

Expectations and limitations

Ethics (what to do, not strictly how to correctly design profiles)

Troubleshooting (How to fix issues)

What is CSS and HTML

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.

Where to put CSS

CSS codes are inserted into either the About Me section in Settings, or on the profile page’s CSS editor.

About Me

As mentioned in a previous section, About Me is located in the Settings page and is also where you type in your profile bio.

Back then, JanitorAI did not have an HTML editor for the profile bio, so the Settings page was the only way you could configure your profile card’s appearance before we were able to use it to customize the profile page.

About Me is still usable to this day to add CSS and HTML coding to your profile page, and in fact may be a more stable editor for the profile page than the profile customization tool.

To go to About Me:

1. Go to Settings
2. Scroll down to About Me
3. Click 'Show Editor' to open the About Me editor

When you're done pasting or editing your code, you have to click the 'Save Changes' button to save your work and to get your code to be applied on your profile. The 'Save Changes' button is located beneath the 'Appearance (Main Persona)' section.

Pros and Cons to using About Me

Pros:

• it is possible to use ‘notes’ (/* */)
• usable on mobile

Cons:

• there’s no way to see changes being applied live. You’d need to save your work, open your profile on a new tab and refresh it each time you save to see changes.

In-Page CSS Editor

This is an editor that is used directly on your profile page. 

Go to your profile page then click on the paint palette icon on your profile card (should be on the top right corner). This should bring out options to customize your profile page, such as background color or image, themes, and font color.

Along with these, a box will appear at the bottom. This is the CSS editor tool.

To edit your CSS and HTML code, click the 'Customization tools' button next to the selected element dropdown.

Beside the Customization tools button is the Save button. Its function is self-explanatory.

Pros and Cons to using the CSS Editor

Pros

• ability to see a live preview of your profile to see changes being applied

Cons

• unusable on mobile (unable to scroll)
• unable to leave notes (/* */)

Other functions of the customize profile page UI

Customize profile page functions

Change card background color: allows you to change all of the 'cards' on the page (profile card, bot cards)

Change background effect: allows you to apply an animated design to the background of your cards. Animations are provided by JanitorAI.

Change card text color: allows you to change the color of all text within cards

Change Background Image: allows you to change the background image of your profile page. You can set the opacity and blur effect of the image as well.

CSS editor functions

Pick element or the element picker: allows you to select an element on the page to get its class ID.

To insert an element's class, you have to press the 'click to insert missing selector' button at the top of the editor. This will insert the class within a style tag.

Selected...: a menu of all elements. Like with the element picker, you can click on the 'click to insert missing selector' button insert the element's class.

Reset unsaved: resets to the last saved instance of your code.

Hide custom css: disables your CSS/HTML coding. Important: this deletes your code; please read the 'Known bugs and risks when using About Me and CSS Editor' section for more info.

Live preview toggle: With this toggled on, you're able to see changes applied to your profile page as you add to your code.

Known bugs and risks when using About Me and CSS Editor

No autosave feature - risk

• Neither the editor or About Me provides an autosave feature that automatically saves your work. This is a huge risk, especially since several problems could happen while you’re inserting code into your profile, causing crashes and losing progress. It is highly advisable that you use a different platform to write your code on, or to save backups to.

Using the css editor after using About Me - risk

• This causes the code to override what you had saved in About Me. It’s best to just stick to just one place to use, or to always save your work.

Newbie mode - bug

• Newbie mode is functional, but saving work in newbie mode overrides code that was written in About Me and Pro Mode. This happens due to it saving on a separate data sheet. It is best to stick to About Me or Pro Mode.

Going over the character limit leads to your code being cleared - bug and risk

• The editor has a character limit. The character limit is unknown for now, but according to a user, they had pasted in a code that was 60-80 pages long on a google doc which ended up getting cleared from the CSS editor. This is due to them using a complex svg image. This can be prevented by simply avoiding writing overcomplicated code that leads to creating long style sheets.

Editor resizing - bug

• The editor screen increases in width the longer lines are in your code. It’s a minor bug that can be dealt with by simply relocating or resizing the editor. You can avoid this by writing shorter lines, or just ignore it if you’re pasting code from another platform anyway.

Profile page suddenly being directed to the error page while using the editor - bug and risk

• This usually happens when you’re editing HTML tags (ie: <p>, <h1>). It won’t send you to the error page each time you code in HTML, but since this is an existing bug that may cause you to lose your progress, it is best to save backups or not to directly code in the editor.

Hide custom css button clearing your css - risk

• Clicking this button indeed hides your custom CSS. However, if you save your work after hiding custom CSS, without unhiding it, this will delete your code. Backup your work before messing with this button.

Some questions

Why are some things disabled for CSS, like the use of url() or notes?

• The dev team sanitized CSS to disable certain properties and features due to a hacking incident some time ago. Disabling url(), notes, and more are necessary precautions to prevent this from happening again. These features do not appear on the CSS editor, but still appear on About Me. This is why when you want to leave notes, it is best that you use the About Me section.

What is the 'Edit Profile' button and why don't we use it?

• This is a text editor that was added to your profile page before the CSS editor was created, and was meant to allow users to edit their profile bio with the use of HTML. It functions the same as the editor for character bios. It is now generally unused as it's restrictive, as you may have noticed when using the editor on character bios; you can only do HTML but only some HTML tags, and only a handful of inline CSS. Using Edit Profile and saving your changes there also clears your CSS.

When customizing your profile, this button also resizes your profile card, which may make changes to your CSS inaccurate to what users see on their end. If you don't care for seeing this button/editor, you could give it the visibility: hidden; property to hide it from your view.

How to format code

It’s obvious it’s important. This section tells you how to better organize your code, etc.

Before anything though, if you are using About Me and 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 About Me), or go to websites like VSCode

Where to put your code

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. 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 images and text.

Organize your code in order of priority

This is another reason why it’s best to put all CSS codes at the bottom of the editor. 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.

Tags (Do I put it inside or outside the <style> section? And similar questions)

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.

Do I have to put everything in their individual <style> element?

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>

Giving elements the same 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.

Labeling what codes are for (CSS or HTML comments notes)

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 (HTML comment): <!-- TEXT -->

Note; Only use CSS and HTML comments in About Me. Read why here.

What NOT to put in your code:

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

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.

Ethics (what to do, not strictly how to correctly design profiles but just common sense)

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.

Troubleshooting

The code isn't working/is not working correctly!

• A common error coders have when they code; there's a missing character in your code. Make sure you didn't forget a semicolon or a curly bracket ({ or }) or any other character.
• You have different class IDs as others/as the code that was given. By class ID, i mean this: .css-sdkhsd. If this is the case, you'd have to right-click then press Inspect Element to look for the class ID.
• You didn't put it on the About Me field in the settings page or in the CSS/HTML editor. Rewriting this here because many of you skip over instructions -.- /j. The Source Code in the text editors does not save non-html coding.
• You forgot to put your code in between <style> and </style>.
• You didn't put the whole code. Maybe you got code from my collection or from others, but you thought that some parts of it were unneeded or you unintentionally cut things out. Paste in the whole thing, and maybe ask someone knowledgeable in css about the purpose of the other parts.
• There are characters that shouldn't be in there. Maybe there's a random slash in there, or you accidentally left out a semicolon. Frick semicolons bro
• Conflicting pieces of code. Perhaps you put in something to remove a gradient, but it shares the same class ID of an element you were going to modify. Same as trying to make something visible when you had another thing making it invisible. Make sure to take note of what you put in your About Me section.
• You copied codes from my collection, but failed to change the capitalized words to the correct values. Each code should have instructions on what to replace.
• You already have put in coding for that element/ID. If this happens, just try placing the properties (like background-image, color, etc) in the existing section of code for that element.
• You need to put a linebreak between tags. for example, you have the embed link things for your font and immediately put <style> after it. There needs to be space in between these two for it to function.
• You'll need to put !important before the semicolon.  This is only needed to be done when the site refuses to change the style of the element due to it prioritizing the default style of the website. Do it like this: background-color: white !important;

Going on the profile sent me to the reload page!

• This is most likely because the code you've put in is incorrect, thus resulting in an error. I've only seen one case of this happening, and it's because someone had been messing with the code for the audio player. I am not sure what specific things triggers this, but here's how to stop your profile from directing you to the reload page:
• Go to the main page of the website.
• Access the Settings page through the top right corner drop down menu.
• Delete the code that likely caused this issues.
• Afterwards, look over your code to see what could have made it go awry.

Updated on: 07/08/2025