Rank images centered below avatar

[Hyperion]

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:

 

[Paul B]

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

 

[Hyperion]

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?

<!-- 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:

 

[Shelley]

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

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

 

[Hyperion]

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.

 

[Shelley]

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.

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

.userMood {
    padding-top: 10px;
}

 

[Hyperion]

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:

 

[mrGTB]

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:

View attachment 22723

View attachment 22724

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

.userMood {
    margin-top: 10px;
}