¿Cómo puedo cambiar el orden de los botones en la cabecera?

Contribuir UX
1

Hola a todos, quiero rediseñar completamente el encabezado de Discourse.
El diseñador de nuestra empresa me esbozó un diseño así, pero con la ayuda de CSS no logré acercarme mucho a él.

Sin embargo, tengo un problema para mover el botón de perfil al principio. Busqué en las fuentes y encontré algo en \app\assets\javascripts\discourse\app\widgets\header.js.
Gracias a esta ayuda, pude eliminar los iconos de la producción y un poco más: [Solved] How to use virtual-dom's "h" helper in <head> for header-dropdown hamburger widget override? + How to override @computed method?

Sin embargo, no pude moverlo.
El foro ahora se ve así:

Screenshot_2
Screenshot_2325×100 2.11 KB

Y esto es lo que se necesita: (mover el botón de cuenta y cambiar el icono)
Screenshot_1
Screenshot_1424×108 5.96 KB

¿Por dónde debo empezar para lograr esto?

2 Me gusta
2

Puedes hacer algo así con CSS:

.d-header-icons { 
  display: flex;
}

.header-dropdown-toggle.current-user { 
  order: 1; 
}
.header-dropdown-toggle.search-dropdown { 
  order: 2; 
}
.header-dropdown-toggle.hamburger-dropdown { 
  order: 3; 
}
5 Me gusta
Quick Messages Plugin
3

Gracias, muy bien.

Hacerle una pequeña modificación me ayudó.

2 Me gusta
4

Este tema se cerró automáticamente 2 días después de la última respuesta. Ya no se permiten nuevas respuestas.