アルム＝バンド Rocket.Chatを使って色々と話をしていると、ルームを作りたくなります。
用件ごとにルームを作っていたら、あっという間に左のサイドバーにずらっとルームが並んでしまいました。
それはそれで仕方のないことなのですが、ルームのアイコンがルーム名の頭文字のアルファベット1文字+背景色(システム固定？)なので、類似色が作成されてしまうと識別が難しくなってきます。
これをどうにか個別のアイコンにできないか、と思いました。
しかし、ユーザのアバターアイコンはプロフィールから変更できるのですが、ルームのアイコンは変更できない模様……。
困ったので、管理者のみが編集できる「カスタムCSS」で無理やり画像を指定するという力業で解決することにしました。
.avatar-image[src*="/avatar/%40ROOM_NAME"] { /* /avatar/%40 までが決め打ちで、その後ろにルーム名(左では「ROOM_NAME」)を記述し、1つ1つのルームに対して個別に指定 */
content: url("/file-upload/XXXXXXXXXXXXXX/FILENAME.png"); /* 適当なルームで画像ファイルをアップロードし、そのパスを指定 */
}このように、.avatar-imageが付与されている画像に対してcontentで画像を上書きするという力業。しかも個別指定のためにsrc属性を使うという……。
ちなみに、パッと見ではルームのアイコンは以下の場所で使用されているようです。
- 通常のサイドバーのルーム一覧
- 検索のサイドバーのルーム一覧
- ディレクトリのルーム一覧
- ルーム内で右上のインフォメーションから開くサイドメニューの中
1.～3.は小さいサイズで表示されますが、最後の4.はかなり大きめに表示されるので、画像サイズはそれなりに大きい方が良さそうです。
また、何故かサイドバーはプロトコル・ドメインからの絶対パスでsrc属性が記述されているのに対し、4.のインフォメーションはドメイン等を省いた/avatar/からの絶対パスで指定されているため、[src*="/avatar/%40ROOM_NAME"]という部分一致の形で指定しています。
カスタムcssで指定することで、上図のようにアイコンを変更することができました。
インフォメーションで開くサイドメニューの方も上書きされました。
一応これで解決……になるのでしょうか？ルームが増えたら個別に追記しないといけないので、もっとスマートな方法があればそうしたいです。