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

Move the userbit to the right of the avatar

Russ

Well-known member
#1
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 :)
 

anotheralias

Well-known member
#2
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!
 

Russ

Well-known member
#5
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:

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.