Cat themed bot cards

With me no longer using this theme for my main account, I thought I might as well turn the bot cards into a template.

PC preview:
PC preview

I can't promise I'll update this template in any sort of timely manner if classes change. If it breaks I recommend using the CSS forum in JanitorAI's Discord to ask for help.

Credit:

If you use these bot cards, I do require credit. Please either paste the line provided right above the actual template code somewhere in your bio or credit me in another way, preferably with a link to my main profile, @Cyanoide, which can be found here. Using templates without credit is reportable. If you are found to be using this template without credit, you will be reported. Yes, there are consequences.
You are free to edit this template however you want, just remember to still provide credit if you use the template.

Table of contents:

Previews

PC preview:
PC preview

Mobile preview:
Mobile preview

Where to put the code

I recommend using the About Me section, which you can find here: https://janitorai.com/profile-settings
Or, you can click on the user menu and then on "Settings"

Step 1

This will bring you to this page:

Step 2

Scroll down a little and click "Show Editor"

Step 3

Paste in the template, then press "Save changes" under the persona appearance box

Step4

Template code

I did not edit the notes in my code to be more useable as a template. I only skimmed over the notes and they seem pretty decent for at least indicating what each element is, but they may be partially incorrect. In those cases the notes may refer to something I had in an older theme that I have just associated with that code.

If you are unsure on how to credit me, please put something like this in your profile bio:
<p>Bot card CSS by <a href="https://janitorai.com/profiles/715f6db3-9ea6-4ef6-8caa-1521f85a7d00_profile-of-cyanoide">@Cyanoide</a></p>
Unlike the bot card code, this should be with your profile bio text, not within <style></style>.

Copy all of this code and paste this in the "About me"

<style>
/* BOT CARDS */
/* TRANSPARENT LAYERS */
.css-0{
   background: transparent !important;
}
div:is(:has(> .css-1s5evre, ~ .css-1s5evre)):not(.pp-cc-gradient-2), .css-effh3d, .css-1henxb{
   background: none;
}
.pp-cc-wrapper:hover, css-1utqofo{
 box-shadow: none;
}
/* Bot Cards - Base Shape */
.css-1s5evre{
   background: #000f0f;
   border-radius: 100px;
   border: 1px solid #dabc81;
   padding-top: 42px;
   top: 23px;
}
/* Bot Cards - Base Shape - double border */
.css-1s5evre:before{
   border: 1px solid #dabc81;
   border-radius: 100px;
   content: "";
   inset: 3px;
   pointer-events: none;
   position: absolute;
   z-index: 0;
}
/* Bot Cards - Cat Ear Layer */
.pp-cc-gradient-2{
   background: #000f0f;
   border: 1px solid #dabc81;
   clip-path: polygon(0 0, 100% 100%, 100% 0, 0 100%);
   height: 150px;
   z-index: -20;
}
/* Bot Cards - Cat Ear Layer - double border */
.pp-cc-gradient-2:before{
   border: 1px solid #dabc81;
   content: "";
   inset: 3px;
   position: absolute;
  z-index: 0;
}
/* MESSAGE COUNT RIBBON */
/* Ribbon position: */
.css-10cv7r2{
   right: 29%;
   top: 17px;
   transform: translate(50%, -50%);
}
/* Remove Inset, Hide Overflow, Drop Shadow */
.pp-cc-ribbon{
   filter: none;
   overflow: visible;
   padding: 0;
}
/* Remove weird shape, weird shadow, hidden overflow */
.pp-cc-ribbon-wrap{
   background: transparent;
   border-radius: 0;
   box-shadow: none;
   clip-path: unset;
   inset: unset;
   overflow: visible;
   padding: 0;
}
/* Text, background and icon */
.pp-cc-chats{
   background: #1e1309;
   border: 1px solid #dabc81;
   border-radius: 100px;
   color: #dabc81;
   font-family: "Cinzel Decorative", serif;
   justify-content: center;
   width: 100px;
}
.pp-cc-chats::before{
  content: "•";
  left: 10px;
  position: absolute;
}
.pp-cc-chats::after{
  content: "•";
  position: absolute;
  right: 10px;
}
 css-10cv7r2 * {
  width: 100%;
}
/* SWAPPING PFP AND TITLE */
a:has(.profile-character-card-avatar-aspect-ratio){
   display: flex;
   flex-direction: column-reverse;
}
/* Bot Cards - Image */
.profile-character-card-avatar-aspect-ratio{
   border: 2px solid #dabc81;
   border-radius: 100px 100px 0px 0px;
   height: 230px;
}
/* Bot Cards - Bot Names */
.pp-cc-name{
   color: #dabc81;
   font-family: "Cinzel Decorative", serif;
   font-size: 15px;
   font-weight: 100;
   letter-spacing: inherit;
   opacity: 1;
   text-shadow: none;
   text-transform: none;
   transition: 0.2s;
   z-index: 10000;
}
.pp-cc-name:hover{
   color: #fff;
   z-index: 10000;
}
/* Bot Cards - @ */
.css-1m151rf{
   display: none;
}
/* Bot Cards - Summary */
.pp-cc-description{
   color: #dabc81;
   display: -webkit-box;
   font-family: "Cardo", serif;
   font-size: 13px;
   line-clamp: 5;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
}
/* Bot Cards - Min Length to Align Lines */
.profile-character-card-description-box{
   min-height: 142px;
}
/* Bot Cards - Star + Line */
.css-1s5evre>div:nth-child(4) img{
   display:none;
}
.css-1s5evre>div:nth-child(4)::after{
   color: white;
   content: "🐾";
   display: inline-block;
   filter: sepia(1) saturate(2) brightness(2);
   font-size: 25px;
   left: 63px;
   position: absolute;
   text-align: end;
   top: -71px;
   transform: rotateZ(55deg);
   width: 100%;
}
.pp-cc-star-line{
   border-top: 1px solid #dabc81;
}
/* Bot Cards - Event Decorations */
.css-nip9dx, .css-1wqmh16, .css-xrg4vd, .css-5v5qgx, .css-1awld45, .css-1cui3us, .css-8828od{
   display: none;
}
/* BOT CARDS - TAGS */
/* Bot Cards - Tag Styling - Limitless Text Replacement + Styling */
.pp-tag-limitless{
   background: #1e1309;
   border: 1px solid #dabc81;
   color: #dabc81;
   border-radius: 100px;
   font-size: 0px;
   text-align: center;
   font-family: "Cinzel Decorative", serif;
   font-size: 15px;
   font-weight: 100;
   padding-bottom: 1px;
   padding-top: 2px;
   width: 100%;
}
.pp-tag-limitless::before{
  content: "•";
  left: 20px;
  position: absolute;
}
.pp-tag-limitless::after{
  content: "•";
  position: absolute;
  right: 20px;
}
/* Bot Cards - Tag Styling - Normal Tags */
.pp-cc-tags-regular{
   background: #1e1309;
   border: 1px solid #dabc81;
   border-radius: 0px;
   color: #dabc81;
   font-family: "Cardo", serif;
   font-size: 13px;
   font-weight: 100;
   height: 21px;
   padding-top: 1px;
   transition: 0.2s;
}
.pp-cc-tags-regular:hover{
   background: #4d3d27;
   border: 1px solid #dabc81;
   color: #fff;
}
/* Bot Cards - Tag Styling - Custom Tags */
.pp-cc-tags-custom{
   background: #1e1309;
   border: 1px solid #dabc81;
   border-radius: 0px;
   color: #dabc81;
   font-family: "Cardo", serif;
   font-size: 13px;
   font-weight: 100;
   height: 21px;
   padding-top: 3px;
   transition: 0.2s;
}
.pp-cc-tags-custom:hover{
   background: #4d3d27;
   border: 1px solid #dabc81;
   color: #fff;
}
.pp-cc-tags-custom::first-letter{
   text-transform: capitalize;
}
/* Bot Cards - Tag Styling - Removing Emotes */
.pp-cc-tags-regular{
   display: inline-block;
   line-height: unset;
   padding-left: 1px;
}
.pp-cc-tags-regular::first-letter{
   font-size: 0;
}
/* Bot Cards - Tag Styling - Dead Dove Text Replacement */
a[href*="/search?mode=all&sort=popular&tag_id=49&page=1"] .pp-cc-tags-regular{
   font-size: 0;
   padding-left: 9px;
}
a[href*="/search?mode=all&sort=popular&tag_id=49&page=1"] .pp-cc-tags-regular::after{
   color: #dabc81;
   content: 'Dead Dove';
   font-family: "Cardo", serif;
   font-size: 13px;
   font-weight: 100;
   transition: 0.2s;
}
a[href*="/search?mode=all&sort=popular&tag_id=49&page=1"] .pp-cc-tags-regular:hover::after{
   color: #fff;
}
/* Bot Cards - Tag Styling - Positioning */
.css-k1urot{
   display: grid;
   grid-template-columns: 48% 48%;
   justify-content: center;
   padding-bottom: 55px;
}
.css-123m5uu{
   grid-column: 1 / 3;
}
.pp-tag-limitless, .css-4a6x12, .pp-cc-tags-regular, .css-k1urot > li > a > span:not(.pp-cc-tags-regular){
   width: 100%;
}
.pp-cc-tags-regular, .css-k1urot > li > a > span:not(.pp-cc-tags-regular){
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.css-k1urot > li > a > span:not(.pp-cc-tags-regular){
   min-width: 81px;
}
/* Bot Cards - Tokens */
.pp-cc-tokens-count{
   color: #dabc81;
   font-family: "Cinzel Decorative", serif;
   font-size: 13px;
   font-weight: 100;
   letter-spacing: inherit;
   opacity: 1;
   padding-bottom: 20px;
   text-shadow: none;
   transition: 0.2s;
}
/* MOBILE FIXES */
@media screen and (max-width: 767px){
/* BOT STUFF */
/* Message Ribbon */
.css-10cv7r2{
   top: 17px;
   left: 10px;
}
.pp-cc-chats{
   width: 80px;
}
/* Star + line */
.css-1s5evre>div:nth-child(4)::after{
   left: 53px;
   top: -65px;
}
/* Tag width */
.css-k1urot > li > a > span:not(.pp-cc-tags-regular){
   min-width: 73px;
} }
</style>
Edit

Pub: 01 Oct 2025 08:43 UTC

Edit: 20 Dec 2025 12:19 UTC

Views: 1467