• 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 implement ranks?

Carlos

Well-known member
#1
Now, I'm not looking to replace the "Staff Banners" (those strips that say "Staff Member" under your avatar), I'm looking to have post ranks.

I've got the images done: http://www.codforums.com/threads/codforums-rank-structure.4136/

I know how to make usergroups, but how do I customize it so that the images correspond to the amount of posts? For example Recruit is from 0 to 50 posts, Private is from 50 to 100, and vice versa.

The reason why I'm doing usergroups, is because I want [username] colors to go along with the ranks.

Finally, how can I position the rank images below the member card - not inside it, but outside of it - ya know where the empty post bit is?

Like this:
codfcard.png
Ignore the bottom part where "your sytle" is noted. This was a rough sketch of what I wanted.

Also, I want these ranks to show up in responsive [mobile] view, too.
 
Last edited:

Shelley

Well-known member
#6
Hey, @Shelley! What's the value for outside the box (in postbit)?

Code:
.admin {
background: url("imglink") no-repeat;
height: 38px;
width: 105px;
text-indent: -10000em;
display: [b]block[/b];
}
Not sure what you mean Carlos. You'll have to be more specific and possibly post a link to the ranks if it needs debugging. Alternatively, Brogan or one of the others might be able to help you out in accomplishing what you need to do.
 

Carlos

Well-known member
#7
Not sure what you mean Carlos. You'll have to be more specific and possibly post a link to the ranks if it needs debugging. Alternatively, Brogan or one of the others might be able to help you out in accomplishing what you need to do.
Look at the mockup image to see what I mean. I put it under the member block.

@Brogan @Mike @Jake Bunce
 

Tracy Perry

Well-known member
#8
Hey, @Shelley! What's the value for outside the box (in postbit)?
Are you talking about where the extraUserInfo (the number of posts, date joined, etc) data is posted? Or are you talking about totally outside the postbit?
From what your drawing looks like you are referring to totally outside the postbit itself - which may require an add-on.
 

Carlos

Well-known member
#9
Are you talking about where the extraUserInfo (the number of posts, date joined, etc) data is posted? Or are you talking about totally outside the postbit?
From what your drawing looks like you are referring to totally outside the postbit itself - which may require an add-on.
Yes, exactly. Awe man. It requires an add-on. :(

So, I guess customized ranks are out for the time being. I don't want my User Info to be overly "crowded" with custom ranks.

Where I got the inspiration? A website called COD247 dot com. (Not typing it out)
 

Tracy Perry

Well-known member
#10
Where I got the inspiration? A website called COD247 dot com. (Not typing it out)
Actually, that looks like they ARE displayed in the postbit for vB... but he doesn't have a border around the postbit so it appears that they are not.

You can do the same thing by removing the border around your messageUserBlock.

Code:
.messageUserBlock {
border: none;
}
and making the color for the avatar holder and extrauserinfo the same as the normal background. It just takes a little editing the EXTRA.css and scrounging around for the right areas. Chrome Developer was used to modify the page here for the below example.

screenshot.jpg
 
Last edited:

Carlos

Well-known member
#11
But I don't want to remove the userblock - I like the design. :)

I just want to put the ranks at the bottom so that there's room for customized rank images. As shown in the other site I mentioned.
 

Tracy Perry

Well-known member
#12
But I don't want to remove the userblock - I like the design. :)

I just want to put the ranks at the bottom so that there's room for customized rank images. As shown in the other site I mentioned.
Then you will need to submit a request for a custom add-on to be coded here as I don't know of any way to place those anywhere BUT the messageUserBlock in the postbit area.
 

Mouth

Well-known member
#14

Shelley

Well-known member
#16
Yes! JUST like that! @Sheldon!

*Points at bottom*
The following seems to work for me.

In your Message_user_Info template add the following above the last closing div in the template.

Before you do these changes carlos you'll have to apply the correct $user,ID and create your own classes for other usergroups, just repeat the code and adjust the css and template change code to reflect your ranks. Probably be best waiting for someone else to jump in as I'm sure there is a better way of doing this, but it seems to work for me.

Screenshot_29.png

Code:
<xen:if hascontent="true">
<ul class="admin-rank">
<xen:contentcheck>
<xen:if is="{xen:helper ismemberof, $user, 3}">
<li class="admin">
</li>
</xen:if>
</xen:contentcheck>
</ul>
</xen:if>
then add the following in EXTRA.css

Code:
.admin-rank {
  background: url('@imagePath/xenforo/icons/adminrank.png') no-repeat center;
  height: 96px;
}
edit: You'll also probably not want the ranks to show under the quickreply messageuserinfo so adding the following will hide that in EXTRA.CSS simply keep adding to the classes as you add more ranks to the usergroups like so

.quickReply .admin-rank, .quickReply .contributor-rank, .quickReply .premium-rank

Code:
.quickReply .admin-rank  {display: none;}
 
Last edited:

Carlos

Well-known member
#17
Yeah, I'm going to go with your suggestion on waiting on another person about a "second opinion." I'm not liking the look of the code (to no fault of your own), it just sounds like I have to enter every user with these "user ID" inputs. I do appreciate the help, though, @Shelley! :)
 

Shelley

Well-known member
#18
Yeah, I'm going to go with your suggestion on waiting on another person about a "second opinion." I'm not liking the look of the code (to no fault of your own), it just sounds like I have to enter every user with these "user ID" inputs. I do appreciate the help, though, @Shelley! :)
No problem. I could be wrong, but I am almost sure your not going to get out of having to insert the group ID's on the placement you are wanting to place the ranks. Good call on the second opinion as I'm sure there is a better way of going about this.
 

Carlos

Well-known member
#19
No problem. I could be wrong, but I am almost sure your not going to get out of having to insert the group ID's on the placement you are wanting to place the ranks. Good call on the second opinion as I'm sure there is a better way of going about this.
Yeah. I didn't want to hurt you, because I know you put in a lot of work in these stuff.