HTML User Rank Button
I was playing around with the help of Gemini and created a user rank button that has a customizable design and will display the current 'rank'.

I can share the coding if others are interested.
I was playing around with the help of Gemini and created a user rank button that has a customizable design and will display the current 'rank'.

I can share the coding if others are interested.
I am looking for this! please share thanks
Mini Profile
<span class="user-rank-badge">
<span class="rank-icon">⛩️</span>
{{ user.rank }}
</span>CSS
/* Styling for a static badge */
.user-rank-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: #2c3e50;
color: #ffffff;
border: 1px solid #555555;
border-radius: 2px;
padding: 4px 12px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.rank-icon {
font-size: 1.1em;
}On May 7, 2026, Daedalus said:
Mini Profile
<span class="user-rank-badge"> <span class="rank-icon">⛩️</span> {{ user.rank }} </span>CSS
/* Styling for a static badge */ .user-rank-badge { display: inline-flex; align-items: center; gap: 6px; background-color: #2c3e50; color: #ffffff; border: 1px solid #555555; border-radius: 2px; padding: 4px 12px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .rank-icon { font-size: 1.1em; }
Where do I paste the CSS?
On Aug 18, 2026, Revolved101 said:
Where do I paste the CSS?
Admin CP → Appearance → Themes → Stylesheet
On Aug 18, 2026, Cory said:
Admin CP → Appearance → Themes → Stylesheet
I can’t see anything to post it into @Cedric I also I can’t share the image of the screenshot it says I must be active members now on the support lol
On Aug 18, 2026, Revolved101 said:
I can’t see anything to post it into @Cedric I also I can’t share the image of the screenshot it says I must be active members now on the support lol
If you’re using the default theme, the CSS should be blank. You can just paste it right into that.
On Aug 19, 2026, Daedalus said:
If you’re using the default theme, the CSS should be blank. You can just paste it right into that.
I am using Retro will that be an issue
No, just scroll down to the bottom of the CSS, hit enter to start a new line and paste the CSS code above.
On Aug 19, 2026, Daedalus said:
No, just scroll down to the bottom of the CSS, hit enter to start a new line and paste the CSS code above.
So Theme Layout or Guest Layout CSS as the Style CSS doesn’t show up can I dm u the screenshot
You would go to Appearance → Themes → Theme Name → Stylesheet
Paste the custom CSS at the bottom of the Retro theme.
On Aug 19, 2026, Daedalus said:
You would go to Appearance → Themes → Theme Name → Stylesheet
Paste the custom CSS at the bottom of the Retro theme.
This all I see on when I click on the Stylesheet like the stylesheet appears for 1 micro sec then disappears then displays this
Retro — style.css Import default CSS Auto-save
Tip: click and hold Save to add a note to this version.
Version history
The last 30 versions are retained (older than 90 days are pruned). Restoring is non-destructive — it creates a new version.
# | Saved | By | Size | Note | Actions |
|---|---|---|---|---|---|
82latest | 1 minute ago | Revolved101 | 1,710,330 bytes | autosave | Preview |
Sounds like something @Cedric may have to look into then.
@Revolved101 which browser are you using? You can also use the front end Theme Studio by clicking your avatar and going to custom css.
I am on Edge and I see Theme editor is that what u mean?
On Aug 19, 2026, Revolved101 said:
I am on Edge and I see Theme editor is that what u mean?
Theme editor is from ForumSpark v1. The newest version uses the Theme Studio.
On Aug 19, 2026, Cedric said:
Theme editor is from ForumSpark v1. The newest version uses the Theme Studio.
So there is no way I can way I use this code this then?
On Aug 19, 2026, Revolved101 said:
So there is no way I can way I use this code this then?
What’s your board? Codes should work on both versions to be honest. It’s just that the ACP and theme editor/studio is different.
On Aug 19, 2026, Cedric said:
What’s your board? Codes should work on both versions to be honest. It’s just that the ACP and theme editor/studio is different.
I can’t message you the forum link getting error on the support here Error 403
You cannot view this
This area is restricted, or you may need to sign in with the right permissions.
and if I post the link here I get this message Links unlock at Basic. New members can post links after participating for a while. Remove the link to post now. But my forum name is ForumRise
Right. I should probably make the trust levels less high on the Support forum. 😅 I’ll take care of that and look into your forum in a little while. Keep you posted.
On Aug 19, 2026, Cedric said:
Right. I should probably make the trust levels less high on the Support forum. 😅 I’ll take care of that and look into your forum in a little while. Keep you posted.
I figured it now lol after a bit of try and error lol
On Aug 19, 2026, Revolved101 said:
I figured it now lol after a bit of try and error lol
Ah great, happy to hear that. Was there something unclear?
On Aug 19, 2026, Cedric said:
Ah great, happy to hear that. Was there something unclear?
So CSS and Mini Profile are found on different tabs on the theme Editor
On Aug 19, 2026, Revolved101 said:
So CSS and Mini Profile are found on different tabs on the theme Editor
I had a look at your site and noticed you are installing v2 themes. While technically at first glance they work, there may be some incomplete fields that will fall back to the v1 default styling. Just want to make sure that you are aware of that. I’m not planning to make sure they work on both versions. But if it works, it works. 😄
On Aug 19, 2026, Cedric said:
I had a look at your site and noticed you are installing v2 themes. While technically at first glance they work, there may be some incomplete fields that will fall back to the v1 default styling. Just want to make sure that you are aware of that. I’m not planning to make sure they work on both versions. But if it works, it works. 😄
Oh will there be a area or section on this site for V1 themes?
On Aug 20, 2026, Revolved101 said:
Oh will there be a area or section on this site for V1 themes?
Sorry, I don’t plan on releasing much V1 themes, and to be blunt, I don’t think anyone else would either. There’s a few in rotation here though: Themes & Extensions