Directory

What is CSS and HTML

How to input code for JAI profile / Where to put CSS codes

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.

How to use CSS on JAI Profile/Where to put CSS

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

1. Click Edit profile on your profile page.
2. Click the Edit CSS button.
3. Paste your code into the new field that shows up at the top of the page. It may take a while for it to load in. This new editor is both for HTML and CSS.

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

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

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

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

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:<!-- TEXT -->

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: 02/08/2025