Move the userbit to the right of the avatar

[Russ]

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:



All the edits are going to be under message_user_info.css


Find:

.messageUserInfo
{
    float: left;
    width: 124px;
}

Replace with:

.messageUserInfo
{
    float: left;
    width: 248px;
    margin-right: 15px;
}

Find:

        .messageUserBlock div.avatarHolder
        {
            @property "messageAvatarHolder";
            background-color: @primaryLightest;
            padding: 10px;
            border-radius: 4px;
            @property "/messageAvatarHolder";
        }

Replace with:

         .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

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

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




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

 

[anotheralias]

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!

 

[najaru]

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

 

[HannahP]

Doesn't that break the quick reply though?

 

[Russ]

Doesn't that break the quick reply though?
View attachment 4397

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:

    <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.