Profile Page

Page Overlay/Filter

Credits to Ikyokeye

<div class="overlay-gif"></div>
<style>
.overlay-gif {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('LINK');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
z-index: 2;
pointer-events: none;
opacity: OPACITY;
}
</style>

Replace

 LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make use of file hosting sites like imgur to upload your image and to get a link.

Replace OPACITY with 0 (invisible), 1 (visible, won't show what's behind the gif), or any number between 0.1 to 0.9 (semi-transparent).

Changing the Star for the Footer

Credits to Maddieismystar

img.chakra-image.css-0 {
content: url("IMAGE URL"); /* .css-0 will affect the background on mobile most likely */ }

Replace

 LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make use of file hosting sites like imgur to upload your image and to get a link.

Example:

Adding a Page Doll for the Profile Page

NOTE: This on default puts the page doll at the bottom right of the page. Property change options for positioning are listed. Ways to make the page doll only show on mobile and putting more than one page doll is also listed.''

<div class="page-doll">
<img src="IMAGE LINK" alt="Page Doll">
</div>

<style>
/* Page doll coding */
.page-doll {
position: fixed;
bottom: 10px; /* For positioning. Adjust as needed. Can change 'bottom' to 'top' */
right: 10px; /* For positioning. Adjust as needed. Can change 'right' to 'left' */
z-index: 1000;
}
.page-doll img {
width: --px; /* Change -- to the size you want the page doll to be*/
height: auto;
cursor: pointer;
}
</style>

If you want to add an additional page doll, you can duplicate the style code but make the class ID different (as well as the positioning). Here is an example:

<div class="page-doll">
<img src="IMAGE LINK" alt="Page Doll">
</div>
<div class="page-doll-2">
<img src="IMAGE LINK 2" alt="Page Doll">
</div>
<style>
/* Page doll coding */
(Insert code for .page-doll )
.page-doll-2 {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
}
.page-doll-2 img {
width: --px;
height: auto;
cursor: pointer;
}
<style>

If you want the page-doll to ONLY show on pc browser pages, and not on mobile, you can add this:

@media (max-width: 600px) {
.page-doll {
display: none;
}
}

If you have more than one page-dolls:

@media (max-width: 600px) {
.page-doll, .page-doll-2 {
display: none;
}
}

Total Characters

Written by Ursium. Similar to the follow button, the total characters count is made up of two 'buttons.' The process for customizing it also the same.

<style>
.Btn2-purple:before {
transition: none; /* gets rid of the animation on it */
background: COLOR; /*total chars background color */}
.Btn2-purple {
background: COLOR; /*total chars border */}
.css-9lg76n {
font-family: 'FONT';
color: COLOR; /*total characters text*/}
</style>

For FONT, refer to the fonts section here.

As always, COLOR is to be replaced with the name, hexcode, or rgb/rba of your chosen color.

Tags menu

Written by Ursium You can customize the tags menu that users filter your bots in a few different steps.

Note: replace the words in all caps with your own values such as: hexcodes for COLOR, numbers for VALUE, border styles (solid, dashed, dotted) for STYLE.

First, the button to access the menu:

<style>
.css-1n2in4t, .css-8l42c1 { /* tag menu button */
background: COLOR;
border: VALUEpx STYLE COLOR;
border-radius: VALUEpx; /* corner rounding */
svg {
fill: COLOR; /* color of the tag icon */
}
}
</style>

For FONT, refer to the fonts section here.

As always, COLOR is to be replaced with the name, hexcode, or rgb/rba of your chosen color.

Next, how the tags appear on the menu. Please note that if you have set a new color to css-0, it will effect the background of the tags menu. Here is the code for customizing the tags:

<style>
.css-1w58nos {
box-shadow: none !important; /* this will remove the default shadow. you could replace it with a new one if thats the style you like */
border: VALUEpx STYLE COLOR !important; /* border styling */
border-radius: VALUEpx; /* corner rounding */
background-color: transparent;
font-family: FONT; /* change the font of the tags */
font-size: VALUEpx;
color: COLOR /* color of text */
}
</style>

Last, you can customize how the tags appear once selected.

<style>
.css-oqdsp6 {
box-shadow: none !important;
border: VALUEpx STYLE COLOR !important;
border-radius: VALUEpx;
background-color: COLOR;
font-family: FONT;
font-size: VALUEpx;
color: COLOR;
}
</style>

```

Updated on: 01/08/2025