ヘッダーのボタンの順序を変更するにはどうすればよいですか？

貢献 UX
1

みなさんこんにちは。Discourse のヘッダーを完全に作り直したいと考えています。
当社のデザイナーがこのようなデザインの下書きをくれましたが、CSS を使っても思うようにいかず、

しかし、プロフィールボタンを先頭に移動させる問題に直面しました。ソースを検索して、\app\assets\javascripts\discourse\app\widgets\header.js というファイルを見つけました。
この情報を活用して、本番環境からアイコンを削除することができ、さらに詳しくは [Solved] How to use virtual-dom's "h" helper in <head> for header-dropdown hamburger widget override? + How to override @computed method? を参考にしました。

それでも移動させることはできませんでした。
現在のフォーラムの見た目は以下の通りです：

Screenshot_2
Screenshot_2325×100 2.11 KB

目指すべき見た目はこれです（アカウントボタンを移動し、アイコンを変更）：

Screenshot_1
Screenshot_1424×108 5.96 KB

これを行うためにどこを調査すればよいでしょうか：

「いいね！」 2
2

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
Quick Messages Plugin
3

ありがとうございます、とても良いです。

少し変更を加えることで、私の場合うまくいきました。

「いいね！」 2
4

このトピックは、最後の返信から 2 日後に自動的に閉鎖されました。新しい返信は受け付けていません。