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

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

Discussion in 'Styling and Customization Questions' started by JMEWLS, Jul 27, 2013.

  1. JMEWLS

    JMEWLS Active Member

    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.

    Code:
    <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.
     
  2. Shelley

    Shelley Well-Known Member

  3. JMEWLS

    JMEWLS Active Member

    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.
     
  4. Andy.N

    Andy.N Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    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?
     
  6. Andy.N

    Andy.N Well-Known Member

  7. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  8. Andy.N

    Andy.N Well-Known Member

    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

    Code:
    <ul class="userTitle">
                <li class="userBanner bannerStaff wrapped">
                    <span class="before"></span>
                    <span class="after"></span>
                    @UserRankRibbonsRibbon1Title
                </li>
    </ul>
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

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

Share This Page