𓂃𓈒𓏸 ♡ welcome to my little css corner ♡ 𓏸𓈒𓂃

Alt Tag

hi hello !! 🤍
if you’re here, you probably love customizing janitor ai as much as i do — soft colors, cozy vibes, dramatic fonts, pretty layouts, the whole thing. this page is basically my tiny archive of free janitor ai css codes that i make for fun, creativity, and for anyone who wants their profile to feel a little more them.

a small note before you scroll: i’m still new to the whole css/coding thing. i’m learning as i go, researching a lot, experimenting, breaking things, fixing them again — the full experience 😭. a lot of these codes are researched, adapted, and tweaked to work nicely on janitor ai, so you may need to adjust or edit them slightly to fit your own layout, screen, or personal taste — and that’s totally okay! customization is part of the fun.

all of the css you’ll find here is:
✧ free to use
✧ beginner-friendly (just copy + paste, then tweak if needed)
✧ aesthetic first, always
✧ made with love, patience, and a lot of trial & error

i started collecting and making these because default layouts felt boring, and customizing them made janitor ai feel more personal — like your own space instead of just a site. whether you’re into soft pinks, dark themes, minimal looks, or something cozy and dreamy, i hope you find something here that inspires you or gives you a good base to build on.

you’re totally free to:
♡ use these for personal profiles
♡ experiment and change things around
♡ share with friends

just please don’t:
✕ repost the css codes as your own
✕ sell it
✕ remove credit if you share links

crediting or linking back is always appreciated but never forced 🫶

this page will be updated whenever i learn something new, discover better tweaks, or feel inspired at 2am (which happens a lot). feel free to bookmark, check back, or just browse slowly like it’s a moodboard.

thank you for being here, genuinely.
have fun editing, experimenting, and making your janitor ai feel a little more like home ♡

𓂃𓈒𓏸 ♡ 𓏸𓈒𓂃

FIRSTLY, LETS START WITH THE PROFILE CARD!

How to change corners/radius of profile picture:

⎗

<style>
.css-52az4s {
border-radius: 0px;
}
</style>

How to change width & length of profile picture:

⎗

<style>
.css-18bnokj {
width: 500px;
height: 500px; 
</style>

How to center pfp, username and followers count:

⎗

<style>
.css-1uodvt1 {
padding-top: 0px;
flex-direction: column;
justify-items: center;
text-align: center;
}
</style>

How to center badge/s:

⎗

<style>
.css-hjkukh {
position: relative;
justify-content: center;
/* badge centering */
}
</style>

How to change usernames font:

⎗

<style>
/* ===== USERNAME SIMPLE STYLE ===== */
.pp-uc-title {
  font-family: FONT;
  font-size: SIZE;
  font-weight: WEIGHT;
  letter-spacing: SIZE;
  color: COLOR;
}
</style>

How to hide member since:

⎗

<style>
  .pp-uc-member-since { 
display: none;
}
</style>

How to center follow button:

⎗

<style>
.css-y9k5u7 {
justify-content: center; /* centers the follow and options button */
}
</style>

How to change text of follow button:

⎗
✓
.Btn[data-following="false"]::after {
  content: "YOUR TEXT HERE";    /*This is for BEFORE following*/
  visibility: visible;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: COLOR;
  color: COLOR;
  border: 1px solid COLOR;
  border-radius: SIZE;

  font-family: FONT;
  font-size: SIZE;
  letter-spacing: SIZE;
}

.Btn[data-following="true"]::after {
  content: "YOUR TEXT HERE";   /*This is for AFTER following*/
  visibility: visible;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: COLOR;
  color: COLOR;
  border: 1px solid COLOR;
  border-radius: SIZE;

  font-family: FONT;
  font-size: SIZE;
  letter-spacing: SIZE;
}

How to change followers count text:

⎗

<style>
/* ===== FOLLOWERS COUNT CUSTOM TEXT STYLE ===== */
.pp-uc-followers-count {
  font-family: FONT;
  font-weight: WEIGHT;
  font-size: SIZE;
  letter-spacing: SIZE;

  color: COLOR;

  position: relative;
  bottom: SIZE;

  text-transform: lowercase;
  opacity: OPACITY;
}

/* hides the default followers text */
.pp-uc-followers-count span:nth-of-type(2) {
  font-size: 0;
}

/* custom text after follower number */
.pp-uc-followers-count span:nth-of-type(1)::after {
  content: "YOUR TEXT HERE";
  font-size: SIZE;
  font-style: FONT_STYLE;
  letter-spacing: SIZE;
  white-space: nowrap;
}
</style>

NOW, LETS MOVE ON TO OUR PROFILE PAGE!

How to change page overlay/filter:

⎗
✓
<div class="overlay-gif"></div>
<style>
.overlay-gif {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('LINK');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
z-index: 2;
pointer-events: none;
opacity: OPACITY;
}
</style>

How to change Janitor AI & Beta logo with replacement text:

⎗
✓
<style>
/* ===== TOP BAR CUSTOM TEXT ===== */
/* only change the text inside "YOUR TEXT HERE" and colors to your liking 💗*/

.pp-top-bar {
  background: linear-gradient(180deg, rgba(12,4,4,0.95), rgba(12,4,4,0.88));
  border-bottom: 1px solid rgba(255,182,193,0.45);
  box-shadow: 0 6px 26px rgba(255,105,180,0.18);
  backdrop-filter: blur(6px);
}

.profile-top-bar-logo-box {
  position: relative;
  margin-left: -20px;
  max-width: none;
}

/* hides default site text */
.pp-top-bar-logo-name,
.pp-top-bar-logo-sub-name {
  font-size: 0;
}

/* custom text shown instead */
.pp-top-bar-logo-name::after {
  content: "YOUR TEXT HERE";
  display: inline-block;

  min-width: 26px;
  text-align: center;

  font-family: "Cardo", serif;
  font-size: 1rem;
  letter-spacing: 0.6px;
  color: #ffd6e7;

  padding: 8px 18px;
  white-space: nowrap;

  background: linear-gradient(
    139deg,
    rgba(255,105,180,0.28),
    rgba(255,182,193,0.14)
  );

  border-radius: 999px;
  border: 1px solid rgba(255,182,193,0.55);

  box-shadow:
    0 0 14px rgba(255,105,180,0.45),
    inset 0 0 8px rgba(255,182,193,0.25);

  transition: all 0.35s ease;
}

/* hover glow effect */
.pp-top-bar-logo:hover .pp-top-bar-logo-name::after {
  color: #fff;
  box-shadow:
    0 0 22px rgba(255,105,180,0.75),
    inset 0 0 12px rgba(255,182,193,0.35);
}
</style>

How to change search bar text:

⎗
✓
<style>
.css-zgqw37 {
  text-align: center;
  color: #d6b98c;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.45em;
  font-weight: 600;
  text-transform: uppercase;
}

#search-input::placeholder {
  opacity: 0 !important;
}

.css-dx9k9q,
.css-1k4c8y5 {
  display: none !important;
}

.search-input {
  position: relative;
  border-radius: 18px;
  background: rgba(15, 13, 10, 0.75);
  border: 1px solid rgba(214,185,140,0.35);
  box-shadow:
    0 0 22px rgba(184,155,94,0.25),
    inset 0 0 18px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
}

.search-input::after {
  content: "Find company...";
  font-family: "Amiri", serif;
  font-size: 0.95rem;
  color: rgba(214,185,140,0.65);
  letter-spacing: 0.15em;
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity .3s ease;
}

#search-input {
  font-family: "Cormorant Garamond", serif !important;
  color: #eae6dc;
  background: transparent;
  border: none;
  outline: none;
  caret-color: #d6b98c;
  padding-left: 34px;
}

.search-input:has(#search-input:focus)::after,
.search-input:has(#search-input:not(:placeholder-shown))::after {
  opacity: 0;
}
</style>

How to change characters count text"

⎗
✓
<style>
  /* ===== BUTTON TEXT (WORKING & SIMPLE) ===== */

/* remove original button visuals */
.Btn2-purple {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  position: relative;
}

/* hide original text safely */
.Btn2-purple p {
  display: none;
}

/* custom text */
.Btn2-purple::after {
  content: "YOUR TEXT HERE";
  font-family: FONT;
  font-size: SIZE;
  font-weight: WEIGHT;
  color: COLOR;

  display: block;
  text-align: center;
  white-space: nowrap;
}

/* simple text below / label */
.css-wd8hou {
  font-family: FONT;

  font-size: SIZE;
  color: COLOR;
}
</style>

How to hide the blue characters tab:

⎗

<style>
.css-i3ef4m {
  visibility: hidden;
}
</style>

FREE CSS TEMPLATES

For this, its CSS codes designed by me (@blurryimage12). I'd love if you did credit me for this, cuz it took sooo longg 😭🫶🏻 Just copy n paste in your 'about me' section or that customization box!

For customization of the menu bar:

⎗
✓
<style>


.pp-top-bar-app-menu img {
  border-radius: 50%;
  border: 2px solid #ff4fa3;
  padding: 2px;
  background: black;
  box-shadow: 0 0 10px rgba(255, 79, 163, 0.6);
  aspect-ratio: 0;
}


.pp-top-bar-app-menu-list {
  background: linear-gradient(180deg, #0b0b0b, #050505);
  border-radius: 18px;
  border: 1px solid rgba(255, 79, 163, 0.4);
  box-shadow:
    0 0 18px rgba(255, 79, 163, 0.25),
    inset 0 0 1px rgba(255, 79, 163, 0.05);
  padding: 35px;
}


.pp-top-bar-app-menu-list hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 79, 163, 0.6),
    transparent
  );
  margin: 1px 0;
}


.pp-top-bar-app-menu-list-item {
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
  color: #ffd6ea;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 12px;
  transition: all 300ms ease;
}


.pp-top-bar-app-menu-list-item:hover {
  background: rgba(255, 79, 163, 0.15);
  color: #ff4fa3;
  box-shadow: inset 0 0 10px rgba(255, 79, 163, 0.3);
  transform: translateX(3px);
}
</style>

For customization of the notifications:

⎗
✓
<style>


[class*="Popover_"]{
  background: #0e0b0d;
  border: none;
  padding: 0;
  font-family: "Cardo", serif;
  box-shadow: none;
}


[class*="popoverHeader_"]{
  background: transparent;
  padding: 1.2rem 1.6rem 0.6rem;
  border-bottom: 1px dashed rgba(255, 182, 213, 0.25);
}


[class*="popoverTitle_"]{
  color: #ffb6d5;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: lowercase;
}


[class*="popoverHeader_"] button{
  background: transparent;
  color: #7a6a73;
  border-radius: 0;
}
[class*="popoverHeader_"] button:hover{
  color: #ffb6d5;
}


[class*="_notificationItem_"]{
  background: transparent;
  border: none;
  padding: 1.2rem 1.6rem;
  position: relative;
}


[class*="_notificationItem_"]::before{
  content: "";
  position: absolute;
  left: .9rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 1px;
  background: rgba(255,182,213,0.15);
}


[class*="_notificationItem_"]:hover{
  transform: translateX(6px);
}


[class*="Indicator_"]{
  background: #ffb6d5;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}


[class*="_notificationTitle_"],
[class*="_subject_"]{
  color: #f3e8ee;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .04em;
}


[class*="_notificationMessage_"],
[class*="_body_"]{
  color: #c3aeb9;
  font-size: .8rem;
  line-height: 1.6;
  font-style: italic;
}


[class*="_notificationTime_"],
[class*="_timestamp_"]{
  color: #ffb6d5;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: lowercase;
  opacity: .7;
}


[class*="_archiveButton"]{
  background: transparent;
  color: #9b8a93;
  border-radius: 0;
}
[class*="_archiveButton"]:hover{
  color: #ffb6d5;
}


[class*="_loadMoreButton_"]{
  border: none;
  background: transparent;
  color: #ffb6d5;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: lowercase;
}
[class*="_loadMoreButton_"]:hover{
  text-decoration: underline;
}
</style>

For the customization of the filter button:

⎗

<style>
.pp-fl-filter-button{
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,182,213,.4);
}
.pp-fl-filter-button svg{
  color: #ffb6d5 !important;
}


#root ~ :has(> .profile-filter-modal-modal-overlay)
[data-focus-lock-disabled] > * > *{
  background: #0e0b0d;
  border: none;
  padding: 1.4rem;
}


.profile-filter-modal-body-tags-flex-box-heading{
  color: #ffb6d5;
  font-size: .75rem;
  letter-spacing: .35em;
  text-transform: lowercase;
  margin-bottom: .8rem;
}


[class*="_expandButton_"]{
  background: transparent;
  border: none;
  color: #ffb6d5;
}
[class*="_expandButton_"]::before{
  content: "~ unfold more ~";
  font-size: .7rem;
  letter-spacing: .25em;
}


[class*="_collapsedContainer_"] [class*="_tag_"]{
  background: transparent;
  border: none;
  color: #bfaab6;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: lowercase;
}
[class*="_collapsedContainer_"] [class*="_tag_"]:hover{
  color: #ffb6d5;
}

</style>

END OF PAGE!
hope any of this helps you <3
by: blurryimage12 a.k.a Sarah 💗
Alt Tag

Warning