yonghaaa's profile css ! ୨୧
꩜ .ᐟ Hi there, lovelies. I have created this page in order to try and help people out with css! I know it a quite a struggle, and in NO way am I a pro. But i figured, why not contribute and make a page for people to use? So, here we are ! (๑>◡<๑)
꩜ .ᐟ Some css on here may be some that I got off of the discord/reddit. With that being said, I will credit those necessary and also provide links to more helpful css guides! In fact, there will be a specific section for those ! ( ˘͈ ᵕ ˘͈♡)
╰┈➤ (*This code will center your profile picture!)
<style>
.css-1uodvt1 {
padding-top: 0px;
flex-direction: column;
justify-items: center;
text-align: center;
}
</style>
╰┈➤ (This code will increase the size of your profile picture! Adjust it to your liking!)
<style>
.css-18bnokj {
border-radius: %;
height: 600px;
width: 500px;
margin-bottom: 20px;
}
</style>
╰┈➤ (*This code will make bot cards transparent!)
<style>
.css-0 {
background: none!important;
}
.css-1sxhvxh {
background: transparent;
}
.css-dltla {
background: transparent;
}
.css-1jf56se {
background: transparent;
}
</style>
╰┈➤ (This code is for bot card borders! Customize it to your liking!)
<style>
.css-0 { background: rgba(1, 1, 1, 0) 30% !important;} /* sets css-0 as transparent. Remove if this was already previously set/unneeded */
.css-1s5evre {
border-width: NUMBERpx;
border-style: BORDER TYPE;
border-color: #HEX;
}
</style>
╰┈➤ (This code will show color in bot images when you hover over it! This code was found in Crowbird's CSS Carrd!)
<style>
.css-1q7rmf0 {
transform: none !important;
filter: saturate(.4);
-webkit-filter: saturate(.4);
rgb: (61,43,31);
transition: all 1s ease;
}
.css-1q7rmf0:hover {
filter: saturate(1);
-webkit-filter: saturate(1);
}
</style>
╰┈➤ (*This code will place the bot name underneath the bot image, and center your username on the bot card!)
<style>
.chakra-stack.css-1s5evre a {
display: flex;
flex-direction: column-reverse;
justify-content: center;
}
</style>
╰┈➤ (*Use this code if you would like to change the bot card opacity! Meaning you can make it translucent, fully opaque, or transparent!)
<style>
.css-dltla, .css-1jf56se, .css-1s5evre, .css-19n2nzy {
background: rgba(, , ) !important;
opacity: 80%
}
</style>
╰┈➤ (This code changes the font of your username on the bot card!)
<style> .css-1m151rf { color: #2e8b57; font-family: 'Press Start 2P'; font-weight: 300; font-size: 14px; } </style>
╰┈➤ (This code lengthens the bot card profile image! Also was found in the Crowbird CSS Carrd!)
<style>
.css-1q7rmf0:before {
height: 110px;
}
</style>
╰┈➤ (This code centers the "NUMBER Characters icon!)
<style>
.css-zdpt2t {
margin: auto;
}
.css-mcoi9a {
margin: auto;
}
.css-m8ywhg {
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
flex: 1;
}
.Btn2-purple {
width: 100%;
background: transparent;
justify-content: center;
transition: 0s;
}
.Btn2-purple:before {
background-color: transparent;
}
</style>
╰┈➤ (This code changes the bot's name font! Text Shadow can be used to give the font a specific colored glow! If you don't want that, feel free to delete it!)
<style> .css-zgqw37 { font-family: "FONT", serif; font-weight: NUMBER; font-style: italic; color: #HEX; text-shadow: NUMBERpx NUMBERpx NUMBERpx #HEX } </style>
╰┈➤ (This code changes the bot card chat count color!)
<style>.css-wexxj8 {background: #69290B !important;}</style>
<div class="content css-wexxj8"></div>
╰┈➤ (This code changes the NUMBER characters icon. You can make it say whatever you'd like!)
`<style>
.Btn2-purple {
border: none;
background: none;
}
.Btn2-purple:before {
background-color: transparent;
transition: none;
}
.css-wd8hou strong {
font-size: 14px;
}
.Btn2-purple > .css-wd8hou p {
font-size: 0px; /* this hides the characters text */
}
.Btn2-purple > .css-wd8hou p::after {
transition-duration: 0s;
color: white;
font-size: NUMBERpx;
content: 'TEXT'; /* this replaces the "characters" text - you can write what you want */
}
</style>
╰┈➤ (This following text will be code for a basic drop down! I struggled a lot with this one myself, so hopefully it helps other people!)
(This is simply for the design of your drop down. Go crazy with it!)
<style>
details summary { background-color: transparent; color: #NUMBER; padding: 10px; border-radius: NUMBERpx; font-weight: bold; text-align: center; width: 100%; margin-bottom: NUMBERpx; border: NUMBERpx solid #HEX; } details p { background-color: none ; padding: NUMBERpx; border-radius: NUMBERpx; margin-top: NUMBERpx; color: #HEX; } details summary:hover { background-color: none } </style>
(Here is the actual drop down! All information/text should be encased in <p> and </p>. Like this: <p> EXAMPLE </p>. Copy that code down there to make as many more drop downs as you want!)
<details>
<summary> TEXT </summary>
<p> lorem ipsum dolor sit amet consectetur adipiscing elit. <p>
<p> lorem ipsum dolor sit amet consectetur adipiscing elit. <p>
<p> lorem ipsum dolor sit amet consectetur adipiscing elit. <p>
</details>
╰┈➤ (This code changes the color of the top bar of your profile! Which contains the J.AI logo and search bar.)
`<style> .css-p641ht { display: flex; -webkit-box-pack: justify; justify-content: space-between; position: fixed; padding-top: var(--chakra-space-1); padding-bottom: var(--chakra-space-1); background: #HEX; box-shadow: var(--chakra-shadows-md); z-index: 2; backdrop-filter: blur(10px); padding-inline-start: var(--chakra-space-12); padding-inline-end: var(--chakra-space-12); width: var(--chakra-sizes-full); -webkit-box-align: center; align-items: center; height: var(--chakra-sizes-16); } </style>'
╰┈➤ (This code changes the color of your "Create A Character" font!)
<style> .css-1yhasuw { display: flex; padding: var(--chakra-space-1); padding-inline-start: var(--chakra-space-2); padding-inline-end: var(--chakra-space-2); -webkit-box-align: center; align-items: center; gap: var(--chakra-space-3); color: white; } </style>
╰┈➤ (This code changes the text and font of your search bar!)
`<style>
/ style for the search input or typed text /
font-family: 'FONT' !important;
font-size: 1rem !important;
font-weight: normal;
caret-color: #HEX;
transition: color 600ms ease, caret-color 600ms ease;
}
/* makes the original placeholder text not visible */
search-input::placeholder { /* make sure to have a hashtag behind "search-input" ! */
opacity: 0;
}
/* THE NEW PLACEHOLDER TEXT */
/* new placeholder text */
.search-input:after {
content: "TEXT";
font-family: 'FONT';
font-size: 1rem;
font-weight: normal;
position: absolute;
max-width: 58%; /* not noticeable unless on a smaller device */
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* adds an ellipsis instead of an abrupt cut-off when the text is too long */
pointer-events: none;
transition: color 600ms ease, opacity 300ms ease; /* if you don't want the placeholder text to subtly fade in/out, remove the opacity transition here */
}
`/ hides the typed text by default /
search-input,
.css-bar9lc:focus-within .search-input:after,
.search-input:has(#search-input:not(:placeholder-shown)):after {
opacity: 0;
}
/* makes the typed text visible when the search bar has text inside or is clicked on */
.css-bar9lc:focus-within #search-input,
.search-input:has(#search-input:not(:placeholder-shown)) #search-input {
opacity: 1;
}
</style>
╰┈➤ (This code is for changing the followers text. You can add more text behind it, and change the "followers" text all together!)
<style>
.css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(2){
font-size:0;
}
.css-1uodvt1>.css-8g8ihq>div:nth-child(2) span:nth-of-type(2)::before{
font-size:16px;
content:" TEXT" /*new followers text*/
}
.css-1uodvt1>.css-8g8ihq>div:nth-child(2)::before{
font-size: 15px;
content:" TEXT "
}
.css-1uodvt1>.css-8g8ihq>div:nth-child(2):: after {
font-size: 15px;
content:""
}
.Btn2-purple>.css-wd8hou p{
font-size:0;
}
.Btn2-purple>.css-wd8hou p::before{
font-size: 15px;
content:"";
}
</style>
╰┈➤ (This code changes the J.AI logo! However, this does not include the beta section yet, as the css code for it has seemingly changed.)
<style>
.css-e8xvxi {
border: none;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.css-e8xvxi h2 {
font-size: 1px !important;
}
.css-e8xvxi h2:after {
position: relative;
font-size: NUMBERpx;
text-align: center;
font-family: 'FONT';
color: #HEX;
content: "TEXT";
text-wrap: nowrap;
}
.css-bda9ez {
font-size: NUMBERpx !important;
}
</style>
╰┈➤ (This code is for changing the font and size of your username!)
<style>
/* USERNAME */
@media screen and (min-width: 42rem) {
.css-jlhfdy {
font-size: NUMBERem;
line-height: 1;
font-family: 'FONT';
text-decoration: none;
}
}
.css-70qvj9 h2 {
font-size: NUMBERem;
line-height: 1;
font-family: 'FONT';
text-decoration: none;
}
</style>
Other CSS Codes ! ୨୧
<style>
/* ★ characters tab background ★ */
.css-i3ef4m {
border-bottom: none; /* this is line at bottom */
background: transparent; /* or any color you want */
}
.css-1jj3srb[aria-selected=true], .css-1jj3srb[data-selected] { /* ★ font color ★ */
color: #FDE8E7;
}
.css-1y3jyt3 { /* ★ to hide the glowy bar ★ */
background: transparent;
box-shadow: none;
}
.css-1jj3srb { /* ★ get rid of "characters" ★ */
font-size: 0px;
}
.css-1jj3srb::after { /* ★ replacement text ★ */
content: "char select";
font-family: 'Press Start 2P';
font-size: 19px;
text-wrap: nowrap; /* makes the text into one line */
}
</style>
╰┈➤ (This code is for changing the star on the bot card!)
<style>
.css-1s5evre>div:nth-child(4) img{
display:none;
}
.css-1s5evre>div:nth-child(4)::after {
content: "emoji here";
font-size: 25px;
color: white;
width: 100%;
text-align: end;
position: absolute;
top: -25px;
left: 20px;
display: inline-block;
}
</style>
╰┈➤ (This code shows the full bot image, and shows tags and description on hover. Credited to Permanent and tigerdropped!)
<style>
/* code by puppy/@permanent, general botcard selector and emoji-only default tags by tigerdropped! */
.css-1s5evre > div:nth-child(4), .css-1s5evre>a:nth-child(2){
display: none;
}
div:has(> .css-1s5evre),
div:has(~ .css-1s5evre) {
background: transparent !important;
}
.css-1s5evre a {
display: flex;
flex-direction: column-reverse;
}
.css-1q7rmf0{
height: 360px;
transition: all 1s ease;
}
.css-199gcrh, .css-4ofde4{
opacity: 0;
height: 0;
transition: all 1s ease;
}
.css-1s5evre:hover .css-1q7rmf0{
height: 200px;
transition: all 1s ease;
}
.css-1s5evre:hover .css-199gcrh, .css-1s5evre:hover .css-4ofde4{
opacity: 1;
height: 100%;
transition: all 3s ease;
}
.css-1ylu7un{
background: transparent;
}
.css-1ylu7un, .css-x2gqu0{
border: 1px solid transparent;
}
.css-1ylu7un::first-letter {
font-size: 12px;
}
.css-1ylu7un {
display: inline-block;
font-size: 0px;
line-height: unset;
}
.css-x2gqu0 {
display: inline-block;
font-size: 0;
line-height: unset;
}
.css-x2gqu0::first-letter {
font-size: 12px;
}
.css-nlxhw4{
height: 0;
z-index: 2;
position: relative;
bottom: 34px;
}
.css-1s5evre{
height: 377px;
}
.css-1s5evre:hover .css-96l1id{
max-height: 80px;
overflow: hidden auto;
}
.css-199gcrh *{
pointer-events: none;
}
.css-1s5evre:hover .css-199gcrh *{
pointer-events: auto;
}
.pp-cc-tags-wrap-custom span{
display: none;
}
.css-123m5uu{
margin-top: 0;
}
.css-k1urot span{
padding: 0;
}
.css-k1urot{
justify-content: center;
}
.css-k1urot{
gap: 0 !important;
}
</style>
╰┈➤ (This code is for a different bot card template! Credits go to Maddieismystar, and credits are needed to use!)
<style>
/* --- TEMPLATE BY @MADDIEISMYSTAR. credits need --- */
/* --- bot card ------------------------ */
/* --- grid layout --- */
.css-m8ywhg + div {
display: flex;
flex-flow: row wrap;
gap: 1.875rem;
justify-content: center; }
/* --- formatting --- */
div:has(> .css-1s5evre) {
transition: all .5s ease;
min-height: 350px;
flex: 0 1 380px; }
.css-1s5evre > a:nth-of-type(2), .css-1s5evre > div:nth-child(4) { display: none; }
.css-1s5evre {
display: grid;
grid-template-columns: 180px auto;
grid-template-rows: auto auto;
gap: 0px 0px;
grid-template-areas:
"image description"
"image tags"; }
.css-1s5evre > a:first-of-type {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end; }
.css-1s5evre > div:has(ul) { grid-area: tags; }
.css-1s5evre > div:nth-child(3) { grid-area: description; }
.css-1s5evre > a:first-of-type { grid-area: image; }
/* --- on hover --- */
div:has(> .css-1s5evre):hover { box-shadow: none; }
div:has(> .css-1s5evre):hover .css-1s5evre > a:first-of-type > div:has(img)::after {
background-position: right;
transition: all .5s ease; }
/* --- background --- */
div:has(~ .css-1s5evre) { background: transparent !important; }
div:has(> .css-1s5evre) {
border: 1px solid #e4a5dd91;
backdrop-filter: blur(5px);
background: #160c259c;
border-top-left-radius: 65px; }
/* --- bot name --- */
.css-1s5evre > a:first-of-type > div:first-of-type {
width: 170px;
z-index: 10;
margin-top: -4rem; }
.css-1s5evre > a:first-of-type > div:first-of-type > div {
letter-spacing: normal;
text-shadow: 0 0 5px #b660c0;
color: #ffe2fc;
line-height: 0.8;
font-size: 1.5rem; }
/* --- bot picture --- */
.css-1s5evre > a:first-of-type > div:has(img) {
transition: all .5s ease;
min-height: 350px;
width: 180px;
border-radius: 65px 0px;
background: radial-gradient(circle, rgba(133, 63, 165, 1) 0%, rgba(39, 21, 79, 1) 0%, rgba(228, 165, 221, 1) 86%);
border: 3px solid transparent; }
.css-1s5evre > a:first-of-type > div:has(img)::after {
transition: all .5s ease;
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(12deg, rgba(133, 63, 165, 1) 0%, rgba(0, 0, 0, 0) 62%, #160C25 99%);
background-position: left;
background-size: 400%; }
/* --- chat count --- */
.css-1s5evre > a:first-of-type > div:nth-of-type(2) {
left: 180px;
right: auto; }
.css-1s5evre > a:first-of-type > div:nth-of-type(2) { color: #ffe2fc !important; }
.css-1s5evre > a:first-of-type > div:nth-of-type(2) div:has(> div > svg) {
display: flex;
height: 35px;
padding: 0px 10px 10px;
border-radius: 5px 5px 0px 5px;
background: #853FA5;
align-items: center; }
/* --- preview --- */
.css-1s5evre > div:nth-child(3) {
display: flex;
justify-content: center;
align-items: center; }
/* --- tags --- */
.css-1s5evre > div:has(ul)::before {
content: "Beware";
width: 100%;
padding-right: 8px;
text-transform: uppercase;
font-weight: bolder;
margin-top: -2.5rem;
font-style: italic;
display: block;
text-align: right;
height: 2rem;
font-size: 1.5rem;
color: #ffe2fc;
background: #853FA5; }
.css-1s5evre > div:has(ul) { align-content: center; }
.css-1s5evre > div:has(ul) > ul {
border-left: 2px solid #853FA5;
position: relative;
padding-left: 10px; }
.css-1s5evre > div:has(ul) > ul li:first-of-type span { font-size: 0; }
.css-1s5evre > div:has(ul) > ul li:first-of-type span::after {
font-style: italic;
font-weight: bolder;
content: 'LIMITLESS TEXT';
font-size: 1rem; }
.css-1s5evre > div:has(ul) > ul span {
background: transparent; }
/* --- tokens --- */
.css-1c9wmts { justify-content: flex-end; }
.css-1c9wmts > p {
color: #ffe2fc;
font-size: 2.5rem;
font-style: italic;
font-weight: bolder;
text-shadow: none;
opacity: 0.5; }
</style>
╰┈➤ (This code is for a flipping bot card. Credit goes to tigerdropped, and credit is needed to use!)
`<style>
/* A simple look for your bot cards that uses the flip card effect! You can change stuff around however you like, but please credit @tigerdropped if you end up using it <3 */
/* Removing all bot card backgrounds */
div:has(> .css-1s5evre),
div:has(~ .css-1s5evre) {
background: transparent !important;
}
/* Removing box shadow */
div:has(> .css-1s5evre):hover {
box-shadow: none;
}
/* Spacing between items */
.css-1s5evre {
gap: 0;
}
/* Card background (front and back) */
.css-1s5evre::before {
position: absolute;
content: "";
inset: 0;
z-index: -2;
background: white;
border-radius: 10px;
transition: all 500ms;
}
/* Adding perspective to .css-1s5evre and its first a element */
.css-1s5evre,
.css-1s5evre > a:first-child {
position: relative;
perspective: 1000px;
}
/* Selecting all elements inside so they can be smoothly animated */
.css-1s5evre * {
transition: all 500ms;
}
.css-1s5evre > a:first-child {
display: flex;
flex-flow: column-reverse nowrap;
}
/* Go button */
.css-1s5evre > a:first-child::after {
position: absolute;
top: 15px;
right: 13px;
padding: 4px 8px;
font-family: Lato;
font-size: 0.8rem;
border-radius: 32px;
border: 2px solid black;
content: "Go to bot →";
color: black;
backface-visibility: hidden;
transform: rotateY(180deg);
transition: all 500ms;
}
.css-1s5evre > a:first-child:hover::after {
background: black;
color: white;
}
/* Bot image container */
.css-1q7rmf0 {
position: relative;
margin: 30px 15px 0 15px;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
transform: rotateY(0);
width: calc(100% - 30px);
aspect-ratio: 1 / 1;
filter: drop-shadow(0 3px 5px #000000BF);
}
/* Stupid thing */
.css-1q7rmf0::before {
display: none;
}
/* Bot image background */
.css-1s5evre::after {
position: absolute;
content: "";
top: 0; left: 0;
border-radius: 10px 10px 0 0;
width: 100%;
height: 110px;
z-index: -1;
background-image: linear-gradient(55deg, #4facfe 0%, #00f2fe 100%);
transition: all 500ms;
}
/* Bot image fixes */
.css-1q7rmf0 img {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
object-position: top;
inset: unset;
}
/* Hiding elements */
.css-1s5evre > a:nth-child(2), /* username */
.css-1s5evre > div:nth-child(4), /* line and star */
.css-1c9wmts, /* token count */
.css-1c9wmts + div /* event related items */ {
display: none;
}
.css-nlxhw4 { /* targets all bot name containers */
width: 100%;
/* You can either keep it on the flow, or use position: absolute to move it anywhere. */
backface-visibility: hidden;
padding: 10px 10px 0 10px;
}
/* All bot names style */
.css-nlxhw4 > div {
color: black;
text-align: center;
font-size: 1rem;
font-family: Lato;
font-weight: bold;
letter-spacing: unset;
text-transform: unset;
text-shadow: unset;
}
/* Tags container */
.css-4ofde4 {
position: absolute;
backface-visibility: hidden;
transform: rotateY(180deg); /* already rotated, hence will be hidden */
pointer-events: none;
position: absolute;
bottom: 0;
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: flex-end;
justify-content: center;
}
.css-4ofde4 a {
pointer-events: auto;
}
/* Tag list container */
.css-k1urot {
margin: 10px;
justify-content: center;
align-items: center;
}
/* Limitless container */
.css-123m5uu {
margin: 0;
flex: 1 1 100%;
}
/* Normal tags container fixes */
.css-1yp4ln {
margin: 0;
}
/* All tags style */
.css-k1urot span {
display: flex;
line-height: 1;
width: 100%;
min-height: unset;
height: auto;
padding: 6px 10px;
border: 0;
border-radius: 32px;
background: black;
font-family: Lato;
color: white;
}
/* All tags hover */
.css-k1urot a:hover span {
border: 0;
background: transparent;
color: black;
}
/* Description box */
.css-199gcrh {
margin: 10px;
padding: 5px 0;
padding-left: 8px;
border-left: 2px solid black;
backface-visibility: hidden;
z-index: 1;
}
/* Description style */
.css-199gcrh * {
color: black !important;
font-family: Lato !important;
font-weight: light;
text-align: justify;
}
/* Chat count */
.css-10cv7r2 {
top: 6px;
right: unset;
width: 100%;
display: flex;
justify-content: center;
backface-visibility: hidden;
}
.css-10cv7r2 > *,
.css-10cv7r2 > * > *,
.css-10cv7r2 > * > * > * {
display: contents;
}
.css-euh5x6 {
color: black;
font-family: Lato;
background: transparent;
}
/* Styling other elements (like the hidden ones) is up to you, decide if you want them to flip or not. */
/* we use the bot card main container selector for our hover effects */
div:hover > .css-1s5evre .css-1q7rmf0,
div:hover > .css-1s5evre .css-nlxhw4,
div:hover > .css-1s5evre .css-199gcrh,
div:hover > .css-1s5evre .css-10cv7r2,
div:hover > .css-1s5evre::before,
div:hover > .css-1s5evre::after {
transform: rotateY(180deg); /* the "front-side" of the card will be hidden after hovering, you can nest more elements using commas. */
}
div:hover > .css-1s5evre::after {
height: 100%;
border-radius: 10px;
}
div:hover > .css-1s5evre .css-4ofde4,
div:hover > .css-1s5evre > a:first-child::after {
transform: rotateY(360deg); /* the back-side will be visible, you can nest as much flipped elements as you want in this selector so they can be shown on hover. */
}
</style>
╰┈➤ To be added !
╰┈➤ To be added !
╰┈➤ To be added !
╰┈➤ To be added !
Templates ! ୨୧
╰┈➤ Here, you can find all of the templates that I will create! This will take some time however, so please do not be upset with me! I'd like to try and make my own templates for people, just because. It doesn't hurt to contribute!
╰┈➤ To be added !
╰┈➤ To be added !
╰┈➤ To be added !
Where To Get More Help/Resources ! ୨୧
╰┈➤ Do you have more ideas for your profile that aren't featured on this rentry! If that is the case, here are a few resources you can use to help you! I tried my best to search for more up-to-date guides, so hopefully these are helpful!
╰┈➤ Crowbirde's CSS Catalogue ! || Crow's profile !
╰┈➤ Oishiis CSS Visual Guide ! || Oishii's profile !
╰┈➤ Ryuunia's Guide ! || ryuunia's profile !
╰┈➤ NullPointerException's Advanced CSS || Null's profile !
╰┈➤Lunaxlee's CSS Collection ! || Luna's profile !
╰┈➤ To be added !
╰┈➤ To be added !
╰┈➤ To be added !