Wie kann ich die Reihenfolge der Buttons im Header ändern?

Beitragen UX
1

Hallo zusammen, ich möchte den Header von Discourse komplett überarbeiten.
Der Designer unseres Unternehmens hat mir ein solches Design skizziert, aber mit Hilfe von CSS konnte ich es nicht wirklich umsetzen.

Allerdings habe ich ein Problem damit, den Profil-Button an den Anfang zu verschieben. Ich habe nach Quellen gesucht und etwas gefunden: \app\assets\javascripts\discourse\app\widgets\header.js.
Mit Hilfe dieser Anleitung konnte ich die Icons aus der Produktion entfernen und noch ein wenig mehr anpassen: [Solved] How to use virtual-dom's "h" helper in <head> for header-dropdown hamburger widget override? + How to override @computed method?

Allerdings konnte ich den Button nicht verschieben.
Das Forum sieht derzeit so aus:

Screenshot_2
Screenshot_2325×100 2.11 KB

Und so soll es aussehen: (Account-Button verschieben und Symbol ändern)
Screenshot_1
Screenshot_1424×108 5.96 KB

Wo muss ich ansetzen, um das zu erreichen?

2 „Gefällt mir“
2

Sie können mit CSS so etwas wie Folgendes tun:

.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 „Gefällt mir“
Quick Messages Plugin
3

Danke, sehr gut.

Eine kleine Anpassung hat mir geholfen.

2 „Gefällt mir“
4

Dieses Thema wurde automatisch zwei Tage nach der letzten Antwort geschlossen. Neue Antworten sind nicht mehr möglich.