1. 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?

Discussion in 'Styling and Customization Questions' started by akhilaniyan, Aug 25, 2013.

  1. akhilaniyan

    akhilaniyan Active Member

    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?

    [​IMG]
     
  2. Tracy Perry

    Tracy Perry Well-Known Member

  3. Steve F

    Steve F Well-Known Member

    That is similar @Tracy Perry but I was actually going to submit a template mod today that does just as the OP is asking or like we have on pixelExit.com, if you have seen it.
     
    Shelley likes this.
  4. Shelley

    Shelley Well-Known Member

    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
     
    akhilaniyan, Tracy Perry and Steve F like this.
  5. Tracy Perry

    Tracy Perry Well-Known Member

    (y)

    And why isn't it in my favorite style I keep buying? ;):whistle:
     
  6. Steve F

    Steve F Well-Known Member

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

    upload_2013-8-25_14-58-54.png
     
    Tracy Perry and Shelley like this.
  7. Shelley

    Shelley Well-Known Member

    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
     
    akhilaniyan likes this.
  8. Steve F

    Steve F Well-Known Member

    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: Aug 25, 2013
    Shelley likes this.
  9. Shelley

    Shelley Well-Known Member

    @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
     
  10. Steve F

    Steve F Well-Known Member

    Nice one Shelley, I just removed what I had on ours and now using yours :p

    No template edits, very cool..
     
    Shelley likes this.
  11. akhilaniyan

    akhilaniyan Active Member

    Please let me know, when your template mod is released...
     
  12. akhilaniyan

    akhilaniyan Active Member

    This looks cool...I'm new in xenforo...can you please tell me, where i add these codes?
     
  13. Jeremy

    Jeremy XenForo Moderator Staff Member

    Put it in EXTRA.css.
     
    akhilaniyan likes this.
  14. akhilaniyan

    akhilaniyan Active Member

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

    [​IMG]
     
  15. Shelley

    Shelley Well-Known Member

    set the padding so it looks like so or adjust to your preference.

    Code:
    padding: 10px;
    
     
    akhilaniyan likes this.
  16. Shelley

    Shelley Well-Known Member

    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;
    }
     
    akhilaniyan likes this.
  17. akhilaniyan

    akhilaniyan Active Member

    Thanks to all especially "Shelley".
     
    Steve F and Shelley like this.

Share This Page