10+ Years username effects suggestion

[onecore]

Sup Arzeeee!

Just a suggestion that maybe you guys can give some badge or effects for users that has 10 or more years here in Ragezone? like Custom Name Colors: Changing the username color to gold, platinum, or a special color (e.g., violet) to make it stand out from new users.
Specialized Icons/Badges: A badge (e.g., a "10" badge, a star, or a medal icon) placed next to the username.
Distinguished Profile Flair: A special banner or frame around the profile picture?

 

[RageDeveloper]

up for this.

 

[master_unknown]

What about the 20yr one?

 

[RageDeveloper]

What about the 20yr one?

10yrs is Good sir.

 

[~Luca~]

I'd say 15 years.

 

[onecore]

why not just show the total years, starts from 10? XD

 

[RageDeveloper]

yes you're right

 

[MentaL]

Right, I think I'm going to add the ten year colour tag. Feel free to post some css styles and images to show me the visual, assuming you guys know how

 

[RageDeveloper]

• Gold or Bronze: A classic choice for "Golden" anniversaries. Use HEX codes like #D4AF37 (Gold) or #CD7F32 (Bronze).
• Deep Royal Purple: Represents wisdom and status (#6A0DAD).
• Text Shadow/Glow: Add a subtle glow using CSS to make the name stand out on the forum home page.
  • Example CSS: text-shadow: 0px 0px 5px #FFD700; font-weight: bold;
• Classic Titles: "Decade Member," "10-Year Veteran," or "Forum Elder".
• Thematic Titles:
  • Military: "Centurion," "General," or "Commander".
  • Fantasy: "Sovereign," "Archon," or "Ancient".
  • Professional: "Master Member" or "Expert Member
• Laurel Wreaths: A gold laurel wreath surrounding the number "10" is a universal symbol for achievement and long-term milestones.
• Shields & Medals: Use a "Gold Medal" icon or a "10-Year Shield" badge.
• Milestone Icons: Simple icons like stars or crowns that increase in complexity as the years go by.
• Badge Size: Aim for small, clear designs (typically 32x32 pixels) so they remain visible at small sizes in message bars

 

[MentaL]

• Gold or Bronze: A classic choice for "Golden" anniversaries. Use HEX codes like #D4AF37 (Gold) or #CD7F32 (Bronze).
• Deep Royal Purple: Represents wisdom and status (#6A0DAD).
• Text Shadow/Glow: Add a subtle glow using CSS to make the name stand out on the forum home page.
  • Example CSS: text-shadow: 0px 0px 5px #FFD700; font-weight: bold;
• Classic Titles: "Decade Member," "10-Year Veteran," or "Forum Elder".
• Thematic Titles:
  • Military: "Centurion," "General," or "Commander".
  • Fantasy: "Sovereign," "Archon," or "Ancient".
  • Professional: "Master Member" or "Expert Member
• Laurel Wreaths: A gold laurel wreath surrounding the number "10" is a universal symbol for achievement and long-term milestones.
• Shields & Medals: Use a "Gold Medal" icon or a "10-Year Shield" badge.
• Milestone Icons: Simple icons like stars or crowns that increase in complexity as the years go by.
• Badge Size: Aim for small, clear designs (typically 32x32 pixels) so they remain visible at small sizes in message bars

You don't need gpt, just element editor via browser.

 

[RageDeveloper]

You don't need gpt, just element editor via browser.

Ok boss il try it

Here is sample sir. But i cant change the picture sorry. Its only an example sir.

 

[onecore]

"10 years member" or "member since XXXX" but that one is good enough

 

[RageDeveloper]

"10 years member" or "member since XXXX" but that one is good enough

Sample like this

 

[AaronzitoBr]

a 15+ years update for the 10 years :3 then 20 years

 

[onecore]

Sample like this

the badge is good, we should also get those username effects if mental approves haha

 

[MentaL]

Ok boss il try it

Here is sample sir. But i cant change the picture sorry. Its only an example sir.

Could have posted the css though for me to copy/paste

 

[RageDeveloper]

Could have posted the css though for me to copy/paste

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile Card</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #1c1c1c;
}

/* Container */
.profile-card {
display: flex;
align-items: center;
gap: 20px;
padding: 30px;
background: radial-gradient(circle, #2a2a2a, #111);
border: 2px solid #555;
color: white;
}

/* Avatar */
.avatar {
width: 120px;
height: 120px;
border: 3px solid #666;
box-shadow: 0 0 10px black;
}

.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Content */
.content {
display: flex;
flex-direction: column;
gap: 15px;
}

/* Username */
.username {
font-size: 48px;
font-weight: bold;
color: #7ecbff;
text-shadow: 0 0 10px #4fc3ff, 0 0 20px #4fc3ff;
}

/* Badges row */
.badges {
display: flex;
gap: 15px;
}

/* Base badge */
.badge {
padding: 12px 25px;
border-radius: 15px;
font-size: 24px;
border: 2px solid;
box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
}

/* Gold badge */
.gold {
background: linear-gradient(#3a2b00, #1a1200);
border-color: gold;
color: #e6c15a;
}

/* Blue lightning badge */
.blue {
background: linear-gradient(#1e3c72, #2a5298);
border-color: #6ec6ff;
color: #fff;
}

/* Skill badge */
.skill {
background: #2c3e50;
border-color: gold;
color: #f1c40f;
}

/* Member badge */
.member {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(#222, #000);
border: 2px solid #555;
border-radius: 15px;
padding: 15px 25px;
font-size: 28px;
}

.member-icon {
font-size: 28px;
}
</style>
</head>

<body>

<div class="profile-card">

<div class="avatar">
<img src="avatar.jpg" alt="avatar">
</div>

<div class="content">
<div class="username">RageX</div>

<div class="badges">
<div class="badge gold">10 Years</div>
<div class="badge blue">Loyal</div>
<div class="badge skill">Skill Dev</div>
</div>

<div class="member">
<span class="member-icon"></span>
Silver Member
</div>
</div>

</div>

</body>
</html>

Heres my final layout sir.

Css :


/* GLOBAL */
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: #0d0d0d;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* MAIN CARD */
.profile-card {
display: flex;
align-items: center;
gap: 30px;
padding: 40px 60px;

background:
radial-gradient(circle at center, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(#1a1a1a, #000);

background-size: 20px 20px, 100% 100%;

border: 2px solid rgba(255,255,255,0.15);
border-radius: 16px;

box-shadow:
inset 0 0 60px rgba(0,0,0,0.9),
0 0 40px rgba(0,0,0,0.8);
}

/* AVATAR */
.avatar {
width: 140px;
height: 140px;
border-radius: 50%;
border: 4px solid #888;

box-shadow:
0 0 15px #000,
inset 0 0 15px rgba(255,255,255,0.15);

overflow: hidden;
}

.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* CONTENT */
.content {
display: flex;
flex-direction: column;
gap: 20px;
}

/* USERNAME */
.username {
font-size: 64px;
font-weight: 800;
color: #6ec6ff;

text-shadow:
0 0 8px #6ec6ff,
0 0 20px #3aa0ff,
0 0 40px rgba(58,160,255,0.9);

letter-spacing: 2px;
}

/* BADGES */
.badges {
display: flex;
gap: 20px;
flex-wrap: wrap;
}

/* BASE BADGE */
.badge {
padding: 14px 26px;
font-size: 26px;
border-radius: 18px;
border: 2px solid;
position: relative;

box-shadow:
inset 0 0 12px rgba(0,0,0,0.8),
0 0 10px rgba(0,0,0,0.6);

transition: 0.2s ease;
}

/* GOLD */
.gold {
background: linear-gradient(180deg, #4a3a10, #120c00);
border-color: #d4af37;
color: #f1d27a;

box-shadow:
0 0 12px rgba(212,175,55,0.6),
inset 0 0 10px rgba(0,0,0,0.9);
}

/* BLUE */
.blue {
color: white;
border-color: #6ec6ff;

background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),

background-size: cover;

box-shadow:
0 0 14px rgba(110,198,255,0.8);
}

/* SKILL (UPDATED FOR LONG TEXT) */
.skill {
background: linear-gradient(#2c3e50, #1c2833);
border-color: #d4af37;
color: #ffd54f;

font-size: 18px;
padding: 12px 18px;
white-space: nowrap;

box-shadow:
0 0 12px rgba(255,215,64,0.6);
}

/* MEMBER */
.member {
display: inline-flex;
align-items: center;
gap: 12px;

padding: 18px 30px;
font-size: 30px;

border-radius: 16px;
border: 2px solid #444;

background: linear-gradient(#1a1a1a, #000);

box-shadow:
inset 0 0 20px rgba(0,0,0,0.9),
0 0 15px rgba(0,0,0,0.8);
}

/* ICON */
.member-icon {
font-size: 32px;
color: #c0c0c0;
}

/* HOVER */
.badge:hover {
transform: scale(1.08);
}

 

[onecore]

thanks Mr. Mental

 

[RageDeveloper]

thanks Mr. Mental

Why only you

Oh ok i will wait 1 more year.

 

[onecore]

ohhh ya just notice XD haha maybe you can ask Mr Mental if he can excempt youu