Back to feed
ForumSpark Support Customization Help Join

HTML User Rank Button

Daedalus · 5 months ago · 25 replies · 288

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.

25 replies
R
Revolved101 · 5 months ago

I am looking for this! please share thanks

Daedalus OP · 5 months ago

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;
}

R
Revolved101 · 2 months ago

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?

Cory · 2 months ago

On Aug 18, 2026, Revolved101 said:

Where do I paste the CSS?

Admin CP → Appearance → Themes → Stylesheet

R
Revolved101 · 2 months ago

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

Daedalus OP · 2 months ago

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.

R
Revolved101 · 2 months ago

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

Daedalus OP · 2 months ago

No, just scroll down to the bottom of the CSS, hit enter to start a new line and paste the CSS code above.

R
Revolved101 · 2 months ago

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

Daedalus OP · 2 months ago

You would go to Appearance → Themes → Theme Name → Stylesheet

Paste the custom CSS at the bottom of the Retro theme.

R
Revolved101 · 2 months ago

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

Daedalus OP · 2 months ago

Sounds like something @Cedric may have to look into then.

Cedric · 2 months ago

@Revolved101 which browser are you using? You can also use the front end Theme Studio by clicking your avatar and going to custom css.

R
Revolved101 · 2 months ago

I am on Edge and I see Theme editor is that what u mean?

Cedric · 2 months ago

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.

R
Revolved101 · 2 months ago

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?

Cedric · 2 months ago

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.

R
Revolved101 · 2 months ago

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



Cedric · 2 months ago

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.

R
Revolved101 · 2 months ago

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

Cedric · 2 months ago

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?

R
Revolved101 · 2 months ago

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

Cedric · 2 months ago

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. 😄

R
Revolved101 · 2 months ago

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?

Cedric · 2 months ago

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

Create a free account to join the conversation.
Sign up free
ForumSpark © 2023 - 2026 · ForumSpark.net · Terms