1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

User Status Ribbons (based on Usergroups)

Discussion in 'Template Modifications [Archive]' started by Jaxel, Feb 4, 2011.

  1. Jaxel

    Jaxel Well-Known Member

    This is an alteration of the design CyberAP came up with here:
    http://xenforo.com/community/threads/show-user-is-online.8236/

    Untitled-1.png

    I wanted to use his ribbon design, but I didn't want to use it for users online or anything like that. So I came up with a new design that not only looks similar, but also supports a user having multiple ribbons...

    ADD TO EXTRA.css
    Code:
    .ribbon { font-size: 10px; font-weight: bold; margin: -5px -5px -2px; text-align: center; }
    .ribbon li
    {
    	border-radius: 3px;
    	border-top-right-radius: 0px;
    	border-top-left-radius: 0px;
    	box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
    	padding: 1px;
    	position: relative;
    	margin-bottom: 5px;
    }
    .ribbon li:last-child { margin-bottom: 0px; }
    .ribbon li div { position: absolute; top: -4px; width: 4px; height: 4px; }
    .ribbon li .right { border-top-right-radius: 3px; right: -1px; }
    .ribbon li .left { border-top-left-radius: 3px; left: -1px; }
    
    .ribbonStaff
    {
    	background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    	border: 1px solid @primaryLight;
    	color: @contentBackground;
    }
    .ribbonStaff div { background-color: @primaryLight;  }
    ADD TO message_user_info ABOVE <xen:if is="!{$isQuickReply}">
    Code:
    <xen:if hascontent="true">
    	<ul class="ribbon">
    		<xen:contentcheck>
    			<xen:if is="{xen:helper ismemberof, $user, 4}">
    				<li class="ribbonStaff">
    					<div class="left"></div>
    					<div class="right"></div>
    					Staff / Moderator
    				</li>
    			</xen:if>
    		</xen:contentcheck>
    	</ul>
    </xen:if>
    This is just the beginning... a primer to start. Simple, if a user is in the "Moderator" usergroup (group #4 on my forum), it will add a Staff / Moderator ribbon underneath their avatar. In the next post, I will go into how to expand on this and add additional ribbons.
     
    CC97, KC2T, kkm323 and 48 others like this.
  2. Jaxel

    Jaxel Well-Known Member

    On my forums, in addition to the "Staff / Moderator" ribbon, I also have a ribbon showing when a user is a "Premium Supporter". For me, these are users who are in the usergroup with an ID of 5. In order to do something like this, you simply need to add new rules to your templates...

    ADD TO EXTRA.css
    Code:
    .ribbonPremium
    {
    background: #e68c17 url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    border: 1px solid #e68c17;
    color: #000000;
    }
    .ribbonPremium div { background-color: #e68c17; }
    ADD TO message_user_info WITHIN THE CONTENT CHECK
    Code:
     <xen:if is="{xen:helper ismemberof, $user, 5}">
    <li class="ribbonPremium">
    <div class="left"></div>
    <div class="right"></div>
    Premium Supporter
    </li>
    </xen:if>
    The final version of the ribbon in message_user_info should look like this:
    Code:
    <xen:if hascontent="true">
    <ul class="ribbon">
    <xen:contentcheck>
    <xen:if is="{xen:helper ismemberof, $user, 4}">
    <li class="ribbonStaff">
    <div class="left"></div>
    <div class="right"></div>
    Staff / Moderator
    </li>
    </xen:if>
    <xen:if is="{xen:helper ismemberof, $user, 5}">
    <li class="ribbonPremium">
    <div class="left"></div>
    <div class="right"></div>
    Premium Supporter
    </li>
    </xen:if>
    </xen:contentcheck>
    </ul>
    </xen:if>
    You can add as many additional rules as you wish; by anything that is determinable from $user information. For instance if instead of <xen:if is="{xen:helper ismemberof, $user, 5}"> you wanted to instead do <xen:if is="{$user.username} = 'Jaxel'"> that should work perfectly fine.
     
    KC2T, kkm323, Daniel 'RTRD' and 15 others like this.
  3. bogus

    bogus Guest

    Hi. Can i ask why you are using
    <div class="left"></div>
    <div class="right"></div>
    instead of center?
    Its just for my understanding.
     
  4. Jaxel

    Jaxel Well-Known Member

    Those are classes, they define the wrap around curve on the left and right.
     
  5. bogus

    bogus Guest

    Ah.. ok thanks
     
  6. anotheralias

    anotheralias Well-Known Member

    Very cool, thanks!

    Do I need to put the "display styling priority" setting on something specific for these to show up?
     
  7. Peggy

    Peggy Well-Known Member

    Very nice Mod Jaxel.
     
  8. steven s

    steven s Well-Known Member

    That is going to come in handy once people find my forum.
    Thanks!
     
  9. gmaister22

    gmaister22 Active Member

    Yup nice one!
    (now i just need to figure out how to show if the user is online or offline, cause i cant use 3 ribbons :( )
     
  10. Wuebit

    Wuebit Well-Known Member

    Change the
    Code:
    .ribbon { font-size: 10px; font-weight: bold; margin: -5px -5px -2px ; text-align: center; }
    
    To
    Code:
    .ribbon { font-size: 10px; font-weight: bold; margin: 8px -5px -2px ; text-align: center; }
    
    Works for me anyway :3
     
  11. James

    James Well-Known Member

    Have you considered using :before and :after pseudo classes? Or would that not work...

    I haven't played with pseudo classes in this way before.
     
  12. PET

    PET Member

    Hello,

    great mod... however. I want to add a specific ribbon to some specific users. No usergrup. Just 1 or 2 particular users.
    The first post says:
    <xen:if is="{$user.username = 'Jaxel'">

    However this is not working. I tought it's because of the } that is not closing.But still, that's not the problem. Any suggestions?

    How should that code look for 1 user. Let's call him Jaxel. And how should the code look gor 2 users?

    Thanks


    P.S. This is the error I'm getting:

    Code:
    The following templates contained errors and were not saved: message_user_info: 1)    Line 30: Template syntax error.
     
  13. Jaxel

    Jaxel Well-Known Member

    Code:
    <xen:if is="{$user.username} = 'Jaxel'">
     
  14. James

    James Well-Known Member

    Did you try:
    Code:
    <xen:if is="{$user.username} = 'Jaxel'">
    Ninja'd.

    If these users are all having the same ribbon, you might want to try using in_array to save on your if conditionals.
     
    quochung_uit likes this.
  15. PET

    PET Member

    Code:
    <xen:if is="{$user.username} = 'Jaxel'">
        <li class="ribbonAlienInvasion">
        <div class="left"></div>
        <div class="right"></div>
            Alien Invasion
        </li>
    </xen:if>
    I tried this. I still get the same error message. What am I doing wrong?

    P.S. Also how should the code look if I want to add the same ribbon to several users. I don't want to copy the same thing over and over.

    Thanks
     
    quochung_uit likes this.
  16. James

    James Well-Known Member

    Code:
    <xen:if is="{$user.username} == 'Jaxel'">
    Try that.. I can't remember if the XF template syntax uses 1 or 2 equals signs for comparisons...
     
    infinite.loop likes this.
  17. James

    James Well-Known Member

    As for your in_array question, you want something like:
    Code:
    <xen:if is="in_array({$user.user_id}, array(X,Y,Z))">
        <li class="ribbonAlienInvasion">
            <div class="left"></div>
            <div class="right"></div>
            Alien Invasion
        </li>
    </xen:if>
    
    Replace X,Y,Z with a comma-separated list of the user IDs of the users you want to have this ribbon.
     
    quochung_uit likes this.
  18. PET

    PET Member

    Yea it works with ==.

    Going to also try the array thing.

    EDIT: It seems that the array thing is also working.

    CSS question.

    On the ribbon I made the text to have a link. Now the color of the text in the ribbon get's overwritten by the color of the link. Any ideas on how to stop this?
     
  19. gldtn

    gldtn Well-Known Member

    How can I use this based on trophy user titles? and remove the extra(default) user title?

    Also, how can I do an elseif on xenforo? I wanted to do something like:
    Code:
    <!-- Ribbon -->
    <xen:if hascontent="true">
        <ul class="ribbon">
            <xen:contentcheck>
                <xen:if is="{xen:helper ismemberof, $user, 4}">
                    <li class="ribbonStaff">
                        <div class="left"></div>
                        <div class="right"></div>
                        Staff / Moderator
                    </li>
          <xen:elseif is="{xen:helper ismemberof, $user, 3}">
                    <li class="ribbonStaff">
                        <div class="left"></div>
                        <div class="right"></div>
                        Staff / Administrator
                    </li>
          </xen:if>
            </xen:contentcheck>
        </ul>
    </xen:if>
    <!-- /Ribbon -->
     
  20. dutchbb

    dutchbb Well-Known Member

    This is the nicest implementation of user ranks for XenForo I've seen so far, it looks good, takes up little space, and also no images :)

    One problem though, the ribbons also show at the avatar next to the quick reply...

    Another thing I'd like to know is why you use

    <xen:if is="{xen:helper ismemberof, $user, 4}">

    instead of

    <xen:if is="{$user.user_group_id} == 4">

    Is there a difference?
     

Share This Page