aloe's css template

this is not a tutorial on css. luna has already created a wonderful guide, and i recommend going there if you'd like a more in-depth look. this is a template for people to work off of. you may need a basic understanding of css to use this. it is pretty barebones, but it should help get you started.

for all of these, replace the words in ALL CAPS with relevant values. such as, a hexcode or rgb code for COLOR, a number for VALUE, an image link for URL, dotted, dashed, OR solid for borders STYLEs. for sections that list a UNIQUEID, you will have to use inspect element to find the classid. for anything that says FONT, make sure you import your own custom font first.

whole page
profile card
bot cards
example profile
credits & notes

whole page

⎗
✓
<style>
/* page elements */
* { /* sets font for the entire page */
    font-family: FONT;
    color: COLOR;
}
a:link, a:visited { /* set color for all links */
    color: COLOR; 
}
a:hover, a:active { /* set color for all links upon hover */
    color: COLOR;
}
.css-0 { /* this value effects multiple elements (borders, tags menu bg, etc). so, i recommend hiding it. */
    background: none !important; 
}
.css-UNIQUEID { /* public characters text. this only changes how public characters looks, NOT the text itself. FIND YOUR ID IN INSPECT ELEMENT! */
    font-family: FONT;
    color: COLOR;
    font-size: VALUEpx;
    text-shadow: VALUEpx VALUEpx COLOR; /* adds a drop shadow to the text. feel free to remove. the VALUEs change the angle and distance. */
    -webkit-text-stroke: VALUEpx COLOR; /* adds an outline around the text. again, feel free to remove. VALUE changes the thickness. */
}
.Btn2-purple:before { /* total characters button */
    transition: none; /* gets rid of the animation */
    background: COLOR; 
}
.Btn2-purple { /*total characters border */
    background: COLOR; 
}
.css-9lg76n { /*total characters text*/
    font-family: FONT;
    color: COLOR; 
}
</style>
<style>
.css-1w58nos { /* tags on the tags menu */
    box-shadow: none !important;
    border: VALUEpx STYLE COLOR !important; /* border thickness, style, and color */
    border-radius: VALUEpx; /* corner rounding */
    background-color: COLOR;
    font-family: FONT; 
    font-size: VALUEpx;
    color: COLOR; /* color of text */
    }
.css-oqdsp6 {  /* tags menu tags once selected. i recommend making the colors different from the above code, for a clearer user experience. */
    box-shadow: none !important;
    border: VALUEpx STYLE COLOR !important;
    border-radius: VALUEpx;
    background-color: COLOR;
    font-family: FONT; 
    font-size: VALUEpx;
    color: COLOR;
    }
.css-1n2in4t, .css-8l42c1 { /* tags menu icon */
    background: COLOR;
    border: VALUEpx STYLE COLOR;
    border-radius: VALUEpx;
    svg {
        fill: COLOR; /* color of the icon */
    }
</style>

⎗
✓
<style>
/* profile card */
.css-1uodvt1 { /* center your pfp, username, and follower count */
    padding-top: 0px;
    flex-direction: column;
    justify-items: center;
    text-align: center;
}
  .css-hsi2ui { /* profile photo */
    height: 250px;
    width: 250px; /* you can change the size and shape of your pfp by adjusting this and the height value */
    border-radius: 10pc; /* makes it a circle. you can play around with other values, use a mask, etc. */
    border: VALUEpx STYLE COLOR;
    box-shadow: none !important; 
}
 .css-UNIQUEID  { /* username. use inspect element to find your class id. */
    font-family: FONT;
    font-size: VALUEpx;
    color: COLOR;
    text-shadow: VALUEpx VALUEpx COLOR; /* adds a drop shadow to the text. feel free to remove. the VALUEs change the angle and distance. */
    -webkit-text-stroke: VALUEpx COLOR; /* adds an outline around the text. again, feel free to remove. VALUE changes the thickness. */
}
.css-UNIQUEID { /* follower count. again, find your unique class id via inspect element */
    font-family: FONT;
    font-size: VALUEpx;
    color: COLOR;
    background: COLOR;
    border: VALUEpx STYLE COLOR;
}
.css-hjkukh { /* event badges. you can take this out if you don't have them! */
    position: relative;
    justify-content: center; /* centers them */
    filter: FILTER; /* look up css filters and you can apply one to them here, to make them match your aesthetic. hue rotate, saturation, etc. */
}
.Btn:before { /* follow button appearance */
    color: COLOR; /* text color */
    background-color: COLOR; /* background color */
    font-family: FONT;
}
.Btn { /* border around the follow button */
    background: COLOR;
} 
.css-y9k5u7 { /* center the follow button */
    justify-content: center; 
}
.css-UNIQUEID { /* the border for your profile card AND public characters, if you've hidden css-0. USE INSPECT ELEMENT! */
    border: VALUEpx STYLE COLOR; /* style the border */
    border-radius: VALUEpx; /* corner rounding */
}
.css-UNIQUEID { /* removing the default gradient on the profile card is also a unique id, afaik. again, inspect element is your friend. */
  background: none;
}
</style>

bot cards

⎗
✓
<style>
/* bots */
.css-1s5evre { /* bot card */
    border: VALUEpx STYLE COLOR; /* if you have hidden css-0, add the border back to your bot card like this */
    border-radius: VALUEpx; /* corner rounding */
    background: COLOR; /* background color of the card. you can also use background-image: and link an image. */
}
.css-1ifv49 { /* bot names */
    justify-content: center; /* centers it */
    font-family: FONT;
    font-size: VALUEpx;
    color: COLOR; 
}
.css-wexxj8 { /* ribbon for chat counts */
    background: COLOR !important;
}
.css-1lgnt2x { /* the line that divides the bio from the tags */
    border-top: VALUEpx STYLE COLOR; /* you know the drill by now... */
    width: 80%; /* make the line longer or shorter */
}
img.css-19ihot3 { /* replacing the star with something else */
  position: absolute;
  right: -VALUEpx;
  top: -VALUEpx; /* you will have to adjust these values depending on the image you choose, in order for it to be positioned properly. fiddle with it until you like the result. */
  content: url("URL"); /* place a link to the image / pixel / whatever that you want here */
}
.css-x2gqu0 { /* bot card tags */
    border: VALUEpx STYLE COLOR; 
    border-radius: VALUEpx; /* corner rounding */
    background: COLOR; /* background color */
    font-family: FONT; 
    color: COLOR; /* text color */
    box-shadow: none !important; /* makes the default shadow go away */
}
.css-x2gqu0:hover, .css-x2gqu0[data-hover] { /* bot card tags while being hovered */
    border: VALUEpx STYLE COLOR; 
    background: COLOR;
    transform: scale(1.1); /* enlarges it on hover */
}
.css-1ylu7un { /* the limitless tag */
    border: VALUEpx STYLE COLOR; 
    border-radius: VALUEpx; /* corner rounding */
    background: COLOR; /* background color */
    font-family: FONT; 
    color: COLOR; /* text color */
}
</style>

example profile

this is an example profile made using this template! prev overall profile

tgs tags menu

credits & notes

this template would not have been possible without other people sharing their code, answering questions, and just being helpful overall. thank you to ikyokeye, maddieismystar, iorveths, and rosewing for sharing their code, & to lunaxlee for compiling it into the original guide.

again, this is simply a template. there's always more you can add, different ways of doing things, etc. if you have questions about this template, or css in general, you can reach me via discord (@dormirmir). either dm or ping me!