PermanentPuppy

Simple Horizontal Grid Botcard Template

Jul 20th, 2025 (edited)
1,728
1
Never
5
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.06 KB | None | 1 0
  1. <style>
  2. /* code by puppy/@permanent available on pastebin and discord, please credit if using or adapting */
  3. /* setting botcard backgrounds to transparent */
  4. .pp-cc-wrapper, .pp-cc-wrapper>*:not(.css-1s5evre){
  5.     background: transparent !important;
  6. }
  7. /* adjusting botcard autopopulated layout */
  8. .pp-cc-list-container{
  9.     display: flex;
  10.     flex-flow: row wrap;
  11.     justify-content: center;
  12. }
  13. /* sizing of the botcard */
  14. .pp-cc-wrapper{
  15.     flex: 0 1 350px;
  16.     width: 350px;
  17.     height: 350px;
  18.     transition: all 300ms ease;
  19. }
  20. .css-1s5evre a{
  21.     display: contents;
  22. }
  23. .css-1s5evre{
  24.     background: transparent; /* change this for a background colour */
  25.     display: grid;
  26.     grid-template-columns: 1fr 1fr;
  27.     grid-template-rows: 1fr 1fr;
  28.     gap: 0px;
  29. }
  30. /* botcard image */
  31. .css-1q7rmf0 {
  32.     grid-area: 1 / 1 / 3 / 2;
  33.     margin: 2px;
  34.     border-radius: 0;
  35.     overflow: visible;
  36. }
  37. .pp-cc-avatar {
  38.     border-radius: 0;
  39. }
  40. .css-199gcrh, .pp-cc-tags{
  41.     max-height: 160px;
  42.     height: 100%;
  43.    overflow: hidden auto;
  44. }
  45. /* botcard description */
  46. .css-199gcrh{
  47.     grid-area: 1 / 2 / 2 / 3;
  48.     margin: 0;
  49. }
  50. /* botcard tags */
  51. .pp-cc-tags{
  52.     grid-area: 2 / 2 / 3 / 3;
  53.     margin-bottom: 0;
  54.     padding-bottom: 1rem;
  55. }
  56. /* getting rid of the star separator and username */
  57. .pp-cc-star-line, .pp-cc-creator-name{
  58.     display: none;
  59. }
  60. /* bot name */
  61. .css-nlxhw4{
  62.     grid-area: 2 / 1 / 3 / 2;
  63.     display: flex;
  64.     align-items: flex-end;
  65.     justify-content: center;
  66.     max-width: 175px;
  67.     z-index: 2;
  68. }
  69. /* chat ribbon positioning and some styling */
  70. .css-10cv7r2 {
  71.     right: unset;
  72.     display: flex;
  73.     top: 0;
  74.     justify-content: center;
  75.     width: 50%;
  76. }
  77. .pp-cc-ribbon {
  78.     filter: none;
  79.     position: relative;
  80.     inset: auto;
  81. }
  82. .pp-cc-ribbon-wrap {
  83.     clip-path: none;
  84.     background: transparent;
  85.     box-shadow: none;
  86.     padding: 0;
  87. }
  88. /* tokens */
  89. .css-1c9wmts {
  90.     justify-content: center;
  91.     width: 50%;
  92.     right: 0;
  93.     left: unset;
  94. }
  95. /* botcard effect on hover */
  96. .pp-cc-wrapper:hover{
  97.     transform: scale(1.05);
  98. }
  99. </style>
Advertisement
Comments
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
Add Comment
Please, Sign In to add comment