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

Status
Not open for further replies.

Xenfy

OMG Member
Joined
Oct 8, 2010
Messages
56
xenfy_xenforo_development_center_free_styles_themes.png

How to Align Sidebar Staff/Member Names Side by Side

Module:
Staff Online Now

Files to Edit:
sidebar.css
sidebar_online_users

BEFORE (Alignment):
example_01.png


AFTER (Alignment):
example_02.png


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

xenfy_xenforo_development_center_free_styles_themes_bottom.png
 

Floris

I'm just me :) Hi.
Staff member
Joined
Jan 1, 2001
Messages
60,096
Looks great, good job and thank you for sharing. Much appreciated.
 
Status
Not open for further replies.
Top