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

Discussion in 'Styling and Customization Questions' started by Carlos, Oct 19, 2013.

  1. Carlos

    Carlos Well-Known Member

    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.
    Last edited: Oct 19, 2013
  2. Jeremy

    Jeremy Well-Known Member

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

    Carlos Well-Known Member

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

    Shelley Well-Known Member

  5. Carlos

    Carlos Well-Known Member

  6. Shelley

    Shelley Well-Known Member

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

    Carlos Well-Known Member

    Look at the mockup image to see what I mean. I put it under the member block.

    @Brogan @Mike @Jake Bunce
  8. Tracy Perry

    Tracy Perry Well-Known Member

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

    Carlos Well-Known Member

    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)
  10. Tracy Perry

    Tracy Perry Well-Known Member

    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.

    Last edited: Oct 22, 2013
  11. Carlos

    Carlos Well-Known Member

    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.
  12. Tracy Perry

    Tracy Perry Well-Known Member

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

    Carlos Well-Known Member

    I know. Thanks for helping, though! :)
  14. Mouth

    Mouth Well-Known Member

    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?
  15. Carlos

    Carlos Well-Known Member

    Yes! JUST like that! @Sheldon!

    *Points at bottom*
  16. Shelley

    Shelley Well-Known Member

    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:if is="{xen:helper ismemberof, $user, 3}">
    <li class="admin">
    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;}
    Last edited: Oct 22, 2013
    Tracy Perry likes this.
  17. Carlos

    Carlos Well-Known Member

    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 likes this.
  18. Shelley

    Shelley Well-Known Member

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

    Carlos Well-Known Member

    Yeah. I didn't want to hurt you, because I know you put in a lot of work in these stuff.

Share This Page