【Activeadmin超入門】デザイン・スキン変更 〜おまけ〜

複数の管理画面をactiveadminで使用している場合は
間違わないようにするために、できれば違うデザインを反映させたいところ。

ここではActiveadminで使用できるスキンである「ActiveSkin」を紹介する。

github.com

１）インストール

gem 'active_skin'

２）SCSSファイル変更

active_admin.css.scss内に「@import "active_skin";」を入れるだけ。

# active_admin.css.scss

@import "active_admin/mixins";
@import "active_admin/base";
...
@import "active_skin";
...

３）ロゴ変更

デフォルトだと「RST ADMIN」というロゴが入る。

この箇所のロゴを変えたいときは、２）のSCSSに@importしたすぐ上に
「$skinLogo: url("admin_logo.png") no-repeat 0 0;」を入れてあげれば良い。
※admin_logo.pngは任意の画像パス
画像は160×40で内で作ればよいっぽい。

# active_admin.css.scss

@import "active_admin/mixins";
@import "active_admin/base";
...
$skinLogo: url("admin_logo.png") no-repeat 0 0;
@import "active_skin";
...

４）基本色の変更

基本色の変更も可能。
同じように@importの前にsassの変数を入れる。

# active_admin.css.scss

@import "active_admin/mixins";
@import "active_admin/base";
...
$skinActiveColor: #001cee;
$skinHeaderBck: #002744;
$panelHeaderBck: #002744;

@import "active_skin";
...