Justoverclock you can simply remove one of the divs that wrap around the avatar helper and target your .avatarwb
class and then override the .Avatar
class like so:
index.js
import { extend } from 'flarum/extend';
import app from 'flarum/app';
import IndexPage from 'flarum/components/IndexPage';
import avatar from 'flarum/common/helpers/avatar';
import username from 'flarum/common/helpers/username';
app.initializers.add('justoverclock/flarum-ext-welcomebox', () => {
extend(IndexPage.prototype, 'sidebarItems', (items) => {
const user = app.session.user;
if (app.session.user)
items.add(
'welcomeBox',
m(
'div',
{ class: 'containerwb' },
m('div', { class: 'backgrwb' }, [
m('div', { class: 'avatarwb' }, m('a', { href: app.route.user(user) }, avatar(user))),
m('div', { class: 'contentwb' }, m('div', { class: 'tagwb' }, 'Welcome Back, ', username(user))),
])
),
20
);
});
});
forum.less
.avatarwb {
.Avatar {
border-radius: 0;
width: 180px;
height: 180px;
display: inline-block;
box-sizing: content-box;
font-size: 96px;
line-height: 180px;
}
}
Adjust the sizing and aligning of the content according to your needs 🙂 the reason why the avatar helper should be used here is in the event that the user doesn't have an avatar uploaded, it will use the first letter of their username if they haven't uploaded one so there isn't any empty avatar.