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 |
---|---|
Updated on: 01/08/2025
Thank you!