• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 How To Add This Customization?

#1
Hi.

I just saw feature in a famous xenforo forum site, they are displaying "STAFF" in right corner of the staff member posts. Did anyone know how to do this?

 

Shelley

Well-known member
#4
Hi.

I just saw feature in a famous xenforo forum site, they are displaying "STAFF" in right corner of the staff member posts. Did anyone know how to do this?

You could try and change to your styling preference just add to EXTRA.CSS template.

Code:
.message.staff  .messageContent:after{
float: right;
content:"STAFF";
font-size: 30px;
padding: 10px;
opacity: 0.3;
}
output is the following:

Screenshot_2.png
 

Shelley

Well-known member
#7
:p

Nice @Shelley, hadn't thought about trying it that way, guess the "Staff" part could be style also.

This is what I have on pixelExit at the moment, clicking the Staff "button" starts a conversation with the Staff member.

View attachment 55105
Nice :) I did play with the staff class once or twice and had something like blizzard had with the avatar glow/image and different message colouring but it was too much work and needed too much support to post if people ran into trouble with it.

Found it. http://xenforo.com/community/thread...moderator-formatting.33331/page-2#post-400955

Might come back to this again at some point and play further with it.

blizzzy.png
 

Steve F

Well-known member
#8
We had to do that exact thing for the firefall game forums. Your right about the support, it would likely be a constant thing to keep up with.
 
Last edited:

Shelley

Well-known member
#9
@OP or anyone interested in placement the following seems to work well if you want an alternative with an image though you'll have to adjust pending on font size you set etc. Haven't tested it in all browsers so unsure if there's any adverse issues.

Code:
.message.staff .messageContent:before {
float: right;
content:"STAFF";
font-size: 16px;
font-family: 'Georgia';
padding: 5px 10px 5px 25px;
background: url("@imagePath/xenforo/icons/admin_markup.png") no-repeat scroll 5px 10px #90d666;
border: 1px solid #6ea84a;
border-radius: 3px;
color: white;
text-shadow: 0 0 3px #54803a;
}
Output is as follows

Screenshot_5.png
 
#12
@OP or anyone interested in placement the following seems to work well if you want an alternative with an image though you'll have to adjust pending on font size you set etc. Haven't tested it in all browsers so unsure if there's any adverse issues.

Code:
.message.staff .messageContent:before {
float: right;
content:"STAFF";
font-size: 16px;
font-family: 'Georgia';
padding: 5px 10px 5px 25px;
background: url("@imagePath/xenforo/icons/admin_markup.png") no-repeat scroll 5px 10px #90d666;
border: 1px solid #6ea84a;
border-radius: 3px;
color: white;
text-shadow: 0 0 3px #54803a;
}
Output is as follows

View attachment 55109
This looks cool...I'm new in xenforo...can you please tell me, where i add these codes?
 
#14
@OP or anyone interested in placement the following seems to work well if you want an alternative with an image though you'll have to adjust pending on font size you set etc. Haven't tested it in all browsers so unsure if there's any adverse issues.

Code:
.message.staff .messageContent:before {
float: right;
content:"STAFF";
font-size: 16px;
font-family: 'Georgia';
padding: 5px 10px 5px 25px;
background: url("@imagePath/xenforo/icons/admin_markup.png") no-repeat scroll 5px 10px #90d666;
border: 1px solid #6ea84a;
border-radius: 3px;
color: white;
text-shadow: 0 0 3px #54803a;
}
Output is as follows

View attachment 55109
Well This look great.. Can you please tell me how to remove that icon in it. And please tell me how to align it to center(because, if we removed the icon, their will be a blank space will come in the icon space like the given below image, so, i need to align the text "staff" to center)..

 

Shelley

Well-known member
#16
To get the following look you'll notice I used padding: 5px 10px; so this might be more suitable for you.


Screenshot_7.png

I used the following

Code:
.message.staff .messageContent:before {
float: right;
content:"STAFF";
font-size: 16px;
font-family: 'Georgia';
padding: 5px 10px;
background-color: #90d666;
border: 1px solid #6ea84a;
border-radius: 3px;
color: white;
text-shadow: 0 0 3px #54803a;
}