캐스트마이즈 없이 Sitecoreの管理画面の色を変更する

「ローカル環境だと思ってアイテムを編集したら実は本番環境だった😱」 ありません인가? 何度かやらかしました.
本番環境にアクセスしていることが視覚的に分かれば, こんな事故は起きないはずです.
이라고 말하면서, 이의 記事では環境ごとにSitecoreの管理画面の色を変更する方法を紹介します.Sitecoreのカスタマイズは不要です.

こんな感じの画面になります.一目瞭然ですね.

変更方法

お察しの方もいらっしゃるかもしれませんが、Chromeの拡張機能であるStylusを使用します.Stylusを使用すると、特定のURLで任意のCSSを適用する ことができます.
まずはChrome을 拡張機能をInstorlしましょう.Firefox, Opera에서 사용하는 것도 가능합니다.

Stylus - Chrome ウェブストア

Instorl し た ら Stylusの管理画面を開き、左側のmenuーから「新 スタイルを作成」をクrickします.

스타일의 編集画面が表示されるので、まずは適当名前をつけて保存してください.

次に左側のメニューの「Inport」をクrickします.TechistEriaが表示されるので、以下のCSSをコピペして「スタイルを上書き」を選択してください.

@-moz-document url-prefix("http://foo.prod.sc"), domain("bar.prod.sc") {
.sc-globalHeader, .scRibbon .chunk, .scRibbonToolbarStrip {
    background-color: #3765bf;
}

.scRibbon {
    background-color: #1c3e7d;
}

.scRibbon .chunk, .scRibbonToolbarStrip,
.scRibbonNavigatorButtonsActive,
.scRibbonToolbar .scRibbonToolbarStrip {
    background-color: #6b94e1;
}

.sc-applicationContent-main {
    background-color: #c3ddff;
}
}

@-moz-document url-prefix("http://foo.prod.sc/sitecore/login"), domain("bar.prod.identityserver") {
body, .login-outer {
    background: none;
    background-color: #6998ff;
}

.login-page [for='Username']:before, #loginLbl:before {
    content: "【本番環境】 ";
}

.login-page [for='Password']:before, #passLabel:before {
    content: "【本番環境】 ";
}
}

以下のように2つのCSSが読み込まれます.上が管理画面のスタイル、下がlogin画面のスタイルです.



それぞれのスタイルの下部に「適用先」とあるので、上のスタイルに管理画面のURL(드메인)を指定して、下にスタイルにlogin画面のURL(드메인)を指定してくだい.

最後に保存すればおしまいです.実際にSitecoreにアクセスしてみてください.

Sitecore의 イメージカラー의 補色っぽい色を設定していますが、もし色が気に入らなければ適当に変えてください.

それでは、Happy Sitecoring!