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.

Move the userbit to the right of the avatar

Discussion in 'Template Modifications [Archive]' started by Russ, Oct 12, 2010.

  1. Russ

    Russ Well-Known Member

    Someone requested this so I figured I'd help out! Depending on what you need to achieve you more than likely need to make additional modifications to this code. I'm always here to help so don't hesitate to ask!


    Results we're shooting for:
    userbitrightofavatar.png


    All the edits are going to be under message_user_info.css


    Find:

    Code:
    .messageUserInfo
    {
        float: left;
        width: 124px;
    }
    
    Replace with:
    Code:
    .messageUserInfo
    {
        float: left;
        width: 248px;
        margin-right: 15px;
    }
    


    Find:

    Code:
            .messageUserBlock div.avatarHolder
            {
                @property "messageAvatarHolder";
                background-color: @primaryLightest;
                padding: 10px;
                border-radius: 4px;
                @property "/messageAvatarHolder";
            }
    
    Replace with:
    Code:
             .messageUserBlock div.avatarHolder
            {
                @property "messageAvatarHolder";
                background-color: @primaryLightest;
                padding: 10px;
                border-radius: 4px;
                float: left;
                margin-right: 5px;
                @property "/messageAvatarHolder";
            }
    
     

    Final step fix the arrow color:

    Find
    Code:
                .messageUserBlock .arrow span
                {
                    position: absolute;
                    top: -10px;
                    left: -11px;
    
                    display: block;
                    width: 0px;
                    height: 0px;
                    line-height: 0px;
    
                    border: 10px solid transparent;
                    border-left-color: @messageAvatarHolder.background-color;
                    border-right: none;
                }
    
    Replace with:
    Code:
                .messageUserBlock .arrow span
                {
                    position: absolute;
                    top: -10px;
                    left: -11px;
    
                    display: block;
                    width: 0px;
                    height: 0px;
                    line-height: 0px;
    
                    border: 10px solid transparent;
                    border-left-color: @primaryLighterStill.background-color;
                    border-right: none;
                }
    

    With additional userbit info activated via Style Properties Groups -> Message User Info - Settings
    with no further edits it will look like this:

    userbitrightofavatar2.png


    EDIT: Quick reply is messed up unless you do this quick fix and remove the avatar bit from the left of it. Click Here
    Feel free to ask any questions you'd like :)
     
  2. anotheralias

    anotheralias Well-Known Member

    Thank you soooooooooooo much Russ!

    (I'm getting seriously spoiled on here with the modifications! It's wonderful!)

    ------- adding ----

    It works like a charm. :) You have made a lot of my board members very very happy!
     
  3. najaru

    najaru Active Member

    hi russ.
    why dont you try to make a complete horizzontal user proifile , like vbulletin?
     
  4. mjp

    mjp Well-Known Member

    Doesn't that break the quick reply though?
    Untitled-10.gif
     
  5. Russ

    Russ Well-Known Member


    That it does... must not of seen this before! :) a quick work around for that would be removing the avatar bit completely from the quick reply

    in quickreply

    Remove:

    Code:
        <xen:include template="message_user_info">
            <xen:map from="$visitor" to="$user" />
            <xen:set var="$isQuickReply">1</xen:set>
        </xen:include>
    
    This is an extremely quick work around until I get home tonight and work on a different fix.
     
    Neil E. and mjp like this.

Share This Page