Rank images for Donors and Buyers

[glennrocksvb]

As you may have noticed, I added a Donor icon and Buyer icon below the avatar in the postbit area for those who donated to me and bought my mods.

(Certified Buyer) - Those who bought at least one paid mod here.

Benefits:

1. Can have 50 PMs
2. Can have custom user title
3. Can attach up to 5 attachments
4. Can edit own post anytime

$ (Generous Donor) - Those who donated or bought me coffee.

Benefits:

1. Can have 50 PMs
2. Can have custom user title
3. Can attach up to 5 attachments
4. Can edit own post anytime

I may add more ranks and benefits in the future.

For regular users, I have dropped max PM count to be 10 and the number of attachments to 3 and edit time limit to 1 hour.

If you have donated or bought a mod here and you don't see those rank images under your name, please inform me and I will add you to the group for you to enjoy the benefits.

[chocodz]

well i just donated twice but i am poor

[voyger]

no complain i

bought a mod and donated for a code just got one badge LOL

Transaction ID: 0HX05921CW358283N Glenn Vergara accepted your payment

[pomelosky]

vBMods That Rock!

Downloads for Order 91522

Can I get a badge?

[emo]

Where is my badge? I bought 4 mods

[Xipil]

1 mod, 1 donation here.

[Deadpool]

Hello Glen,
do you also have this function available to purchase as a MOD?
Thank you

[glennrocksvb]

This is not a mod. This is just the Ranks based on usergroups.

[Deadpool]

yes, I also meant that it looks like yours

[glennrocksvb]

Ahh, the icons itself. Those are just pure CSS icons without using images. They can be used anywhere not just in Ranks. Do you want to also use them in Ranks or in other places?

[Deadpool]

Hello, I have now created a few additional buttons, unfortunately they are on the stars, how do I put the space back in? or how it is with you beneath the stars
by the way, the one in the red button should be a car
Thank you

<span class="custom-rank-container donor-badge" title="Donator"><span class="bankNote filled">$</span></span>
<span class="custom-rank-container buyer-badge" title="Buyer"><span class="cartFilled"><i></i></span></span>
<span class="custom-rank-container vip-badge" title="VIP"><span class="vip"><i></i></span></span>
<span class="custom-rank-container mirrorserver-badge" title="mirrorserver"><span class="mirrorserver"><i></i></span></span>

/* Gemeinsame Stile für alle Badges */
.custom-rank-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
    position: relative;
    margin-left: 7px;
    vertical-align: middle;
}

/* Icon "Donator" - START */
.custom-rank-container.donor-badge {
    border: 1px solid #4d9900;
    background: linear-gradient(to bottom, #d2ff52 0%, #a1d54f 50%, #80c217 100%, #7cbc0a 100%);
}
.bankNote.filled {
    border-color: #008000;
    background-color: #008000;
    color: #fff;
}
.bankNote {
    position: absolute;
    display: inline-block;
    width: 15px;
    height: 8px;
    border: solid 1px #333;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 8px;
    color: #333;
    line-height: 10px;
    text-align: center;
    left: 50%;
    margin-left: -8.5px;
    top: 50%;
    margin-top: -4px;
}
.bankNote:before, .bankNote:after {
    content: '';
    position: absolute;
    display: block;
    background-color: #333;
}
.bankNote:before {
    left: 1px;
    top: -3px;
    width: 13px;
    height: 1px;
}
.bankNote:after {
    left: 3px;
    top: -5px;
    width: 9px;
    height: 1px;
}
/* Icon "Donator" - END */

/* Icon "Buyer" - START */
.custom-rank-container.buyer-badge {
    border: 1px solid #998200;
    background: linear-gradient(to bottom, #fceabb 0%, #fccd4d 50%, #f8b500 100%, #fbdf93 100%);
}
.cartFilled {
    width: 7px;
    height: 0;
    border-left: solid 3px transparent;
    border-right: solid 3px transparent;
    border-top: solid 7px #333;
    position: absolute;
    left: 50%;
    margin-left: -6.5px;
    top: 50%;
    margin-top: -4px;
}
.cartFilled:before, .cartFilled:after {
    content: '';
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #333;
    top: 1px;
}
.cartFilled:before {
    left: -2px;
}
.cartFilled:after {
    left: 5px;
}
.cartFilled i {
    width: 3px;
    height: 1px;
    background-color: #333;
    top: -10px;
    left: 10px;
    position: absolute;
    display: block;
}
.cartFilled i:before {
    content: '';
    position: absolute;
    display: block;
    height: 4px;
    width: 1px;
    background-color: #333;
    transform-origin: left top;
    transform: rotate(21deg);
}
/* Icon "Buyer" - END */

/* Icon "VIP" - START */
.custom-rank-container.vip-badge {
    border: 1px solid #998200;
    background: linear-gradient(to bottom, #eabbfc 0%, #764dfc 50%, #3900f8 100%, #ab93fb 100%);
}
.vip {
    font-size: 14px;
    font-weight: bold;
    color: gold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* Icon "VIP" - END */

/* Icon "mirrorserver" - START */
.custom-rank-container.mirrorserver-badge {
    border: 1px solid #998200;
    background: linear-gradient(to bottom, #fcabba 0%, #fc4d4d 50%, #f80000 100%, #fb9393 100%);
}
.mirrorserver {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 10px;
    background-color: black;
    border-radius: 3px;
}
.mirrorserver:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 5px;
    background-color: black;
    border-radius: 3px 3px 0 0;
    top: -5px;
    left: 4px;
}
.mirrorserver:after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: gray;
    border-radius: 50%;
    bottom: -2px;
    left: 2px;
    box-shadow: 10px 0 gray;
}
/* Icon "mirrorserver" - END */​

[glennrocksvb]

I have now created a few additional buttons, unfortunately they are on the stars, how do I put the space back in?

I need to see the page to be able to inspect it and suggest a solution.

how it is with you beneath the stars

I am using vB5 and they changed it in vB6.

by the way, the one in the red button should be a car

You can use emoji instead of doing the icons using pure CSS. That would minimize the needed CSS.

[glennrocksvb]

I have now created a few additional buttons, unfortunately they are on the stars, how do I put the space back in?

Add this custom CSS code in css_additional.css template:

.b-userinfo__rank .custom-rank-container ~ .fa-star {
    margin-top: 15px;
}

Adjust the top margin value as desired.

[Deadpool]

Hello Glenn, thank you very much for your help!

I bought you coffee!

[glennrocksvb]

Hello Glenn, thank you very much for your help!

I bought you coffee!

Thanks!


You've earned your Donor badge