Como posso alterar a ordem dos botões no cabeçalho?

Contribuir Experiência do Usuário
1

Olá a todos, quero refazer completamente o cabeçalho do Discourse.
O designer da nossa empresa fez um esboço desse design para mim, mas com a ajuda do CSS não consegui implementá-lo direito.

No entanto, encontrei um problema ao tentar mover o botão de perfil para o início. Pesquisei nas fontes e encontrei algo em \app\assets\javascripts\discourse\app\widgets\header.js.
Com a ajuda disso, consegui remover os ícones da produção e um pouco mais: [Solved] How to use virtual-dom's "h" helper in <head> for header-dropdown hamburger widget override? + How to override @computed method?

Mas não consegui mover.
O fórum agora está assim:

Screenshot_2
Screenshot_2325×100 2.11 KB

E precisamos disso: (mover o botão da conta e alterar o ícone)
Screenshot_1
Screenshot_1424×108 5.96 KB

Onde preciso procurar para fazer isso:

2 curtidas
2

Você pode fazer algo assim com 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 curtidas
Quick Messages Plugin
3

Obrigado, muito bom.

Fiz uma pequena modificação e isso me ajudou.

2 curtidas
4

Este tópico foi fechado automaticamente dois dias após a última resposta. Novas respostas não são mais permitidas.