Last updated: 13/2/2025

Alt Tag BOT CARDS ONLY By Missradiance on Janitorai 🌼 ╧╧╧╧╧╧✿╧╧◆≪ ◦ ❖ ◦ ≫◆╧╧✿╧╧╧╧╧╧ 🌼

Link to live preview Link to announcement post Link to Full Monochrome Flowers Template Rentry

Table of Contents

◈━◈━◈━◈━◈━◈━◈━◈━◈

FAQ

Q: Is there a full profile of this theme

A: yes

Q: What if I don't credit you? I don't want to it's too much work 🥺

A: Peace and love to everybody who credits me, war and hate to you specifically

Q: Will this be updated regularly

A: It SUPER depends on my schedule, I'm a busy lady and I forget. There will be a forum post containing the full profile template + this one, if something needs updated just send a message there ORR dm me on discord @missrad1ence

Q: Will you make more themes?

A: Yes! Above is linked my JAI announcement post. If you have any ideas post a comment there and I *might* do it

Instructions

Go to your profile settings and paste this code into the "About Me" section. Important: Don't use the CSS editor for this template! The CSS editor strips out code comments, which will make future editing much more difficult.

If you've previously used CSS code (Even in "pro mode"): Please save your existing code elsewhere (like in Notes or a Google Doc) and then delete it from your profile before pasting this template. This prevents code conflicts. You can always customize the template after pasting it!

Updates

heyo, i fixed the bot card not having animations on hover + got rid of the stupid fucking box shadows. :D

The code

<style>
/* ============= BOT CARDS ============= */
.pp-cc-list-container{
gap: 1.3rem; 
}

/* removes box shadow on hover */
.css-1ifqy49 {
  box-shadow: none;
}


/* Add smooth transition for hover effects */
.profile-character-card-wrapper {
    transition: transform 0.3s ease;
}

/* Enlarge and slide up on hover */
.profile-character-card-wrapper:hover {
    transform: scale(1.02) translateY(-9px);
    box-shadow: none;
}

/* Ribbon positioning - remove absolute positioning to prevent overlap */
.css-10cv7r2 {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    display: flex;
    right: -60px;
    margin: 5px 0;
}

/* Essentials */
/* Negate inset, hidden overflow, drop shadow */
.css-1ket5wn {
  inset: unset;
  overflow: visible;
  filter: none;
  padding: 0;
}
/* Remove weird shape, weird shadow, hidden overflow */
._content_1chl9_11 {
  clip-path: unset;
  padding: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  border-radius: 0;
} 
/* Text, background and icon */
.css-euh5x6 {
    font-weight: 200;
    font-size: 13px;
    font-family: 'cardo';
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Add this for positioning the pseudo-element */
}

/* Add a centered 25% width line under the chat count */
.css-euh5x6::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30px;
    transform: translateX(-50%);
    width: 35%;
    height: 1px;
    background: #ffffff7d;
}




/* Add "Chats" text after the number */
.profile-character-card-chats-count::after {
    content: " Chats •";
}
/* Hide chat icon */
.pp-cc-chats svg {
  display: none;
}
/* New icon */
.pp-cc-chats::before {
  content: "•";
}
.css-10cv7r2 * {
  width: 100%;
}

.css-1s5evre{
   background: black;
  border: 1px solid white;
  outline: 1px solid white;
  outline-offset: 2px;
  border-radius: 1px;
}

/* Reorder bot name to appear below image */
.profile-character-card-stack-link-component {
  display: flex;
  flex-direction: column;
}

/* Move bot name to middle */
.css-nlxhw4 {
  order: 2;
}

/* Keep image at top */
.css-1q7rmf0{
  order: 1;
}

/* Move chat ribbon below bot name */
.profile-character-card-stats-box {
  order: 3;
}

/* Hide the username on bot card */
.profile-character-card-creator-name-box {
  display: none;
}

/* Make bot image taller */
.css-1q7rmf0 {
  height: auto;
  padding-bottom: 50%; /* If you wanna make it bigger just increase this number */
}


.profile-character-card-avatar-image {
  height: 100%;
  object-fit: cover;
  border-radius: 1px
}

/* Shrink tags container and add scroll when needed */
.profile-character-card-tags {
  max-height: 80px; /* Adjust this value to your preferred height */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Ensure tags list container works well with scrolling */
.css-k1urot {
  max-height: inherit;
}

/* Style token count container and text */
.css-1c9wmts {
  background-color: white;
}

/* Add flower symbols to the end of token count */
.profile-character-card-tokens-count::after {
    content: " ✿";
    color: black;
}

/* Add flower symbols to the beginning and end of token count */
.profile-character-card-tokens-count::before {
    content: "✿ ";
    color: black;
}

.profile-character-card-tokens-count {
  color: black;
  text-shadow: none;
  font-family: Courier Prime;
  font-size: 12px;
  text-align: center;
  position: relative;
  top: 3px  
}

/* Style bot name container and centering text */
.profile-character-card-stack-link-component-box {
  background-color: white;
  text-align: center;
}

/* max height on the char descroption, 
if you want a scroll bar on this replace overflow: hidden; with overflow-y: auto; */
.css-199gcrh.profile-character-card-description-box{
  max-height: 110px;
  overflow: hidden;
}

/* Style bot name text */
.profile-character-card-name-box {
  color: black;
  text-align: center;
  font-family: cardo;
  font-size: 15px;
  text-shadow: none;
}

/* The font/color of the text in the bot description */
.pp-cc-description p {
  font-family: cardo;
  color: white;
}
/* Greyscale bot images by default */
.profile-character-card-avatar-image {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
/* Remove greyscale on hover */
.css-1s5evre:hover .profile-character-card-avatar-image {
  filter: grayscale(0%);
}
/* Hide the original star image */
.profile-character-card-star {
  display: none;
}
/* Style the divider line container to full width */
.profile-character-card-star-line {
  width: 100%;
  position: relative;
  margin: 10px 0;
  border: 1px solid white;
}

/* Add the flower symbol centered on the line */
.profile-character-card-star-line::before {
  content: "✿";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  padding: 0 8px;
  font-size: 16px;
  color: white;
  border: 1px solid white;
  line-height: 1;
  z-index: 2;
}
/* Move description down to avoid line intersection */
.css-199gcrh.profile-character-card-description-box {
  margin-top: 15px;
}
/* Make limitless tag span full width of card */
.css-123m5uu.pp-cc-tags-wrap {
  width: 100%;
  display: block;
}
.css-123m5uu span.pp-tag-limitless {
  width: 100%;
  display: block;
  text-align: center;
  padding: 1px;
  box-sizing: border-box;
  font-family: Cardo;
  font-weight: 1000;
  background-color: white;
  color: black;
  border-radius: 1px;
  border: 2px solid white;

}
/* Hide original limitless text and set up for crossfade */
.css-123m5uu span.pp-tag-limitless {
  font-size: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* "Exclusive" text - visible by default */
.css-123m5uu span.pp-tag-limitless::before {
  content: "・ Exclusive ・";
  font-size: 14px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* "Choose me?" text - hidden by default, overlaid */
.css-123m5uu span.pp-tag-limitless::after {
  content: "‪‪❤︎‬ Choose me? ‪‪❤︎‬";
  font-size: 14px;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* On hover - crossfade */
.css-1s5evre:hover .css-123m5uu span.pp-tag-limitless::before {
  opacity: 0;
}

.css-1s5evre:hover .css-123m5uu span.pp-tag-limitless::after {
  opacity: 1;
}
/* tag styling bc yeah */
.pp-cc-tags-regular,
.pp-cc-tags-custom {
  border: 1px solid white;;
  color: white;
  background: black;
  border-radius: 1px;
}

:is(.pp-cc-tags-regular, .pp-cc-tags-custom):is(:hover, :focus) {
  border: white;
  background: white;
  color: black;
}
/* REMOVING THE FIRST EMOJI ON TAGS (Creds to tigerdropped ily)*/
.pp-cc-tags-item { display: inline-block; } /* needed for inline effects */
/* regular tags */
.pp-cc-tags-regular::first-letter {
  font-size: 0;
}
/* @Procrastination was the pioneer, now it was made easier through labels 🩵 */
/* removes the original text for the "dead dove" tag */
.pp-tag-deaddove { font-size: 0; }

/* replaces the text for the "dead dove" tag */
.pp-tag-deaddove::after {
    content: "Dead Dove";
    font-size: 0.75rem;
}
/* getting rid of decorations from events */
.css-1wqmh16,.css-nip9dx img,.css-xrg4vd img,.css-1awld45,.css-1cui3us   { /* stamp on 2025 bot card */
  display: none;
}
.pp-tag-limitless{ /* Limitless tag transparency (no more purple) */
background: transparent;
}

/* =======  ✿ END OF BOT CARD SECTION  ✿ ======= */

</style>
Edit

Pub: 03 Sep 2025 03:43 UTC

Edit: 02 Dec 2025 18:18 UTC

Views: 2684