> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.janitorai.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Code Collection: Bot Card

# Bot Card
###### Bot card preview text
```
<style>
.css-96l1id {
color: COLOR;
}
</style>
```
Note: changes the color of the preview text on the bot card, aka the character bio that is being previewed on the bot card. Does not change the color of the text on the actual bot page.Change `COLOR` to your desired hexcode, rgb/rgba, or color name
Example:
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_cwwraj.png =211xauto)

###### Bot card background color, gradient or image/gif
**Note:** Go to the Class ID list to see the different class IDs for the bot cards.
**For Gradient**
```
<style>
.css-1s5evre {
background: GRADIENT !important;}
</style>
```
Replace
 `GRADIENT`...
... with `linear-gradient` -similar to the original gradient pattern of bot cards [reference for linear gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)
... or `radial-gradient` -colors begin appearing from the middle [reference for radial gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient)
You may also refer to the Gradient Patterns for specific patterns.

**For Solid Color**
```
<style>
.css-1s5evre {
background-color: COLOR;
}
</style>
```
Replace
 `COLOR` with the word of the color, a specific hex code, or rgb.
Examples:
| ![Linear Gradient](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_gj36tq.png) | ![Radial Gradient](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_1esz48.png) | ![Solid Colour](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_146g8wl.png) |


**For Image/Gif Background**
```
<style>
.css-1s5evre {
background-image: url('LINK');
}
</style>
```
Example:
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_exkvhh.png =184xauto)


###### Transparent bot card background
**NOTE:** this code is known to not work most of the time, likely due to the class IDs. I highly recommend to Inspect Element and check if the class IDs match the ones below. If they do not, replace the class IDs listed below with the ones for your bot cards.Credits to Silverado, [Ikyokeye](https://janitorai.com/profiles/79d6ad9f-5f45-4bda-8ef1-49e1360b0b4f_profile-of-ikyokeye) for the original code, and Crowbirdie for the new version.
```
<style>
.css-0 { background: rgba(1, 1, 1, 0) !important;} /*&#32;sets css-0 as transparent; removes gradients*/
@media screen and (min-width: 48em) {
}
</style>
<style>
/*bot card general color*/
.css-12vfojg {
background: transparent;
}
.css-dltla {
background: transparent;
}
.css-1jf56se {
background: transparent;
}
.css-1s5evre {
border: none;
border-radius: 0;
}
</style>
```

Example
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_2xzt0w.png =911xauto)


###### Bot Card Custom Border
**NOTE:** This requires making .css-0 transparent. This will remove the default gradient and borders of the profile card, Public Characters box, bot card, and tags menu.
```
<style>
.css-0 { background: rgba(1, 1, 1, 0) !important;} /* sets css-0 as transparent. Remove if this was already previously set/unneeded */
.css-1s5evre {
border-width: NUMBERpx;
border-style: STYLE;
border-color: COLOR;
}
</style>
```
Change
 `COLOR` to any color. hexcode or rgba/rgb.
Change `NUMBER` to whatever thickness you want border to be.
Change `STYLE` to whatever style you want. Use [this w3school page](https://www.w3schools.com/css/css_border.asp) as a reference for this.
Credits to Ikyokeye for the previous code.

###### No Round Corners for Bot Cards
Credits to Maddieismystar
```
<style>
.css-1jf56se, .css-dltla, .css-19n2nzy, .css-0 {
border-radius: 0px; }
</style>
```
**NOTE / EXPLANATION:** `.css-0` also needs to be affected IF you use `.css-0` to change bot card borders.
Example:
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_ueainq.png =195xauto)


###### Bot Card Specific Overlays/Filters
**solid color (whole bot card, including image)**
```
<style>
.css-1jf56se {
background: COLOR !important;
z-index: 10;
opacity: OPACITY;}
</style>
```
Credits to ikyokeye
Replace `COLOR` with the word of the color, a specific hex code, or rgb.
And replace `OPACITY` with a value from 0 to 1.0 (other values are in decimal; 0.1 to 0.9). The lower the value, the more transparent it is.

**gradient (whole bot card, including image)**
```
<style>
.css-0 {
background: GRADIENT !important;
z-index: 10;
opacity: OPACITY;}
</style>
```
Replace `GRADIENT`...
... with `linear-gradient` -similar to the original gradient pattern of bot cards [reference for linear gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)
... or `radial-gradient` -colors begin appearing from the middle [reference for radial gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient)
And replace `OPACITY` with a value from 0 to 1.0 (other values are in decimal; 0.1 to 0.9). The lower the value, the more transparent it is.
Example:
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_1xsa9ks.png)
###### Chat Count Ribbon Color
Credits to Iorveths
```
<style>.css-wexxj8 {background: COLOR/GRADIENT !important;}</style>
<div class="content css-wexxj8"></div>
```
Replace
 `COLOR` with the word of the color, a specific hex code, or rgb.
OR
Replace `GRADIENT`...
... with `linear-gradient` -similar to the original gradient pattern of bot cards [reference for linear gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)
... or `radial-gradient` -colors begin appearing from the middle [reference for radial gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient)

###### Changing the Star in Bot Cards
**Unfortunately, the original code for this is now obsolete as url() has been disabled.** 
However, you can still change the color of the star or remove it altogether.
Credits to Maddieismystar for the original code posted here.

**For changing the star's color,** you can do so by using the **filter** property. Here's an example that turns makes the star gold:
```
.css-hl99y6 {
filter: brightness(0) saturate(100%) invert(76%) sepia(76%) saturate(651%) hue-rotate(357deg) brightness(101%) contrast(104%); }
```
![](https://storage.crisp.chat/users/helpdesk/website/-/8/b/4/e/8b4ea6e8d9765000/image_2xnuwt.png)
You can use this [**generator**](https://angel-rs.github.io/css-color-filter-generator/) to generate a value based on a color you feed it.
**To completely remove the star,** just give it the **visibility** property:
```
.css-hl99y6 {
visibility: hidden;
```
---
| Previous Article | Next Article |
| ---- |
| [Return to Code Collection](https://janitorai.crisp.help/en/article/a-guide-to-css-code-collection-1ez72vq/) | [Code Collection: Profile Page](https://janitorai.crisp.help/en/article/code-collection-profile-page-1mxhz6l/) |