XF 1.2 Why aren't my banners wrapping around the userinfo?

[JMEWLS]

http://nbadimensions.net/forums/threads/welcome-to-the-new-forum-questions.140339/

If you look at the postbit, the banners aren't wrapping around the box. Why is this? I've edited the postbit, but have kept most of the original code? I'm just adding the " {xen:helper userBanner, $user, 'wrapped'}" to the postbit.

<xen:require css="message_user_info.css" />

<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">   
<div class="messageUserBlock">

     <div class="userText" style="background-color:#EDEDED; text-shadow:1px 1px #FFF; text-align:center; border-bottom: 1px solid #d8d8d8; width:112px; padding:5px; ">
       <xen:username user="$user" itemprop="name" rich="true" />
       <!-- slot: message_user_info_text -->
     </div>

   <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
     <div class="avatarHolder"  align="center">
       <span class="helper"></span>
       <xen:avatar user="$user" size="m" />
       <!-- slot: message_user_info_avatar -->
     </div>
   </xen:hook>
       {xen:helper userBanner, $user, 'wrapped'}
<xen:if is="!{$isQuickReply}">
   
           <xen:if hascontent="true"><div style="width:112px !important; padding:5px; text-align:center; background-color:#fff;"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></div></xen:if>
           <xen:if is="@messageShowRegisterDate">
             <div style="border-top:#d1d1d1 1px solid; color:#999; font-size:9px; width:116px; padding:3px; text-align:center; background-color:#f0f0f0;"><span style="font-weight:bold;">Joined:</span> {xen:date $user.register_date}</div>
         </xen:if>
         
           <xen:if is="@messageShowMessageCount AND {$user.user_id}">

               <div style="border-top:#d1d1d1 1px solid; color:#999; font-size:9px; width:116px; padding:3px; text-align:center; background-color:#f0f0f0;"><span style="font-weight:bold;">Posts: </span><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed">{xen:number $user.message_count}</a></div>
         </xen:if>
         <xen:if is="@messageShowTotalLikes AND {$user.user_id}">


               <div style="border-top:#d1d1d1 1px solid; color:#999; font-size:9px; width:116px; padding:3px; text-align:center; background-color:#f0f0f0;"><span style="font-weight:bold;">Rep Count: </span>{xen:number $user.like_count}</div>
         </xen:if>
           <xen:if is="@messageShowLocation AND {$user.location}">

               <div style="border-top:#d1d1d1 1px solid; color:#999; font-size:9px; width:116px; padding:3px; text-align:center; background-color:#f0f0f0;"><span style="font-weight:bold;">Location:</span> {xen:string censor, $user.location}</div>
           </xen:if>
   
   
   <xen:if hascontent="true">
     <div class="extraUserInfo">

       <xen:contentcheck>     
       <xen:if is="@messageShowCustomFields AND {$user.customFields}">
       <xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
       
         <xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo">
           <xen:if is="{$fieldInfo.viewable_message}">
             <xen:if hascontent="true">
               <dl class="pairsInline userField_{$fieldId}">
                 <dt>{xen:helper userFieldTitle, $fieldId}:</dt>
                 <dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>
               </dl>
             </xen:if>
           </xen:if>
         </xen:foreach>
         
       </xen:hook>
       </xen:if>

       </xen:contentcheck>
     </div>
   </xen:if>
     
</xen:if>


</div>
</div>

That is my code.

 

[Shelley]

You shouldn't have to be making any template edits. Here's a guide @Brogan wrote that you may find useful and save on the template edits. http://xenforo.com/community/resources/creating-custom-user-group-banner-css.2000/

 

[JMEWLS]

The banners itself aren't coded into my postbit, I'm using a css class for each of them. However it's still not wrapping.

 

[Andy.N]

@JMEWLS
I have the same problem with Staff banner not properly wrapped. What did you do to fix it?

 

[Paul B]

The staff banner wraps automatically unless you have modified the HTML or CSS.

Can you post a link to your site so I can inspect the code?

 

[Andy.N]

The staff banner wraps automatically unless you have modified the HTML or CSS.

Can you post a link to your site so I can inspect the code?

https://www.quantnet.com/threads/level-1-2.14273/#post-116830
Thanks Paul

 

[Paul B]

You seem to have some CSS classes missing - this one at least: .userBanner.bannerStaff

Check for outdated templates.
Try in a new default style - if it works then it's related to your style.

 

[Andy.N]

You seem to have some CSS classes missing - this one at least: .userBanner.bannerStaff

Check for outdated templates.
Try in a new default style - if it works then it's related to your style.

Paul,
I'm really close to fixing this. There is some extra spacing on the wrap for the user title
Please take a look at this url for example of user banner and the staff banner
You can resize the browser to see how it will look in mobile device.
Almost there. Just some missing code.
Here is what I use

<ul class="userTitle">
            <li class="userBanner bannerStaff wrapped">
                <span class="before"></span>
                <span class="after"></span>
                @UserRankRibbonsRibbon1Title
            </li>
</ul>

 

[Paul B]

I don't understand why the code was missing - it's default in 1.2.

The non-staff banners are wider than the message user info block.

I would recommend reverting any outdated templates and removing anything from EXTRA.css to reset it to default, which should resolve the issues you are having.