XF 1.2 How to implement ranks?

[Carlos]

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:

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.

 

[Jeremy]

Use user group promotions. And group banners using a custom CSS class.

 

[Carlos]

Can you show me an example of a custom CSS code that I can work with?

 

[Shelley]

http://xenforo.com/community/resources/user-ranks-with-images.2054/

 

[Carlos]

http://xenforo.com/community/resources/user-ranks-with-images.2054/

Hey, @Shelley! What's the value for outside the box (in postbit)?

.admin {
background: url("imglink") no-repeat;
height: 38px;
width: 105px;
text-indent: -10000em;
display: [b]block[/b];
}

 

[Shelley]

Hey, @Shelley! What's the value for outside the box (in postbit)?

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

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

 

[TPerry]

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]

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)

 

[TPerry]

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.

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

 

[Carlos]

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.

 

[TPerry]

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.

 

[Carlos]

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.

I know. Thanks for helping, though!

 

[Mouth]

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.

Like this on my site?



It came from http://xenforo.com/community/threads/social-icons-in-postbit-deleted.38742/ but was removed some time back. Perhaps you can ask @Sheldon if he still has the code changes and css required?

 

[Carlos]

Yes! JUST like that! @Sheldon!

*Points at bottom*

 

[Shelley]

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.

<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

.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

.quickReply .admin-rank  {display: none;}

 

[Carlos]

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]

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]

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.