Last updated: 13/2/2025
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 | <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>
|