Red Hat Summit第5章 Dashboard のカスタマイズ
OpenStack Dashboard をインストールしたら、そのルックアンドフィールを独自のニーズに合わせてカスタマイズできます。ここでのカスタマイズオプションは、/openstack-dashboard/openstack_dashboard/local/ に保存されている local_settings.py ファイルに含まれる設定に焦点を当てています。
デフォルトでは、OpenStack Dashboard は openstack-dashboard-theme パッケージをインストールします。
このテーマを使用しない場合は、次のコマンドを使用してそのテーマとその依存関係を削除できます。
# rpm -e --nodeps openstack-dashboard-theme
ダッシュボードの以下の要素をカスタマイズできます。director のデプロイメントでは、heat-admin として各コントローラーノードにログインして変更を加える必要があります。
- ロゴ
- サイトの色
- HTML タイトル
- サイトのブランディングリンク
- ヘルプの URL
- スタイルシート
ロゴおよびサイトの色：
以下のサイズの透過的な背景を持つ png 形式で 2 つのロゴファイルを作成します。
- ログイン画面（例：login_logo.png）: 365 x 50
- ログインバナー（例：banner_logo.png）: 216 x 35
-
新しいイメージを
/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/の場所にアップロードします。 -
/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/scss/ディレクトリーに SCSS スタイルシートを作成します。 必要に応じて色とイメージのファイル名を変更します。相対ディレクトリーパスは同じである必要があることに注意してください。以下のサンプルファイルは、SCSS ファイルをカスタマイズする方法を示しています。
/* * New theme colors for the dashboard that override the defaults: * dark blue: #355796 / rgb(53, 87, 150) * light blue: #BAD3E1 / rgb(186, 211, 225) */ h1.brand { background: #355796 repeat-x top left; border-bottom: 2px solid #BAD3E1; } h1.brand a { background: url(../img/login_logo.png) top left no-repeat; } #splash .login { background: #355796 url(../img/banner_logo.png) no-repeat center 35px; } #splash .login .modal-header { border-top: 1px solid #BAD3E1; } .btn-primary { background-image: none !important; background-color: #355796 !important; border: none !important; box-shadow: none; } .btn-primary:hover, .btn-primary:active { border: none; box-shadow: none; background-color: #BAD3E1 !important; text-decoration: none; }-
任意のエディターで以下の HTML テンプレートを開きます：
/usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html 新しく作成されたスタイルシートを含める行を追加します。たとえば、
custom.scssファイルの場合：<link href='bootstrap/css/bootstrap.min.scss' media='screen' rel='stylesheet' /> <link href='dashboard/css/{% choose_scss %}' media='screen' rel='stylesheet' /> <link href='dashboard/css/custom.scss' media='screen' rel='stylesheet' />- Apache サーバーを再起動します。
# # systemctl restart httpd
- 変更を表示するには、ダッシュボードを再読み込みするだけです。必要に応じて、戻って SCSS ファイルを変更します。
HTML Title:
ブラウザーウィンドウの上部に表示される HTML タイトルを設定するには、以下の行を
local_settings.pyに追加します。SITE_BRANDING = "Example, Inc. Cloud"
- Apache サーバーを再起動します。
サイトブランディングリンク：
ロゴはハイパーリンクとしても機能します。デフォルトの動作では、
horizon:user_homeにリダイレクトされます。これを変更するには、目的の URL ターゲットを持つ以下の属性をlocal_settings.pyに追加します。SITE_BRANDING_LINK = "http://example.com"
- Apache サーバーを再起動します。
ヘルプの URL:
デフォルトでは、ヘルプ URL は https://access.redhat.com/documentation/ja-JP/Red_Hat_Enterprise_Linux_OpenStack_Platform/7/index.html を参照します。
local_settings.pyで選択した URL の以下の属性を編集して、ヘルプ URL を変更できます。'help_url': "http://openstack.mycompany.org",
- Apache サーバーを再起動します。
カスタムスタイルシート：
ダッシュボードのカスタムスタイルシートを定義できます。ダッシュボードのベーステンプレート openstack_dashboard/templates/base.html は、上書きできる複数のブロックを定義します。特定のダッシュボードにのみ適用されるカスタムの SCSS ファイルを定義するには、ダッシュボードの templates フォルダーにベーステンプレートを作成し、ダッシュボードのベーステンプレートを拡張します。
例： openstack_dashboard/dashboards/my_custom_dashboard/templates/my_custom_dashboard/base.htmlこのテンプレートでは、ブロック CSS を再定義できます。
{% extends 'base.html' %}
{% block css %}
{% include "_stylesheets.html" %}
{% load compress %}
{% compress css %}
<link href='{{ STATIC_URL }}my_custom_dashboard/scss/my_custom_dashboard.scss' type='text/scss' media='screen' rel='stylesheet' />
{% endcompress %}
{% endblock %}
ダッシュボードのすべてのデフォルトのスタイルシートを含む _stylesheets.html を含めることを忘れないでください。
