• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

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

#1

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:
Code:
/* list of users with 36px avatars, username and user title */
 etc.
MAKE THE CHANGES BELOW:
Code:
/* 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:
Code:
            <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:
Code:
<div class="xenfyclear"></div>
And you're finished!

 
#3
Thanks and No problem Lawrence. An update will be made to the code this week to have an alternate way of aligning the names. Stay tuned. :cool: