1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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.
    Dismiss Notice
  3. 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

Discussion in 'Template Modifications [Archive]' started by sinclair, Oct 10, 2010.

  1. sinclair

    sinclair Member

    [​IMG]
    How to Align Sidebar Staff/Member Names Side by Side

    Module:
    Staff Online Now

    Files to Edit:
    sidebar.css
    sidebar_online_users

    BEFORE (Alignment):
    [​IMG]

    AFTER (Alignment):
    [​IMG]

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

    [​IMG]
     
    Alien, borbole, ArnyVee and 3 others like this.
  2. Lawrence

    Lawrence Well-Known Member

    Very nice, sinclair, I know a few members who been asking about placing Staff Online into two columns. Thanks, :)
     
  3. sinclair

    sinclair Member

    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:
     
  4. ArnyVee

    ArnyVee Well-Known Member

    Very cool, thanks for sharing! :)
     

Share This Page