User Ranks in CSS 1.0

[Floris]

This is one of the best template modifications I've seen so far that respects the xenforo-way of doing things. Simple, effective, and looks great.

 

[Caelum]

Love it, thanks

That goes hand in hand neatly with the css forum icons I wanted, which Jake did.

If everything is CSS then it will mean faster loading times and no need to create multiple image sets for each style.

I'm blind. Link me?

 

[Paul B]

I'm blind. Link me?

http://xenforo.com/community/threads/forum-icons-created-using-css-instead-of-images.7511/

 

[Kim]

Really great work Dutchbb!

 

[Gustavo Fernandez]

Step 1:

Open template: message_user_info

FIND:

	<xen:if hascontent="true">
		<div class="extraUserInfo">

ABOVE ADD:

<!-- START USER RANK -->
<xen:if is="{$user.is_admin}">
<span class="userrank">Administrator</span>
</xen:if>

<xen:if is="{$user.is_moderator} AND !{$user.is_admin}">
<span class="userrank">Moderator</span>
</xen:if>

<xen:if is="{$user.user_group_id} == 5">
<span class="userrank">Your_custom_usergroup_name</span>
</xen:if>
<!-- END USER RANK -->

(To show the appropriate rank for other usergroups you'll need a new conditional for every added rank. Replace 5 with the appropriate usergroup ID.)

find

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

replace

<xen:if is="{$user.user_group_id} == 5 AND !{$user.is_admin} AND !{$user.is_moderator}">

 

[dutchbb]

Yes depending on whether you want to show one or multiple ranks (I think most would prefer just one). Thanks for your addition.

 

[Gustavo Fernandez]

Yes depending on wheter you want to show one or multiple ranks (I think most would prefer just one). Thanks for your addition.

Yes, sorry for my lack of explication

 

[dutchbb]

Yes, sorry for my lack of explication

No prob. I've added it to the OP.

And everyone thanks for the feedback so far

 

[Caelum]

How would one go about using it on a per user basis instead? Eg...

If user ID == 42...
<span class="userrank">Rank-for-member-42</span>

What'd the syntax be?

Not a PHP dev, so yeah...cheers

 

[Green Cat]

Looks great, thanks.

 

[Eric J.]

How would you use this to give members their title as well. I don't know what usergroup they are. XD

 

[Paul B]

How would you use this to give members their title as well. I don't know what usergroup they are. XD

To find the ID number of a user group, click on it in the ACP and it will be displayed in the URL.
For example: admin.php?user-groups/administrative.3/edit

 

[Eric J.]

Ah, thanks Brogan. You're a big help, haha.

 

[Sador]

Interesting.

 

[lms]

If change ACP -> Users -> UserGroups -> Use the following user title -> define (absolutely necessary for each user group) as you want to call this group. Ex.:

Also adds the text in the template message_user_info.css:

.userrank
{
	display: block;
	width: 108px;
	margin: -2px 0 5px 6px;
	padding: 2px 0 3px 0;
	border: 1px solid @primaryLight;
	border-radius: 5px;
	background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
	text-align: center;
	font: 11px verdana,sans-serif;
	text-decoration: none;
	color: @primaryMedium;
	text-shadow: 1px 1px 0 #fff;
	outline: 0;
}

Find in message_user_info:

<xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if>

and change it for

<xen:if hascontent="true"><em class="userrank" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if>

The effect is the same and does not duplicate the user title.
Demo: http://www.xenfacil.com
Example image:

Salud2

 

[lms]

In addition to the previous post, fin in the template sidebar_online_users

                <xen:contentcheck>
                    <xen:foreach loop="$onlineUsers.records" value="$user">
                        <xen:if is="{$user.is_moderator} OR {$user.is_admin}">
                            <li>
                                <xen:avatar user="$user" size="s" img="true" />
                                <xen:username user="$user" rich="true" />
                                <div class="userTitle">{xen:helper userTitle, $user}</div>
                            </li>
                        </xen:if>
                    </xen:foreach>
                </xen:contentcheck>

Change for

                <xen:contentcheck>
                    <xen:foreach loop="$onlineUsers.records" value="$user">
                        <xen:if is="{$user.is_moderator} OR {$user.is_admin}">
                            <li>
                                <xen:avatar user="$user" size="s" img="true" />
                                <xen:username user="$user" rich="true" />
                                <div class="userrank">{xen:helper userTitle, $user}</div>
                            </li>
                        </xen:if>
                    </xen:foreach>
                </xen:contentcheck>

Salud2

 

[lms]

And with this css in the template message_user_info.css:

.userrank
{
                                display: block;
                                width: 100px;
                                margin: 2px 0 10px 45px;
                padding: 2px 0 3px 0;
                border: 1px solid @primaryLight;
                border-radius: 5px;
                background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
                                text-align: center;
                                font: 11px verdana,sans-serif;
                text-decoration: none;
                color: @primaryMedium;
                text-shadow: 1px 1px 0 #fff;
                box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
                outline: 0;
}

looks like

Salud2

 

[Lykke]

Awesome Now I only have one little challenge:

In our forum you can have more than 2 titles - some of us have 3 or 4 ... I have for example the titles:

Media Manager
Wiki Wookie
Contributor
Administrator

How can you make it possible to have banners for all your titles?

 

[James]

Just curious but you have used border-radius: 5px; Does XenForo automatically parse that for each vendor-specific prefix (-moz, -webkit (though not necessary), -khtml, etc), or have you just used the default because it's easier?

 

[James]

How would one go about using it on a per user basis instead? Eg...

If user ID == 42...
<span class="userrank">Rank-for-member-42</span>

What'd the syntax be?

Not a PHP dev, so yeah...cheers

Two ways of doing it:

{xen:if '{$user.user_id} == 42', '<span class="userrank">Rank-for-member-42</span>'}

<xen:if is="$user.user_id == 42"><span class="userrank">Rank-for-member-42</span></xen:if>