Comment puis-je changer l'ordre des boutons dans l'en-tête ?

Contribuer UX
1

Bonjour à tous, je souhaite refaire complètement l’en-tête de Discourse.
Le designer de notre entreprise m’a esquissé une telle conception, mais avec l’aide du CSS, je n’ai pas pu l’obtenir.

Cependant, je rencontre un problème pour déplacer le bouton de profil au début. J’ai recherché des sources et trouvé quelque chose dans \app\assets\javascripts\discourse\app\widgets\header.js.
Grâce à cette aide, j’ai pu supprimer les icônes de la production et aller un peu plus loin : [Solved] How to use virtual-dom's "h" helper in <head> for header-dropdown hamburger widget override? + How to override @computed method?

Toutefois, je n’ai pas réussi à déplacer l’élément.
Le forum ressemble actuellement à ceci :

Screenshot_2
Screenshot_2325×100 2.11 KB

Et voici ce dont nous avons besoin : (déplacer le bouton de compte et changer l’icône)
Screenshot_1
Screenshot_1424×108 5.96 KB

Où dois-je chercher pour réaliser cela :

2 « J'aime »
2

Vous pouvez faire quelque chose comme ceci avec 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 « J'aime »
Quick Messages Plugin
3

Merci, c’est très bien.

Une légère modification m’a aidé.

2 « J'aime »
4

Ce sujet a été automatiquement fermé deux jours après la dernière réponse. De nouvelles réponses ne sont plus autorisées.