[Tutorial] Align Sidebar Staff/Member Names Side by Side

[Xenfy]

How to Align Sidebar Staff/Member Names Side by Side

Module:
Staff Online Now

Files to Edit:
sidebar.css
sidebar_online_users

BEFORE (Alignment):

AFTER (Alignment):

• STEP 1:
Open "sidebar.css" in your editor

• STEP 2:
FIND:

/* list of users with 36px avatars, username and user title */
 etc.

MAKE THE CHANGES BELOW:

/* list of users with 25px avatars, username and user title ---------- */
/* XENFY - SIDEBAR STAFF ONLINE CHANGES ------------------------------ */
/* ------------------------------------------------------------------- */
.sidebar .avatarList li
{
 zoom: 1;
    margin: 5px 0;
    float: left;
    width: 100px;
    height: 52px;
    overflow: none;
}

    .sidebar .avatarList .avatar
    {
        float: left;
        margin-right: 5px;
    }

    .sidebar .avatarList .avatar img
    {
        width: 25px;
        height: 25px;
    }

.xenfyclear
    {
        clear:both;
    }

    .sidebar .avatarList .username
    {
        margin-top: 4px;
        font-size: 8pt;
        display:block;
    }

    .sidebar .avatarList .muted
    {
        font-size: 9px;
    }

• STEP 3:
Open "sidebar_online_users" in your editor

• STEP 4:
FIND:

            <h3>{xen:phrase staff_online_now}</h3>
            <ul>
                <xen:contentcheck>
                    <xen:foreach loop="$onlineUsers.records" value="$user">
                        <xen:if is="{$user.is_moderator} OR {$user.is_admin}">
                            <li>
                                <xen:avatar user="$user" size="s" img="true" />
                                <a href="{xen:link members,  $user}" class="username">{xen:helper richUserName, $user}</a>
                                <div class="muted">{xen:helper userTitle, $user}</div>
                            </li>
                        </xen:if>
                    </xen:foreach>

ADD AFTER:

<div class="xenfyclear"></div>

And you're finished!

 

[Myster Dude]

wow thanks

I'll be using this

 

[Hagai]

You are great mate.
Very useful indeed.

 

[Floris]

Looks great, good job and thank you for sharing. Much appreciated.