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

XF 1.1 Custom User Field Icons on the same line?

#1
Hello, As You can see... I'm using icons for my user fields.
But I was wondering how I could make it so they are on the same line... Instead of on top of one another.
This is what I have so far:

But they are under one another, I don't want this.
 
#3
Without seeing the code, it's difficult to say, but using float:left should work.
Here is the code: (VERY SMALL EDIT OF XENFORO)
Code:
<CENTER>Links:<CENTER>
            </xen:hook>           
            <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}">
                               


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

    <span class="arrow"><span></span></span>
</div>
</div>
 

Jeremy

Well-known member
#7
Code:
.extraUserInfo {
  min-height: 35px;
}

.pairsInline.userField_Steam, .pairsInline.userField_YouTube {
  float: left;
  margin: 2px;
}
You will need to expand on that as you add more fields.
 
#8
Code:
.extraUserInfo {
  min-height: 35px;
}

.pairsInline.userField_Steam, .pairsInline.userField_YouTube {
  float: left;
  margin: 2px;
}
You will need to expand on that as you add more fields.
Thank you. but now how could I make it so they are not RIGHT next to one another.
Also how could I re center it?
 

Jeremy

Well-known member
#9
Adjust the margin. Re centering it would be:
Code:
.pairsInline.userField_Steam {
  margin-left: auto;
}
(Untested)