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

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

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.
 
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.
 
Hi. Can i ask why you are using
<div class="left"></div>
<div class="right"></div>
instead of center?
Its just for my understanding.
 
bogus said:
Hi. Can i ask why you are using
<div class="left"></div>
<div class="right"></div>
instead of center?
Its just for my understanding.
Click to expand...
Those are classes, they define the wrap around curve on the left and right.
 
Very cool, thanks!

Do I need to put the "display styling priority" setting on something specific for these to show up?
 
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 :( )
 
gmaister22 said:
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 :( )
Click to expand...

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
 
Jaxel said:
Those are classes, they define the wrap around curve on the left and right.
Click to expand...
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.
 
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.
 
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.
 
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
 
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...
 
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.
 
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?
 
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 -->
 
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?
 
You must log in or register to reply here.

Similar threads

tajhay
  • Suggestion Suggestion
Lack of interest Custom user Fields - based on usergroups
Replies
1
Views
528
abdfahim
abdfahim
MichaelB
Add-on Auto-populate Page Based on Usergroup/Custom User Field Data
Replies
0
Views
843
MichaelB
MichaelB
Mujahid Taban
  • Question Question
Attachments limitations based on usergroups
Replies
1
Views
812
Onimua
Onimua
Back
Top Bottom