1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Rank images centered below avatar

Discussion in 'Styling and Customization Questions' started by Hyperion, Dec 16, 2011.

  1. Hyperion

    Hyperion Active Member

    Hi.

    I can figure out/worry about the code necessary for adding the rank images later. For now, I am concerned about where I would need to go into to insert rank images (actual images, not CSS) directly below the avatar. I have searched for and read related threads here at the xenForo support forum, but the instructions they give would not put them on the spot I wish for (e.g., one set of instructions would position the rank image below the user name and user rank image.

    To be sure I am clear in what I am asking, I was fortunate to recently install Shelley's xenMood's add-on because it gives a visual on what I mean. Below is a screen shot from my forum. The rank images I want to add would be right between the avatar and mood selector, also centered:

    moodiconbelowrankimage.png
     
    Justin G Kringstad likes this.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Edit the message_user_info template and add your code just before <!-- slot: message_user_info_avatar -->.
     
  3. Hyperion

    Hyperion Active Member

    Awesome. Below is what I worked out with code. Result is close, but seems to left-align rather than center. I wonder if centering is merely a matter of adding something to the code?

    Code:
    <!-- Start User Ranks -->
    <xen:if is="{$user.is_admin}">
    <span class="userrank"><img src="enlighten/ranks/stars_orange.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.is_moderator} AND !{$user.is_admin}">
    <span class="userrank"><img src="enlighten/ranks/stars_red.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 27">
    <span class="userrank"><img src="enlighten/ranks/stars_0.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 15">
    <span class="userrank"><img src="enlighten/ranks/stars_1.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 16">
    <span class="userrank"><img src="enlighten/ranks/stars_1.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 17">
    <span class="userrank"><img src="enlighten/ranks/stars_2.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 18">
    <span class="userrank"><img src="enlighten/ranks/stars_2.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 19">
    <span class="userrank"><img src="enlighten/ranks/stars_3.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 20">
    <span class="userrank"><img src="enlighten/ranks/stars_3.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 21">
    <span class="userrank"><img src="enlighten/ranks/stars_4.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 22">
    <span class="userrank"><img src="enlighten/ranks/stars_4.gif"></span>
    </xen:if>
     
    <xen:if is="{$user.user_group_id} == 23">
    <span class="userrank"><img src="enlighten/ranks/stars_5.gif"></span>
    </xen:if>
    <!-- End User Ranks -->
    Here are screen shots to show what I mean:
    avatarwithrank1.png avatarwithrank2.png
     
  4. Shelley

    Shelley Well-Known Member

    You could possibly make use and wrap a <div align="center"></div> or make use of the span classes might work adding the below css in the extra.css template i have really tinkered with userranks

    Code:
    .userrank {
      margin-left: auto;
      margin-right: auto;
    display: block;
    
    I'm sure there's another, better way and I'm sure paul or jake will post a better solution.

    ps. The xenmood add-on wasn't created by me but by Dismounted I only designed the mood icons.
     
  5. Hyperion

    Hyperion Active Member

    Those div tags did the trick. Thanks. I did not know that these simple tags I used on vBulletin 3.x would work just fine on xenForo.

    Sorry about misattributing the creator of the moods add-on.

    By the way, would you happen to know off-hand how to lessen the gap between the mood selector and the rank images? As you can see from the screenshots above there is a noticeable gap between the mood selector and rank image, especially for the mood icon "caffeine fix." I remember when I was on vBulletin 3.x the mood selector and rank images were so close to each other that a few of these mood icons (such as "brooding") partially covered the star rank images above them, but I did not mind this, and in fact prefer that closeness over the gap shown above.
     
  6. Shelley

    Shelley Well-Known Member

    Paste the following into your extra.css template and adjust the size to suit. Lowering it to 5px should be fine.

    Code:
    .userMood {
        padding-top: 10px;
    }
     
  7. Hyperion

    Hyperion Active Member

    This had no effect when I applied it to extra.css, so I tried mood_display.css and it worked, yay. Thanks again, Shelley! Results:

    mooddisplayyeah-ah.png

    mooddisplayyeah-ah2.png
     
    Shelley likes this.
  8. mrGTB

    mrGTB Well-Known Member

    Might work, not tested. But sometimes "padding-top" won't do the trick and should be "margin-top" instead. Might be worth testing that again in extra.css anyhow, just if anything to see if it works? As your better trying to keep things in "extra.css" to avoid any template reverts later

    Code:
    .userMood {
        margin-top: 10px;
    }
     
    Hyperion likes this.

Share This Page