Hola, ¡bienvenido de nuevo, Auston!
¿Podrías probar este HTML/CSS personalizado, por favor?
Debería funcionar bien con todas las insignias de notificación, con o sin el nuevo menú de notificaciones habilitado.
Te sugiero que crees un componente de tema. En caso de que no lo sepas, todo está explicado aquí: Beginner's guide to using Discourse Themes
Nota: Está deshabilitado en la vista móvil.
Nota: CSS basado en el tema predeterminado; es posible que necesites ajustarlo. No dudes en preguntar.
No he probado exhaustivamente, ¡pero espero que esto te funcione!
Head
<script type="text/discourse-plugin" version="0.8.13">
api.decorateWidget('header-notifications:after', dec => {
const { currentUser, site } = dec.widget;
if (site.mobileView) {
return;
}
return dec.h('span.username', currentUser.displayName);
})
</script>
CSS
html:not(.mobile-view) #current-user {
span.username {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}
.icon.btn-flat {
width: auto;
}
.user-status-background {
left: 22px;
}
.badge-notification {
&.with-icon.new-pms {
left: -3px;
right: auto;
top: 4px;
}
}
.unread-notifications {
left: 25px;
right: auto;
}
.unread-high-priority-notifications,
.ring {
left: -3px;
right: auto;
}
}