Cyanoide's Janitor AI Profile Guides


Who am I and what this guide is for

Hi, Cyanoide here!
A little bit about me is that I am a bot creator who makes mainly Dead Dove bots. Before Janitor I had not even heard of CSS, blissfully unaware of what it was. Now I make what I would consider pretty profiles and this guide is aimed at teaching you how to do so as well. I am by no means a CSS expert, but I can share what I have learned.

If you have questions about CSS and are in Janitor's main Discord server, there is always the CSS Discussion thread. This thread is linked to the #bot-creator-sfw channel. There are some lovely people there who are wiling to help if needed!

For an example, this is my own profile which I have created with some help from the people in the CSS thread when I got stuck on things.
example

Some areas may be sparse with images while some may have a lot of visual guidance

Hello! This guide is very much a WIP, right now.
This will not be a complete CSS guide as there are already multiple of those out there. What I will be including here is mostly the styling that affects the profile bio, which will include some HTML, the available fonts, details/summary boxes and their styling, lists, the follow button and a bit more.

This whole section of text will be a mess until I fix it up later.


Table of contents:

(Note that this is not completely the current order but the intended order of things)

  1. CSS (Currently not done)
    1. General do's and don't-s
      -> Theme / Profile Picture
      -> Importance of Accessibility
      -> Colours and Contrast
      -> Fonts
    2. How to CSS
      -> Inspect Element
      -> Where to put the code (About Me section/CSS Editor)
      -> How to format and use the code + step by step examples of some coding
      -> Notes
      -> Borders and Backgrounds
      -> Hover state
      Notes recap
  • Resources

    Important info recap and general list of useful properties and what they do in only one short sentence

    1. Profile Picture
    2. Filters
    3. Bio background
    4. @, followers, badged and members since text/positioning
    5. Details/Summary + styling
    6. Ul/Li (lists) + styling
    7. Follow button
    8. HTML
  1. Clipping profile picture to a mask
    1. PC
    2. Mobile

New Table of Contents:

  1. CSS (WIP)
    1. General do's, don't-s and resources
      > Choosing a Theme / Profile Picture
      > Importance of Accessibility
      > Colours (Includes a bit of colour theory)
      > Fonts
      > Easy List of Links (All links mentioned in this section in an easy row)
    2. How to CSS
      -> Inspect Element
      -> The basics
      -> More use of Inspect Element
      -> Unique class-IDs
      -> Text styling (Maybe go back later to add a note about text-shadow and keeping things readable)
      -> Notes
      -> Borders and Backgrounds
      -> Hover state
      > Margin
      > Box-shadow (Basically repeat text-shadow)
      > Filters (more in-depth than the earlier mention)
      > Details / Summary
      > Lists
      > Bot cards (Layer explanation + recap on why transparent hex codes over opacity filter)
      > Page Dolls
      > Keyframes (At least an attempt at explaining in)
      > Short recap of important information
      > Media Query
    3. Easy Lists
      > List of Codes
      > List of commonly used properties

General do's and don't-s

So you want to make your profile pretty, but where do you start?
This section will be split up under a few different topics:

Theme / Profile Picture

I'd say there's not really a "right" or "wrong" place to start for your profile theme (unless your idea is complete visual overstimulation and eyestrain, in that case please rethink your plans). So personally, for a cohesive profile I'd say the best place to start depends on if you already a profile picture or not.
If you already have a profile picture, take a close look at your image and see if there's a distinct theme that jumps out at you; is it maybe something futuristic? Forest-y and nature focused? Fashion? Is it set in a cafe or restaurant? Wild west themed? Or even simply a character from a game or series with an extremely simple bare-bones solid background? Any sort of theme you can discern from your picture could be helpful.
Don't have a profile picture yet? Try to think about what kind of themes you like and search for a profile picture in that theme, or generate one.

So in short:
If you have a profile picture but no theme - Look at the picture and try to think of what theme would fit it.
If you have a theme but no profile picture - Try to look for pictures of that theme or generate one.

Want to generate a picture but don't know where to start?
I will mention 3 AI image generator site and guides to how to use them made by L-y-r-a, for their profile, click -> here

- Bing AI / Microsoft Designer
Not all AI image generators are free. Once you get the hang of prompting Bing, you can generate quite a few images before being hit by a daily limit. And I do mean quite a few, with Bing you can keep going for many gens per day. Downside is, it's not as customisable as the other two I will mention.
Microsoft Designer is basically just a different layout for Bing's image creator that gives slightly more options by also allowing you to generate in Landscape and Portrait sizes.

Links to the generator

Links to useful guides
Part 1:

Part 2: (Read their comment first)

- Tensor and PixAI
Tensor and PixAI are both partially free, meaning they give you a free daily allowance. Compared to Bing, these generators give you way less gens per day. PixAI allows you to save up your daily allowance as long as you access it daily, Tensor's daily allowance you can't save up. Both of these options give a lot of customisation with many different options for models and Lora's

Links to the generator
Tensor

PixAI

Links to useful guides
Tensor

More Tensor, PixAI and CivitAI (personally don't know much about CivitAI honestly)

Importance of Accessibility

Accessibility is something incredibly important to keep in mind. If you are unsure about anything even after reading this guide, asking other people to look at your profile never hurts. It is super important that your profile's aesthetics don't hinder people wanting to use your page as aesthetics are not more important than functionality.

Let's start with this: NEVER even consider using CSS to hide your block button. I am sorry, but if you are someone who was even seriously thinking about doing this, you are evil. Let people block content they don't want to see, they aren't people that would ever use your content anyways so why keep them from not having to encounter content that they don't want to see?

Keyframes
With keyframes enabled again, I want to mention about those here as well:
Make sure your animations do not have rapidly flashing lights.
Also, as someone with a chronic headache, please, be mindful about how many moving things you have, if they move differently or in sync (Anything affecting the "Latest" menu will never sync up as it loads later than the rest, bot cards tend to get out of sync with the rest of the page as well) and how fast things move.
You can have a cool flashy profile without literally causing seizures with the flashing, Things can move or have a spinning effect without moving so fast that it's nauseating, your profile can look insanely cool/elegant/beautiful/whatever vibe you're going for without things moving at different speeds or in all different ways and directions. In fact, when there's too many elements moving in all different ways it (in my opinion) tends to make everything just look messy and cluttered.

You don't want to become known as the creator whose profile caused a seizure or whose profile gives people headaches, migraines or makes them feel sick, right?

Colours
If the answer is that no, you don't want to be known as that creator, good. Let's move along to talking about colours.
Colours are fun, having too many can lead to things looking messy if not done right, but that will be discussed later. After all, a messy colour scheme does not necessarily make a page inaccessible to people.
Keep in mind though, that some colour combos can be straining on the eyes.

For text, I highly recommend to use this contrast checker to ensure your text colours have enough contrast with whatever background colour your choose:
https://webaim.org/resources/contrastchecker/

Fonts:
Fonts are fun, and later on I will leave a list of available fonts on JanitorAI (as custom fonts are currently disables, meaning there's only a small selection availanble right now), but please, please, please, make sure that the font you are using is readable. Some fonts, for example cursive fonts, may be fun to use but can be hard to read. Some fonts you should probably avoid completely because they are unreadable, with others you may be able to get away with using it only on larger text and less important text (For example your @, JanitorAI logo, "Public Characters", that kind of text). Aside from this, I recommend using a maximum of 2 fonts; your fun font and your easier to read font.

As an example, I heavily recommend against using fonts like Berkshire Swash and Dancing Script for text like your general profile bio, bot bios, tags, etc.

Mobile users:
While your CSS may look all pretty and perfect on your pc or laptop, mobile can be a completely different story. There are two ways to go about this:

  1. Style your profile with mobile users in mind.
  2. Media Query.

Media query is basically a way of formatting CSS to only affects either pc or mobile and will be explained later on.

Just don't pick the option of conveniently forgetting about people using mobile devices who may want to visit your profile, please.

Colours and Contrast

Now that we have had accessibility, let's pick colours.
You can use this site to pick colours directly from your profile picture image if you upload it!
https://imagecolorpicker.com/
Make sure to save your hex codes somewhere for while you work on your CSS. I personally have a list of HEX codes at the bottom of mt CSS alt account where they are labelled, as well as a file in my digital art software that has blobs of the colours.

Personally I recommend going for a light, a medium and a dark colour with an accent colour and of course black/white. This way you can create variety while keeping things simple. Use the contrast checker site to make sure that the colour you intend to use for the bot card background and profile bio background has enough contrast to the text colour you intend to use. If you have plans for a transparent bot card or profile bio, take the background image of your page into consideration. The text will need to have enough contrast with the background to be readable no matter what.

If you don't want to create your colour palette yourself, you can upload your profile picture to this site and have it make a colour palette for you!
https://coolors.co/image-picker

And if you want to work with transparent colours, keeping this site open in a tab has been a lifesaver for me. HEX code transparency is the way to go, later on in the actual CSS part of this guide I will explain why transparent colours are easier to use than the opacity filter.
https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

Fonts

There isn't much to talk about when it comes to specific font types before getting into which font do and don't work on Janitor. Generally though, sans-serif fonts tend to be the easiest to read for people, outside of that serif fonts tend to be easier to read than cursive fonts. Of course, there's also the fancier special fonts. For those sorts of fonts it definitely depends on the font itself as well as the text size for how easy, or hard, it may be to read.

When using Google to look up "serif vs sans-serif" and going to images, this image appears not completely at the top, but very high up and I think it does a good job at showing the differences:
Serif vs Sans-Serif

Monospace fonts: I also found it worth to mention monospace fonts. For this kind of font, most or all letters, numbers and symbols take up the same horizontal space. Use this Google image as an example:
Monospace example

With URLs currently disabled, not every font is available. So the selection of fonts you can use exists of web-safe fonts and fonts that have been uploaded directly to the site (for example: event bot cards like 2025, Christmas and Valentine's).

Even with web-safe fonts, you may run into issues with the font being different between devices with different operating systems (While some fonts may work on Windows, they may not on MacOS and vice versa). So while these generally work, they may not always.

For a list of all web-safe fonts, you can check this site:
https://www.cssfontstack.com/

And for a list of the most common fallback fonts, you can check here:
https://www.w3schools.com/css/css_font_fallbacks.asp

This list has been provided by the lovely Iorveths, you can check out their profile -> here

Generic Websafe Fonts:
Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

Other fonts on Janitor:
Berkshire Swash (serif)
Dancing Script (cursive)
Jura (sans-serif)
Monoton (retro)
Press Start 2P (pixel)
Rock Salt (handwriting)
VT323 (pixel)

If you are completely new to CSS, this next part will be something to come back to later when we've discussed how to format the code and how to get the class-ID's of elements.

Because there are a lot of fonts and both sites linked give the code for using those fonts, I will only be listing the special fonts Janitor allows here. Those sites also show previews of the fonts so they will not be included in the font showcases below this.

1
2
3
4
5
6
7
8
9
.css-<Class-ID-of-element-you-want-to-change>{
   font-family: "Berkshire Swash", serif;
   font-family: "Dancing Script", cursive;
   font-family: "Jura", sans-serif;
   font-family: "Monoton", sans-serif;
   font-family: "Press Start 2P", system-ui;
   font-family: "Rock Salt", cursive;
   font-family: "VT323", monospace;
}

These 7 fonts are the only ones that will always work across all devices as they are the site's already loaded fonts.

I’m using an alt account for this guide. I’ll be using it to showcase the fonts as well. This account already has some CSS applied, but I removed some things that affect how the text looks.
The only CSS applied to the text that feels like it may matter enough to be mentioned is the text colour (changed to a dark blue) and text size (@: 80px, followers and member since: 40px).

Berkshire Swash:
2024 Christmas Event bot card font.
A serif font that I argue leans towards cursive. Only use if the text is large enough to be easily readable with it.

Personal tips: Avoid using this font for smaller text like the bot descriptions or your profile bio.

1
2
3
.css-<Class-ID-of-element-you-want-to-change>{
   font-family: "Berkshire Swash", serif;
}

Berkshire Swash

Dancing Script:
2025 Valentine's Day Event bot card font.
A cursive font that can generally be hard to read on even medium-sized text. be very sparing with where you use it if you decide you want to.

Personal tips: Only use on elements with "font-size: 25px;", ideally even "font-size: 30px;", or larger. You could maybe use this font if you have a large font size for your @, followers, members since, JanitorAI logo and the Create Character button. You could probably get away with using it on the text in the bot that says "Public characters" but nowhere else.

1
2
3
.css-<Class-ID-of-element-you-want-to-change>{
   font-family: "Dancing Script", cursive;
}

Dancing Script

Jura:
This seems to be Janitor's default font.
A clear, easy to read sans-serif font.

1
2
3
.css-<Class-ID-of-element-you-want-to-change>{
   font-family: "Jura", sans-serif;
}

Jura

Monoton:
A large, bulky fancy font.

Personal tips: on larger text, add "font-weight: 100;" as well to make the text thinner, causing the font's texture to become more visible. While this font seems relatively fine for smaller text in its normal state, some of the letters do become hard to read due to the font's bulk. Be mindful of your text size.

1
2
3
.css-<Class-ID-of-element-you-want-to-change>{
   font-family: "Monoton", sans-serif;
}

Or alternatively to get the thinner effect on the "In Operation Since APR 22, 3147" text:

1
2
3
4
.css-<Class-ID-of-element-you-want-to-change>{
   font-family: "Monoton", sans-serif;
   font-weight: 100;
}

Monoton

Press Start 2p:
A pixel style font, based on the font design of 1980's Namco arcade games.

Personal tips: This font works best on font sizes that are a multiple of 8.

1
2
3
.css-<Class-ID-of-element-you-want-to-change>{
   font-family: "Press Start 2P", system-ui;
}

Press Start 2p

Rock Salt:
A cursive font with a handwritten look.

Personal tips: This font, while nice and easy on short sentences, becomes annoying to read on paragraphs of text. Avoid using it for bot descriptions and long paragraphs of text in the profile bio. Perfectly fine for text headers though.

1
2
3
.css-<Class-ID-of-element-you-want-to-change>{
   font-family: "Rock Salt", cursive;
}

Rock Salt

VT323:
2025 Event bot card font.
A pixel style monospace font, generally readable even on smaller text.
Personal tips: This font tends to be smaller than expected, so be ready to adjust the font-size for it. Can work for paragraphs, though depending on the font-size it can make the space between words, and so also your paragraphs, quite long.

1
2
3
.css-<Class-ID-of-element-you-want-to-change>{
   font-family: "VT323", monospace;
}

VT323

How I approach fonts on my page:
Wile not necessarily wanting to make this another tab, I want to expand what I said about fonts in the accessibility section.

I have marked things out with 3 different colours: green, orange and blue.

Green: This marks everything where I personally used my fun font for this page, Berkshire Swash.

Orange: I outlined two green areas with an orange outline as well, the bot name and my @ on the bot cards. I only used the font on because of two reasons:

  1. When hovering over the bot name the tooltip will pop up, displaying the bot's full name. This tooltip's text is in an easily readable monospace font.
  2. The @ on the bot cards is not important. You are already on the creator's page so you know their @.
    Generally, the font size of these is smaller than I'd personally recommend using it on, but because this text is less important than let's say the bot bio (please don't use fonts like Berkshire Swash on bot bios) I figured it might be fine.

Blue: This is where I applied a secondary, easier to read font. This is important text such as the bot bios and my profile bio, as well as text that in my opinion was too small to use the other font on.

Example

I want to state again that I recommend a maximum of 2 fonts. While it is possible to keep a rather clean look with 2 fonts, adding a third will most likely just cause things to start looking messy.


Clipping profile picture to a mask - PC instructions

In order to clip an image to a mask, you need some sort of editing software. Krita is free digital art software capable of clipping images to layers below it, which is exactly what we need to do. I am going to assume you already have an image mask you want to clip your profile picture to. An image mask here is a png image that has solid colour where you want the image to show and transparency where you do not want your image to show. If you do not yet have one, you can look on tumblr for image masks or make one yourself. A reminder that the image being transparent where you don't want your image to show is very important, as otherwise this will not work.

You can download Krita from here:

https://krita.org/en/

Krita

After you have installed Krita and open it, you will be greeted with this:

Krita Main Menu

You will want to go to the top left of your screen where it says "File" and then click on "Open"

Where to click

The next step will be to open your image mask and repeat to also open the image you want as your profile picture.

When you hover over a file, it will show the dimensions of the image, this is important to pay attention to.

Dimensions preview

Having both images open will look like this, though of course the images and their file names will different from mine.

Canvases open

The two tabs with Krita's logo (and app icon) are the opened files

Opened files

The next step will depend on your image sizes.

If you found an image mask online it is likely that the image sizes won't match up. If the image sizes match up, skip this step.
For my example here I have an image mask with a square file size (1024 x 1024 pixels) and a rectangular image ( 768 x 1152 pixels ). In this case I will need to upscale the image to have the same width as the square image mask. Personally I recommend upscaling the smaller image to match the bigger image's size. If there is a large difference in size between the image and mask it might be better to try downscaling the bigger image to match the smaller one, though there won't be a guarantee image quality will be good in a situation like that.

On the top left there's the menu with "File", "Edit", "View", etc. Here you will want to click on "Image" and then select "Scale Image To New Size".

Where to click

When you click on that, this box will pop up. Make sure the "constrain proportions" box is checked. If it's not, your image will be stretched if you change one of the values.
Here you will want to change the width or length to match the size you need. I will be inputting 1024 here where it says 768 as my image is thinner than the image mask. After you have input the number you need, press "OK"

Scale box

Now that your images should match in size, go to your profile picture image and copy it

On the top left, click the "Edit" menu and then "Copy", this will copy the image.

Edit menu

With the profile image copied, go to your image mask file and paste it

This can very simply be done with CTRL + V, or by using the same "Edit" menu and this time clicking on "Paste".
On the right, under the colour selector with the wheel you will find a thing labeled "Layers".

Make sure the profile picture is on a layer above the image mask, or else clipping it will not work.

Layers

Actually clipping the image to the mask

In the Layers menu there are three icons on the right side of each layer, a lock, something that looks like an "a" and a checkered square. Press the icon that resembles an "a".

What to click

Almost done!

Once you have clicked on that "a" icon, your profile image should now be clipped to the image mask, like this.

My example

Positioning image (optional)

To skip, click here

If you are like me and have a square mask with a rectangular image, or an image that is wider than the mask, you can now mess with the image's positioning within the mask if you so desire. In the menu along the left side of the screen, located under "Files" and "Edit", there is an icon that looks like a square with a dot in the middle. Selecting this allows you to move the image within a layer. If you do this, make sure your profile picture image is selected and not the mask.

Click this

Another important thing to pay attention to is that your image still covers the entire mask, just zoom in on an edge that lines up with the edge of the canvas. When the image is selected, this is what it will look like.

selected image

By Using the scrollbar you can zoom in on an edge like this to make sure your image covers the whole mask still. I lined it up with one of the side edges as for me there's still room to shift around both at the top and bottom of the square.

Zoomed in on edge

So now with it moved, you can see that the selected area looks like this and that the image is still only visible where the mask is visible.

Showing repositioned image

Saving the image

To save the image, press on "File" in the top left of your screen, then on "Save As".

Save as

Make sure to save the image as a .png file to keep the transparent background.

Saving the image

After pressing "Save", This box will pop up. All you have to do is just press "OK".

Krita save box


Clipping profile picture to a mask - Mobile instructions

For Mobile, we will be using ibis Paint X, as clipping images can be done on there for free. There will be ads though. I will be blocking them out with the background colour, this may mean weird blotches at the top or bottom of the screenshots. I have also downscaled them to 20% of the original size as to keep the images a reasonable size for the guide.

Google Play Store: https://play.google.com/store/apps/details?id=jp.ne.ibis.ibispaintx.app&hl=en IoS AppStore: https://apps.apple.com/us/app/ibis-paint-x/id450722833

After you have downloaded ibis Paint X and open it, you will be greeted with this screen.

IbisPaintX

In the bottom left corner, press the + icon.

This menu will pop up, press on "Import Picture". This will bring up your photo gallery. Select your image mask.

Pop-up Menu

When you open the mask, tap on "Background Removal" to make sure your png has a transparent background.

Background Removal

Press the green checkmark.

Where to press

Press on the icon to open the layers

On the bottom right, next to the arrow that points left is an icon of multiple layered squares with a number on it, tap this.

Layer icon

Now, press the camera icon to open your profile image

When you have pressed the layer icon, this menu will pop up. You will need to press the camera icon to open your photo gallery again and open your profile image.

Photo Icon

If necessary, size image to match the mask

You can do that by pressing the blue dots on the corners and moving until the edges line up.

Example1

When you have the edges lined up, you can move the image to where you want it. press the checkmark when done.

Example2

Clipping the profile picture to the mask

Once again, open the layer menu.

Make sure the profile image is on a layer above the mask or else it won't work.

Example

Saving the image

Now that you have successfully clipped your image, to save it press on the icon on the bottom right of the screen of an arrow that points left.

Example

This menu will pop up, make sure "PNG" is selected and "Transparent" is toggled on.

Make sure to save the image as a .png file to keep the transparent background.

Example


How to CSS

I will try my best to explain the basics to the best of my abilities. For as far as I am aware you can't inspect element on mobile, so you will need a computer to get codes. Or someone who will provide you with the class-IDs. A link to a guide from LunaXLee that also explains CSS along with having a lot of the site's class-ID's can be found -> here

Once you have CSS on your profile you CAN NOT edit your profile normally. If you use the normal profile editor, it will remove your CSS. Make sure to back up your code in any kind of notes app, like Google Docs. That way you can paste it back after you edited your profile. Alternatively, you could also edit your bio through the About Me section or CSS editor if you can use HTML markdown. HTML markdowns will be discussed later on in this guide (NOT DONE YET)

Table of contents:

Inspect element

Inspect element may look intimidating, but it's quite simple once you know how it works.

In order to use inspect element, you simply right click with your mouse, it will make this menu appear.
Example

Hover your mouse over the element you wish to change, for this example I will be using the profile image. So in this case, hover over the profile image with your mouse, right click and then click on "Inspect". This will pull up the inspect element menu.
Example

In some cases, like here, a class may affect multiple elements of the page. In this case you can see <div class="css-79elbk"> (marked 1 on example image) and <img alt="Avatar" src="LINK" class="chakra-image css-18bnokj"> (marked 2 on example image) on the screenshot. For ease I will be using 1 and 2

You can try to think of the classes as layers. The classes higher up in inspect element are above the classes below it. This will become more apparent when you work with transparent colours and/or borders that are more rounded than Janitor's default styling.

As you can see here, marked with red, is 1. .css-79elbk is the class-ID that affects both the Profile Picture and Public Characters (renamed to "The Blood Bag Collection" on my profile). Meanwhile 2, .css-18bnokj, only affects the profile picture.
Example

To hopefully show it in an even clearer way, I put background: #fff; on either one in the inspect element. Left is with it on 1, right is with it on 2.
Example

You can hover over basically anything on your profile page, right click and inspect element and it will pull up with roughly the required classes. Because most elements have multiple class-IDs affecting them and these layers are not all the same size, it is possible you won't always get the top layer. When you hover your mouse over the class-IDs in inspect element, it will highlight the area it affects.
For this example, I will be hovering the Total Characters thing (renamed to "The Blood Bag Collection" on my profile) to show how that looks like.

The classes highlighted on inspect element a lighter grey are what's being highlighted on the page as well. The class highlighted in blue is the selected class.

Example

Where to put the code

Now that you hopefully know how to use inspect element the next question you likely have is "where do I put the code?". For this there are two options:

  • Settings -> About Me
  • CSS Editor

Personally, I am heavily biased towards the About Me section for CSS and HEAVILY recommend using that method if you are messing around with CSS for the first time. The ability to have notes and label your code saves a lot of confusion if any class-IDs ever change or if you want to switch up your styling. How to use notes will be listed in the "How to format and use the code" section.

Settings -> About Me:
Pros:

  • Notes

Cons:

  • Text is all the same colour
  • Requires having a second tab open on your profile and refreshing the page after every change

Let's start with the method I recommend. To get to the About Me section, first press on the profile menu and then "Settings"

My profile has the header positions flipped, making it so the profile menu is on left side of the screen instead of the right. Just in case anyone got confused by it.

Example

When you click on Settings, the About Me section will be right under the username. Scroll down a bit to get it more central on your screen, then I personally recommend clicking on that white square in the bottom right of it (hold click) and drag down to expand it.
Example

Scroll to the bottom of your bio, this is where you'll be putting the code. Once you have your code in there, scroll down the settings page and click "Update Profile" to save it. Then, go to your tab that has the profile open and refresh the page to see if it worked or how it looks.

This part is only about where to put the code. How to format it will be explained below the CSS Editor explanation -> here. The formatting section will also show how inspect element can give you a preview of how things look.

CSS Editor:
Pros:

  • Colours for different elements/values, making them easier to identify
  • You don't have to switch tabs and refresh the page

Cons:

  • No notes as they are disabled in the CSS editor

Personally, I would not recommend using this method because of how much easier being able to have notes makes things, but I will still explain how it works in case it looks more appealing to use than the About Me section.

To access the CSS editor, press on "Edit Profile". Then, the "Edit CSS" button will appear in the middle at the top of your screen.
Example

When you click on that button, the editor will open.
Once again, just scroll down to the end of your profile bio where you will input your code. Once you are done putting it in, press "Save"

This part is only about where to put the code. How to format it will be explained in the next point.

Example

And here is a little example of how code in the CSS editor appears for some of the different colours:
Example

How to format and use the code

Sadly, it's not as simple as just pasting it randomly. However, it's still pretty simple!
For this section's examples I will also include screenshots of how the showcased code affects the profile. I will be using my CSS alt account that has been stripped bare. I will also only showcase pasting the text into the About Me section, as I will be showing how to add notes which are disabled in the CSS Editor.

In this part I will walk through things kind of as I encounter them while working on a new profile. A section that is minimal explanation and no images can be found -> here. (ADD LINK ONCE DONE

Table of contents:
-> The basics
-> More use of Inspect Element
-> Unique class-IDs
-> Text styling
-> Notes
-> Borders and Backgrounds
-> Hover state

The basics

To start with, your code will have to be within <style> and </style>. You can have multiple class-IDs with coding between the style tags. For a very simple example:

1
2
3
4
5
<style>
your coding #1
your coding #2
etc.
</style>

Though just randomly throwing it within style tags isn't everything. Let's take the class-ID for the Profile picture as example, css-18bnokj. You are going to have to start your line with a . and put a { after the class-ID. Then , your coding followed by } to enclose your code within the brackets. So it should look something like this.

Not every class-ID needs a . in front of it, some classes will not work if that's done. I will talk about those classes later. (ADD LINK ONCE DONE)

1
2
3
4
5
6
7
<style>
.css-18bnokj{
   <property-1>: <value>;
   <property-2>: <value>;
etc.
}
</style>

So let's say you want to make your profile picture bigger, you can first use inspect element again. Make sure you have the right class selected.
Example

As you can see from the inspect element, the default styling for the profile picture is this:

1
2
3
4
.css-18bnokj{
   height: 150px;
   width: 150px;
}

By clicking on the 150px;, you will be able to change the value within inspect element.
Example

The code you will need to put in either the About Me section or the CSS Editor for this will look like this:

1
2
3
4
.css-18bnokj{
   height: 350px;
   width: 300px;
}

Of course, it will need to be within <style> and </style>

1
2
3
4
5
6
<style>
.css-18bnokj{
   height: 350px;
   width: 300px;
}
</style>

So putting it underneath your bio text, it will look like this. Press "Update Profile" to save it (if you use About Me), or press "Save" (CSS Editor)

You will always need to press "Update Profile" (About Me section) or "Save" (CSS Editor) after every adjustment. From this point on I will not be mentioning it anymore though.

example

More use of Inspect Element

Now, let's say you wish to have your @, followers and members since underneath your profile picture. This can be done! Go back to inspect element and find css-1uodvt1. It will be right above the container that holds both the Profile Picture and Public Characters, so if you hover over your Profile Picture, it's easy to find. In the inspect element you will see that this class has a property called display: flex;.

example

By clicking on the icon next to the property that looks like two rows of rectangles, you will get a menu. If you want to, use this as a moment to hover over each icon, see what they are called and what they do in case you might want to incorporate it later.

example

For what I will be showcasing, I will be selecting the icon next to the currently blue one on flex-direction. Doing so will change it from flex-direction: row; to flex-direction: column;.
example

As for what code you will need to paste into the About Me or CSS Editor (and anywhere in between your <style> and </style> tags), it will look like this:

1
2
3
.css-1uodvt1{
   flex-direction: column;
}

Although, I am not yet done here, so after I paste it in, I don't save it yet. You can keep testing and adjusting things in the inspect element, as it only removes it when the page refreshes. Also, by clicking on the line containing the } you can type in your own new line. For this, I will be adding mask-image: linear-gradient(180deg, black, black, transparent);. Having this property on the Profile Picture, will cause it to have a fade effect.

With this code, black has the opaque areas and transparent the faded. By using transparent HEX codes instead, you can control the amount of fading a lot more.

Example

Normally I'd keep going with @ positioning, pasting the code in to the About Me section without saving it yet as I work, but let's keep this guide simple.
What the CSS on this profile will look like now, is this:

<style>
.css-18bnokj{
   height: 530px;
   width: 450px;
   mask-image: linear-gradient(180deg, black, black, transparent);
}

.css-1uodvt1{
   flex-direction: column;
}
</style>

And now without style tags to show what different values get different colours:

1
2
3
4
5
6
7
8
9
.css-18bnokj{
   height: 530px;
   width: 450px;
   mask-image: linear-gradient(180deg, black, black, transparent);
}

.css-1uodvt1{
   flex-direction: column;
}

As you can see, when changing values you already had or adding a new property to an element you already had custom styling for it is possible to simply adjust what you already had within the brackets { } for that class-ID.

From this point on, any example code will be without <style> and </style>. Remember to make sure your code is within them!

Unique class-IDs

At least for this profile, the username is getting a little hard to read with that white against the light background, let's fix that shall we?

Some elements have unique class-IDs, which means those class-IDs differ between profiles. So you will have to hover over your own username in order to get the right class.

For an example of unique class-IDs, I had to grab one of my good friend's profiles as it happened to be the same class-ID for both my main account and CSS alt. Please do check out Kenzie's bots -> here
Now, as you can see the class-ID here is .css-13rya64
example

Meanwhile for both my CSS alt and my main account, it's .css-o5an2m
example

The username is not the only unique class-ID, but it is one of very few.

Text styling

Since the background is very light, I am going to go with a darker colour for the text. At this point it is good to have your colour palette from one of the methods in General do's, don't-s and resources (ADD LINK LATER)
With colour picking the image, my dark colour here will be #091b44. To add colour to an element's text (and sometimes icon), you just need to use on of these two options:

1
2
3
4
5
color: #<HEXcode>;
color: #091b44;

color: COLOUR;
color: darkblue;

There are some default colors that show up in inspect element if you type color: on a new line. In this case, I have my HEX code so I do this.

1
2
3
.css-o5an2m{
   color: #091b44;
}

Colour isn't the only way you can customise your text. Even though URLs are disabled, web safe fonts are still available. There is a link to a site that shows them in General do's, don't-s and resources (ADD LINK LATER), as well as the fonts from event bot cards (also found in that section) (TO BE ADDED LATER). For this I will be using the font from the 2025 event, which is done by adding font-family: VT323, monospace;. With this example I have also already changed the font size to be bigger, which is done with font-size: <NUMBER>px;.

1
2
3
4
5
.css-o5an2m{
   color: #091b44;
   font-family: VT323, monospace;
   font-size: 70px;
}

So now with that code the page looks like this
example

For now, as you can see the @ is like this:
example

But if you were to add font-weight: 100;, it will look thinner like this:
example

font-weight: allows you to control the text's thickness.

Outlined text
You can also give your text an outline, just add this to the text you want outlined:

-webkit-text-stroke: 1px #<HEXcode>;

example

Text Shadow
Using the text-shadow property, you can create shadows or a glowing effect behind your text. For the examples, I will be using black.

text-shadow: <NUMBER>px <NUMBER>px <NUMBER>px #<HEXcode>;

The values go in the following order:
offset-x | Offset-y | Blur Radius | Colour

For the first example, this is the code applied to the username:
The text-shadow is centered behind the text in this example.

text-shadow: 0 0 15px #000;

Example

And here is an example of a non-blurred and non-centered text-shadow.
Because the offsets now have values, px is now necessary.

text-shadow: 5px 5px #000;

example

It is also possible to have multiple colours in the shadow, just split up the colours like this:

text-shadow: 0 0 8px #fff, 0 0 15px #000;

You can do quite a few layers of colour with that, for example to the username I applied this:

text-shadow: 0 0 3px #fff, 0 0 5px  #fff, 0 0 8px  #65cbf4, 0 0 8px #65cbf4, 0 0 8px #65cbf4, 0 0 8px #65cbf4, 0 0 15px #000, 0 0 15px #000, 0 0 15px #000, 0 0 15px #000;

example

Box-shadow, a property I will talk about more later, works similarly to text-shadow.

Before we move on to talking about notes, I'd like to talk about text-align. It speaks for itself so I will not say much about it. For contrast, I have placed a red background behind the Public Characters box. So this is how it looks now:
The default styling in this case for what would be applied to the element of the text you want to move is:

text-align: left;

example

To center text, simply add this to the element with text you want centered

text-align: center;

example

And if you want it aligned from the right, simply use this instead:

text-align: right;

example

You will always need to target the class that affects the actual text for this to work.

Notes

Now, let's look at what we have for code in total.
example

As we keep going with customisation, the list of classes will only get longer, so how do you remember what code does in case you want to adjust something? Simple, you don't. So let's label our code with notes.

Notes are disabled in the CSS Editor, which is why I recommended using the About Me section earlier.

To add notes that will not show up in your bio, you will have to write them like this:

/* Your note */

You can never be too organised, so here is how I'd rearrange and label the code we got on this profile so far:

/* Profile Bio - Main Card - General */
.css-1uodvt1{
   flex-direction: column;
}

/* Profile Bio - Main Card - PFP */
.css-18bnokj{
   height: 530px;
   width: 450px;
   mask-image: linear-gradient(180deg, #000, #000, #0000);
}

/* Profile Bio - Main Card - @ */
.css-o5an2m{
   color: #<HEXcode>;
   font-family: <FONT>;
   font-size: 70px;
}

From now on, notes will be used with sections of code as well.

Personally I prefer using HEX codes for transparency, which is why the mask image code from earlier is slightly different black = #000 and transparent = #0000. Later on I will show the benefit of transparent HEX codes over filter opacity.

Borders and backgrounds

Sticking with the same 3 classes we have so far, we can explore a few more properties.
.css-1uodvt1 is the class that contains the Profile Picture, Username, Followers, Badges (if you have any), and Member Since text. So, if we gave it a border, it will only surround those elements. I will be using my lightest blue HEX code.

1
2
3
4
.css-1uodvt1{
    border: 1px solid #<HEXcode>; /* <NUMBER>px = border thickness | solid = the border is a solid line | #<HEXcode>; = colour of the border */
    background: #<HEXcode>;
}

There are two other options I am aware of for how the border can look; a dotted line and a dashed line. For that, use one of these instead:

border: <NUMBER>px dotted #<HEXcode>; 
border: <NUMBER>px dashed #<HEXcode>; 

example

And along with borders, we also have border-radius. This property affects how curved the corners are.
Using bot images as an example, here is how you can change the curvature for each corner:

1
2
3
4
.css-1q7rmf0{
   border-radius: <NUMBER>px <NUMBER>px <NUMBER> px <NUMBER>px;
/* Top Left - Top Right - Bottom Right - Bottom Left */
}

example

Of course, if you want all the corners to have the same radius this can be done easily as well:

1
2
3
.css-1q7rmf0{
   border-radius: <NUMBER>px;
}

example

You can also put in two values, the first will affect the top left and bottom right corners, the second value will affect the other two.

1
2
3
.css-1q7rmf0{
   border-radius: <NUMBER>px <NUMBER>px;
}

example

You can make a background a solid colour by simply applying this to your desired class-ID:

background: #<HEXcode>; 

So for example:

1
2
3
.css-1uodvt1{
   background: #<HEXcode>;
}

example

Then there's also linear-gradient. By changing the degree you can change the angle

1
2
3
.css-1uodvt1{
   background: linear-gradient(45deg, #<HEXcode>, #<HEXcode>);
}

Here are two examples, the first is at 45deg and the second 260deg.
example

Last but not least, there is also radial-gradient.

1
2
3
.css-1uodvt1{
   background: radial-gradient(#<HEXcode>, #<HEXcode>);
}

example

The backdrop-filters are exactly what they sound like. Brightness lets you make the background darker or lighter, greyscale lets you make it monotone, blur lets you blur the background if you have a transparent background, etc. Honestly, for these I recommend you to just mess around and see if you like them!
example

The only one I strongly recommend against using is opacity. Using the opacity filter is just an easy way to accidentally make your text or images you want fully opaque, transparent by accident. Just stick to transparent HEX colour codes instead. Please.

If you want a border and background for the whole profile bio, that is another unique class-ID. When inspecting element on the profile bio, go to he class above the large block of text in inspect element that is .css-0.

example

Hover state

This also leads us into a new state for elements. When your mouse hovers over the profile you might have noticed the shadow that appears. On profiles where the bio background is transparent it is most noticeable. This shadow is attached to the unique class-ID mentioned above.
To be able to access the hover state in inspect element, click on :hov.

By actually clicking on the :hov, you are able to turn on the hover state in inspect element for the element you have selected.

To get rid of the shadow on hover, you will need to do this:
example
example

1
2
3
.css-bryv47:hover{ /* Replace .css-bryv47 with unique class-ID if needed */
   box-shadow: none;
}

You can apply :hover to literally every element you can hover your mouse over. Let's say you want to make your @ bigger when you hover your mouse over it.

1
2
3
.css-o5an2m:hover{ /* Make sure to replace .css-o5an2m with the class-ID of your @ */
   transform: scale(1.6);
}

The top one is with my mouse hovering over the @. As you can see, it is larger than the bottom example, which is the @ normally (with current applied coding).
example

To prevent it from snapping back into place, you can add a transition. A transition will make it move smoothly.

You will add a transition to both the base element AND the hover state for it to move smooth both ways.

1
2
3
4
5
6
7
8
.css-o5an2m{ /* Make sure to replace .css-o5an2m with the class-ID of your @ */
   transition: 0.5s; /* can also do 0.6s, 1s, 1.2s, 500ms, etc. Just as long as it is one time value */
}

.css-o5an2m:hover{ /* Make sure to replace .css-o5an2m with the class-ID of your @ */
   transform: scale(1.6);
   transition: 0.5s;
}

By just adding a different colour to the :hover-affected element, you can have the text colour change on hover. You can customise quite a lot with it, so experiment with it.

Moving Elements

While margin may not be the best as your main source of moving items around, it can be good for small adjustments.

HTML elements (the things we style with CSS) are like boxes, literally. This might be a good time to briefly discuss the CSS box model.
Example

I will be using the @ as an example for this and 100 as the pixel amount for these examples.

1
2
3
.css-o5an2m{ /* Make sure to replace .css-o5an2m with the class-ID of your @ */
margin-top: <NUMBER>px;
}

Margin-top

As you can see, using margin-top, moved the @ down. Margin-bottom in this case will just move the follower count and "member since" text down without moving the actual @. So in that case, you can use negative numbers to move the @ up.

1
2
3
4
5
6
7
8
.css-o5an2m{ /* Make sure to replace .css-o5an2m with the class-ID of your @ */
margin-top: -<NUMBER>px;
}

/* So in this case: */
.css-o5an2m{ /* Make sure to replace .css-o5an2m with the class-ID of your @ */
margin-top: -100px;
}

negative value

Continuing with using a positive number (100px) as the amount, here's margin-left:

1
2
3
.css-o5an2m{ /* Make sure to replace .css-o5an2m with the class-ID of your @ */
margin-left: <NUMBER>px;
}

margin-left

And margin-right:

1
2
3
.css-o5an2m{ /* Make sure to replace .css-o5an2m with the class-ID of your @ */
margin-right: <NUMBER>px;
}

margin-right

Remember, you can always use negative numbers to move things the opposite way.

Edit

Pub: 02 Feb 2025 16:32 UTC

Edit: 15 Mar 2025 19:18 UTC

Views: 1028