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

Russ

Well-known member
#1
This is a quick tutorial to move the userbit to the right side on posts: This will also change that little left arrow to the left of the avatar.

In message.css find:

Code:
.message .messageInfo
{
    margin-left: 140px;
}
Replace with:
Code:
.message .messageInfo
{
    margin-right: 140px;
}
In message_user_info.css find:

Code:
.messageUserInfo
{
    float: left;
    width: 124px;
}
Replace with:
Code:
.messageUserInfo
{
    float: right;
    width: 124px;
}
In quickreply.css find:

Code:
#QuickReply
{
    margin-left: 140px;
}
Replace with:
Code:
#QuickReply
{
    margin-right: 140px;
}
3. Find -> #QuickReply

* Change margin-left: 140px to -> margin-right: 140px;

In message_user_info.css find:
Code:
        .messageUserBlock .arrow
        {
            position: absolute;
            top: 10px;
            right: -10px;

            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;

            border: 10px solid transparent;
            border-left-color: @messageUserBlock.border-color;
            border-right: none;

            /* Hide from IE6 */
            _display: none;
        }

            .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
        {
            position: absolute;
            top: 10px;
            left: -10px;

            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;

            border: 10px solid transparent;
            border-right-color: @messageUserBlock.border-color;
            border-left: none;

            /* Hide from IE6 */
            _display: none;
        }

            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -10px;
                right: -11px;

                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;

                border: 10px solid transparent;
                border-right-color: @messageAvatarHolder.background-color;
                border-left: none;
            }
Hope this works out! Tell me if you guys and gals have problems and I'll do the best I can to help.
 

Brogan

XenForo moderator
Staff member
#5
Nice one Russ.
Should come in very useful for those who want to switch.

However, the very first change I made on my phpBB install was to move everything to the left so I don't think I'll be implementing this :D