Thank you for stopping by! My name is Crowbird, and I wanted to create a place for those to consult when it comes to CSS, as well as a location to store what I create. Feel free to use these codes and edit them however you wish. My only ask is that you replace the images you find used in my custom codes, as I have created them myself (the images will be watermarked once you copy-paste them). I will try my best to organize the code to be as user-friendly as possible, but please understand that many of these elements (such as images) require some fiddling with to fit your profile. If you’re having difficulties with something, copy-paste your code into ChatGPT with your specific question (it’s saved me too many times to count!), or reach out to either me or fellow creators in the Janitor.AI creator server. You can also find me in Dropsy’s server as well, where I am very active and occasionally stream CSS classes/demonstrations! With that being said, happy coding, and I hope you enjoy! <3

What are CSS classes? They are what define what you’re working with. You will oftentimes see them as a mix of numbers and letters, or text, with a period before them. In order to adjust something, you need to include the class.

Class example: “.css-18bnokj"

Um... how do we find these classes?

Easy! On desktop, left click and select “inspect” or “Ctrl+Shift+C” to bring up the inspect element page. From there, we continue as such (numbers match the photo included):

This is an incredibly important skill to have, as you will be using this to find your custom class codes (class codes that are unique to every individual).

Pretty cool, huh? And convenient, because you can now actually just copy that code you adjusted, and paste it directly into your CSS editor!

.css-o5an2m {
font-family: times new roman;
font-weight: bolder;
color: red;
Text-shadow: 0px 0px 4px red;
}

All right, I got this code copied. Awesome! But... where do I paste it?

Before the handy dandy CSS update some time ago, we used to have to adjust our code in the settings section (you’ll often see this show up in older guides and videos). But now, we can locate it on our profile page.

See how I put “<style></style>” around my code?

That’s how you get those codes to work! For all your styling codes (codes that have .classhere in it), they NEED to be enclosed in the <style> and </style>.

As I just mentioned in my above note, the position of your codes in your CSS matters. I cannot stress the importance of this enough.

What's the correct way to organize your code?

Firstly, HTML will always go above your <style></style> coding. Always. If you intermix the two, your code won’t work. HTML codes are those that are enclosed by <div></div>, and are utilized in more complex creations. As I mentioned earlier, HTML is not necessary for the most basic profile customization experience, thus I will not be going into deep detail here. But for those who are curious: HTML codes are essentially akin to containers that can be utilized to create and hold things such as images, animated elements (many of which are presently disabled on janitor), tables, drop-downs, text boxes, etcetera. You can find a list of these in the "commonly used codes" section of this website.

Secondly, though this rule isn’t as strict, try to arrange your style codes in the way your profile’s css is naturally laid out. What I mean by this is, in inspect element, you can see how your codes go: top to bottom. It doesn’t need to be exact in my experience, but if something isn’t working, try rearranging it. For example, you don’t want your bot card adjustment codes to go above your profile picture code.

And that's it for the beginner's guide!

I hope that this was able to provide you with a good starting point to understanding the basics of CSS. To those who are looking for more in depth explanations, check out the guides below:

I wouldn’t be where I am today in terms of CSS without the assistance of some wonderful people who went out of their way to provide help just like this guide. In fact, it’s them who inspired me to even begin this!!! So please, I implore you to also look at their guides and resources. Especially Luna’s, as she goes super into detail for pretty much all of the elements and code classes.

LUNAXLEE’S GUIDEOISHIIDESU’S GUIDEJANITOR.AI CREATOR DISCORD

Specifically, check out the “profile customization” section under the “creator corner” in the janitor.ai creator discord

If you've gotten this far, I want to thank you for being present. But more than that...

I have one last thing I'd like to say:

be kind to yourself!

I can assure you that every person you meet on Janitor.AI who is at least somewhat confident with CSS, began at a point where they felt lost, confused, and frustrated over it. I, myself, had to stumble quite a lot; I still have my moments on occasion! I’m sure you’ve heard this sentiment before, that all it takes is practice… but it’s no less accurate. CSS is akin to trials by fire, so expect personal adjustment, and the occasional trip and fall. It’s okay! That’s what others are here for, so don’t be afraid to reach out if you’re having trouble! You got this. I believe in you!

Hey there! Feeling more cofident with CSS..? Awesome.
As the title of this section implies, you'll find a list and database of codes I frequently use. Feel free to reference it at your leisure!

IMAGE:

<img src="IMAGE URL HERE" style=”width:100%;”>

TURNING AN IMAGE INTO A LINK:

<a href="LINK HERE">
<img src="IMAGE URL HERE">
</a>

ACCORDION DROP-DOWN:

<details style="list-style: none;">
<summary> Header Text </summary>
the text here will be inside the drop down. You can also add aditional <div>'s here, too!
</details>

ACCORDION DROP-DOWN (using an image instead of text):

<details style="list-style: none;">
<summary> <img src="IMAGE URL HERE"> </summary>
</details>

HEADER:

<h3 style="font-size: 100%; text-align: center;">HEADER TEXT HERE</h3>

TABLE:

<p class="list">
Name <br>
Name <br>
</p>additional style code:
.list {
column-count: 2;
width: 49%;
}

TEXT ADJUSTMENTS:

font-variant: all-small-caps;
text-shadow: 1px 1px 5px white;font-style: italic;
text-transform: uppercase;font-family: Times New Roman
font-weight: bold; OR :400px;

HIDING CONTENT:

display: none;

FLEX (when you want images next to one another in a container):

display: flex;

CENTERING (not all three at once are necessary):

margin: auto;
justify-content: center;
align-items: center;

SCROLL (for turning a text box into a scroll):

height: 200px; /* you must define a height for this to work */
overflow-y: auto;

DARK GRADIENT (ex: over an image):

mask-image: linear-gradient(#000000, #0000000f) !important;

GRADIENT BORDER (for containers):

background:
radial-gradient(circle, rgba(191,154,48,1) 0%, rgba(246,226,129,1) 50%, rgba(191,154,48,1) 100%) 0 0 / 100% 2px,
radial-gradient(circle, rgba(191,154,48,1) 0%, rgba(246,226,129,1) 50%, rgba(191,154,48,1) 100%) 0 100% / 100% 2px;background-repeat: no-repeat;

TOOLTIPS:

/* hover text for tags, bot names, the beginning event badges tooltips */.css-ataym9 {
background: black;
color: white;
font-family: times new roman;
padding: 7px;
margin: 4px;
}List of tooltips (credit to @ursium/dormirmir):
.css-ataym9 - tags, bot names, the beginning event badges tooltips
.css-1z0vr2k - music mania creator badge tooltip
.css-1xt7epy - music mania reader badge tooltip
.css-yl8rnf - "follow creator" tooltip
.css-1mdyyu3 - "unfollow creator" tooltip
.css-b19ce0 - tags menu tooltips
.css-sdza1q - bot descriptions tooltips

BOT NAME UNDER BOT PICTURE:

.chakra-stack.css-1s5evre a {
display: flex;
flex-direction: column-reverse;
justify-content: center;
}

MAKING BOT PICTURE LONG:

.css-1q7rmf0:before {
height: 110px;
}

TRANSPARENT BOT CARDS:

.css-0 { background: rgba(1, 1, 1, 0) !important;}
.css-dltla {
background: transparent;
}
.css-1sxhvxh {
background: transparent;
}
.css-1jf56se {
background: transparent;
}

REPLACING THE CHAT RIBBON SYMBOL:

.css-euh5x6 svg {
display: none;
}
/* new symbol next to chat count */
.css-euh5x6::before {
content: "emoji here";
font-size: 15px;
}

CHANGING THE "LIMITLESS" TEXT ON LIMITLESS TAGS:

.css-1ylu7un {
Font-size: 0px;
}
.css-1ylu7un:after {
content: "your text here";
font-size: 12px;
}

REMOVING THE TEXT FROM BOT TAGS (thank you ghosty mwah):

.css-x2gqu0 {
display: flex;
overflow: hidden;
max-width: 60%;
width: 35px;
height: 0px;
line-height: unset;
align-items: flex-start;
position: relative;
}

REMOVES TRIANGLE SYMBOL FOR DROP-DOWNS:

summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}

CENTERS SEARCH FOR CHARACTER, FILTER, TAG BOX:

.css-zdpt2t {
margin: auto;
}
.css-mcoi9a {
margin: auto;
}
.css-m8ywhg {
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
flex: 1;
}
.Btn2-purple {
width: 100%;
background: transparent;
justify-content: center;
transition: 0s;
}
.Btn2-purple:before {
background-color: transparent;
}

INCREASE SIZE:

transform: scale(1.2); /* adjust 1.2 number as desired */

HOVER BOT IMAGE SATURATION:

.css-1q7rmf0 {
transform: none !important;
filter: saturate(0);
-webkit-filter: saturate(0);
transition: all 1s ease;
}
.css-1q7rmf0:hover {
filter: saturate(1);
-webkit-filter: saturate(1);
}

GLOW AROUND (class used below is for the whole bot card):

.css-1s5evre {
background: black;
transition: all 0.65s ease !important;
}
.css-1s5evre:hover {
box-shadow: 0px 0px 10px 2px rgb(255 255 255 / 67%);
}

MOVE POSITION:

transform: translate(50px, 100px); /* 50 pixels to the right, and 100 pixels down */

ROTATE:

transform: rotate(20deg); /* 20deg is counterclockwise */