code title range

Status

offline

Posts

27

Likes

7

Bits Credits

0

LEVEL

0

190 XP

Hello, I really liked this forum. I wanted to know how I can put a gif image in front of the group name like the photo.Captura.PNG
 

Status

offline

Posts

27

Likes

7

Bits Credits

0

LEVEL

0

190 XP

can you help me with that code please
 
Liked by:

FateKid

DEVIL DID IT

Status

offline

Posts

14,662

Likes

125,752

Resources

3,373

Bits Credits

363

Admin

LEVEL

11

5,910 XP

can you help me with that code please
Sure thing! It’s easier for me to help you when I have some code to work with.

Do you mind sending me your website address? We can go over the specific groups you’d like to add a gif icon onto.



You can easily add an icon to your groups using some basic css styling. I’ll show you how it’s done.
 
Liked by:

Status

offline

Posts

27

Likes

7

Bits Credits

0

LEVEL

0

190 XP

Sure thing! It’s easier for me to help you when I have some code to work with.

Do you mind sending me your website address? We can go over the specific groups you’d like to add a gif icon onto.



You can easily add an icon to your groups using some basic css styling. I’ll show you how it’s done.
a thousand apologies if this website I have is somewhat simple some things are copies of other forums that I liked http://guiaswow.rf.gd/index.php
I wanted to put it as a vip member, that gif icon in front of the name without adding that effect it has to the gif icon, I don't understand
 

FateKid

DEVIL DID IT

Status

offline

Posts

14,662

Likes

125,752

Resources

3,373

Bits Credits

363

Admin

LEVEL

11

5,910 XP

a thousand apologies if this website I have is somewhat simple some things are copies of other forums that I liked http://guiaswow.rf.gd/index.php
I wanted to put it as a vip member, that gif icon in front of the name without adding that effect it has to the gif icon, I don't understand
I’ll send you the code that’ll add icons before the username of your choice.

Ideally It would be best to create a custom user field that takes an image URL, then applies it to the user accordingly.
 
Liked by:

Status

offline

Posts

27

Likes

7

Bits Credits

0

LEVEL

0

190 XP

I’ll send you the code that’ll add icons before the username of your choice.

Ideally It would be best to create a custom user field that takes an image URL, then applies it to the user accordingly.
ok thanks for your help on the code I hope your shipment
 

FateKid

DEVIL DID IT

Status

offline

Posts

14,662

Likes

125,752

Resources

3,373

Bits Credits

363

Admin

LEVEL

11

5,910 XP

ok thanks for your help on the code I hope your shipment
Here's an example of adding a Font-Awesome star Icon in front of the .username class:

09566fc141d7573604bc688910d9f9ea.png
You can find more icons here: https://fontawesome.com/icons
CSS:
.username::before {
    content: "\f005";
    font-family: 'Font Awesome 5 Pro';
    margin-right: 5px;
    color: orange;
}

It's best to write some Javascript that'll hande this per-user by connecting it to a custom field in your account-details.
 
Liked by:

Status

offline

Posts

27

Likes

7

Bits Credits

0

LEVEL

0

190 XP

Here's an example of adding a Font-Awesome star Icon in front of the .username class:

09566fc141d7573604bc688910d9f9ea.png
You can find more icons here: https://fontawesome.com/icons
CSS:
.username::before {
    content: "\f005";
    font-family: 'Font Awesome 5 Pro';
    margin-right: 5px;
    color: orange;
}

It's best to write some Javascript that'll hande this per-user by connecting it to a custom field in your account-details.
sorry you can also gif esque I see it better gif that is for each separate group sorry if I'm abusing your help but I want a gif as I explained friend sorry
 

FateKid

DEVIL DID IT

Status

offline

Posts

14,662

Likes

125,752

Resources

3,373

Bits Credits

363

Admin

LEVEL

11

5,910 XP

sorry you can also gif esque I see it better gif that is for each separate group sorry if I'm abusing your help but I want a gif as I explained friend sorry
No problem at all! I'll make a quick tutorial post about how I do it.
I'll post the code for both a Font-awesome icon and a gif/image before the username.
 

Status

offline

Posts

27

Likes

7

Bits Credits

0

LEVEL

0

190 XP

No problem at all! I'll make a quick tutorial post about how I do it.
I'll post the code for both a Font-awesome icon and a gif/image before the username.
ok it would be great I will be attentive to your tutorial and thanks
 

Status

offline

Posts

27

Likes

7

Bits Credits

0

LEVEL

0

190 XP

No problem at all! I'll make a quick tutorial post about how I do it.
I'll post the code for both a Font-awesome icon and a gif/image before the username.
please can you let me know when you have the tutorial published thanks
 
Liked by:

FateKid

DEVIL DID IT

Status

offline

Posts

14,662

Likes

125,752

Resources

3,373

Bits Credits

363

Admin

LEVEL

11

5,910 XP

ok it would be great I will be attentive to your tutorial and thanks
Here is the code to place an image/gif in front of your username class. Again, it's wise to do this in your user templates as Javascript per-user selected icon.
It's hard to explain that entire process without either making some changes myself on your website, then explaining the code.

e126b5da064e8040b93499d3bc6690a2.gif

CSS:
/* CUSTOM USERNAME STAR ICON */
.username::before {
    background: url(https://i.gifer.com/ZalX.gif);
    width: 22px;
    height: 22px;
    content: "";
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 4px;
}
 
Liked by:

Status

offline

Posts

27

Likes

7

Bits Credits

0

LEVEL

0

190 XP

Here is the code to place an image/gif in front of your username class. Again, it's wise to do this in your user templates as Javascript per-user selected icon.
It's hard to explain that entire process without either making some changes myself on your website, then explaining the code.

View attachment 13055

CSS:
/* CUSTOM USERNAME STAR ICON */
.username::before {
    background: url(https://i.gifer.com/ZalX.gif);
    width: 22px;
    height: 22px;
    content: "";
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 4px;
}
Yes, it's fine, but how can I do it for a group and not for all the users? I get it for all the users
 
Liked by:

FateKid

DEVIL DID IT

Status

offline

Posts

14,662

Likes

125,752

Resources

3,373

Bits Credits

363

Admin

LEVEL

11

5,910 XP

Yes, it's fine, but how can I do it for a group and not for all the users? I get it for all the users
1. Create a custom user field (dropdown, etc), then create a function within the templates you'd like to affect that takes that custom-field and applies the content of the field-value into that same CSS code.

Again, it's hard to explain without being able to determine how your XenForo templates are managed. Reach out to me directly via PM or chatbox convo and we can talk about getting this handled for you.
 
Liked by:

Latest threads

Forum statistics

Threads
53,864
Messages
83,880
Members
50,460
Latest member
MagicMob
Top Bottom