Moving username and title above avatar

[Deepblue]

Hi there, i am wondering about how to move Username and user title above avatar? Is there any easy way to do it?
Thanks.

 

[Russ]

For this you'll just need to edit "message_macros"

Moving this bit:

        <div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="{{ $includeMicrodata ? 'name' : '' }}" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
            <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
        </div>

Above here:

        <div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">

This would move the user banners too. If you want to keep those below the avatar,

Remove this bit:

            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="{{ $includeMicrodata ? 'name' : '' }}" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />

And add this above the message-avatar line mentioned above:

        <div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="{{ $includeMicrodata ? 'name' : '' }}" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
        </div>

 

[Deepblue]

For this you'll just need to edit "message_macros"

Moving this bit:

        <div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="{{ $includeMicrodata ? 'name' : '' }}" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
            <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
        </div>

Above here:

        <div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">

This would move the user banners too. If you want to keep those below the avatar,

Remove this bit:

            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="{{ $includeMicrodata ? 'name' : '' }}" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />

And add this above the message-avatar line mentioned above:

        <div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="{{ $includeMicrodata ? 'name' : '' }}" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
        </div>

Thank you Russ now i have another problem with text editor. Selected item background become dark and even i change the color from template still not affect.

Please check the attachment.

 

[Russ]

Looks like XenForo is adding a bit of strange CSS, using the block header major background out of all things but not using the color from the header.

Try adding this into extra.less:

.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active
{
    background: @xf-editorButtonHoverBg;
    color: @xf-editorButtonHoverColor;
}

 

[Deepblue]

Looks like XenForo is adding a bit of strange CSS, using the block header major background out of all things but not using the color from the header.

Try adding this into extra.less:

.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active
{
    background: @xf-editorButtonHoverBg;
    color: @xf-editorButtonHoverColor;
}

Thank you it worked.

 

[Deepblue]

Hello Rus, sorry to bother you i found a small problem again

Page numbers the selected item hover is just gray no matter what i can not change it.

Please check the attachment.

Thanks.

 

[Russ]

The CSS should be using the default XF:

    &:hover,
    &:active
    {
        //background: xf-intensify(@xf-contentHighlightBg, 3%);
        background: xf-intensify(@xf-pageNavBase--background-color, 3%);
        text-decoration: none;
    }

So not sure why it'd be that color.

You can add this to your extra.less:

#XF .pageNav-page:hover
{
background: #CCC;
}

Replace with whatever color you want.

 

[Deepblue]

Thank you very much, it worked.