Articles on: Creator Guides

Code Collection: Profile Card

Profile Card

No gradient for profile card
<style>
.css-1fjbtim {
opacity: 0;
}
</style>


No round corners for profile card
<style>
.css-52az4s {
border-radius: 0px;
}
</style>


Centered pfp, username, and follower count

Credits to Rosewing

<style>
.css-1uodvt1 {
padding-top: 0px;
flex-direction: column;
justify-items: center;
text-align: center;
}
</style>

Example:


Centered Badges

Original code by Rosewing, edited by ursium for the new update.

<style>
.css-hjkukh {
position: relative;
justify-content: center;
/* badge centering */
}
</style>


Follow button

Original code by ursium. New code by weirdykins.

To center it, you can adjust the container that it (+ the options button) are housed in:

<style>
.css-y9k5u7 {
justify-content: center; /* centers the follow and options button */
}
</style>

New code for follow button (includes text customization):

<style>
/* follow btn */
.Btn[data-following='true']:before { /* "followed" button */
position: absolute;
content: "TEXT" !important; /* input your text here */
color: #COLOUR; /* font colour */
border: NUMBERpx STYLE #COLOUR; /* border styling */
border-radius: NUMBERpx; /* how rounded the button is */
background-color: #COLOUR; /* background colour of the button */
font-family: FONT; /* set the font for the button */
}
.Btn[data-following='false']:before { /* "follow" button */
position: absolute;
content: "TEXT" !important; /* input your text here */
color: #COLOUR; /* font colour */
border: NUMBERpx STYLE #COLOUR; /* border styling */
border-radius: NUMBERpx; /* how rounded the button is */
background-color: #COLOUR; /* background colour of the button */
font-family: FONT; /* set the font for the button */
}
.Btn span { /* removes default "follow/followed" text */
visibility: hidden;
}
</style>

Previous Article

Next Article

Return to Code Collection

Code Collection: Bot Card


Updated on: 01/08/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!