摘要：自定義簡單的如果你想自定義啟動界面或頂部導航欄的，你需要在主題的根目錄下創建一個文件夾，將自定義的和圖片放在里面。你可以通過變量來定制頂部導航欄的高度。如果圖片的高度比頂部導航欄的高度小，那么會垂直居中顯示。

本文譯自 openstack-horizon 官方文檔

從 Kilo 版本開始，Horizon 支持通過主題來定制樣式。主題內包含一個 _variables.scss 文件用來覆寫顏色，還有一個 _styles.scss 文件用來添加樣式，這兩個文件在 dashboard 樣式之后加載。

從 Mitaka 版本開始，Horizon 支持配置多個主題給用戶選擇，通過瀏覽器 cookie 記錄用戶設置的主題。默認情況下提供 "default" 和 "material" 兩個標準主題。

主題配置在 local_settings.py 文件的 AVAILABLE_THEMES 變量中，是一個包含 ("name", "label", "path") 的元組。

name
保存在 cookie 中的主題名稱

label
展示在用戶界面列表中的主題名稱

path
包含主題的文件夾路徑，必須是相對于 openstack_dashboard 目錄
的相對路徑或者操作系統的絕對路徑

多主題的例子

  AVAILABLE_THEMES = [
      ("default", "Default", "themes/default"),
      ("material", "Material", "themes/material"),
  ]

單主題的例子

  AVAILABLE_THEMES = [
      ("default", "Default", "themes/default"),
  ]

Dashboard 自定義變量和 Bootstrap 變量都可以被覆寫。在openstack_dashboard/static/dashboard/scss/_variables.scss 這個文件查看所有的 SCSS 變量。

一個自定義主題必須包含 _variables.scss 和 _styles.scss 兩個文件，其中_variables.scss 必須包含所有的 Bootstrap 變量。

自定義主題必須定義 _variables.scss and _styles.scss 中所有的 Bootstrap 變量。你可以從已有的 default 主題繼承這些變量，只覆寫你想要修改的內容，把以下代碼放在自定義主題的 _variables.scss 文件中

   @import "/themes/default/variables";

修改了樣式之后需要重新執行如下命令，重新生成靜態文件 ./run_tests.sh -m collectstatic.

運行 collectstatic 命令時，在 AVAILABLE_THEMES 變量中的所有主題都會重新生成，更新到 static/themes 路徑下，這個目標路徑也可以通過 local_settings.py 中的THEME_COLLECTION_DIR 變量來指定。

以下是一個引用 material 主題中定義的變量的例子

  @import "/themes/material/variables";
  @import "/themes/material/styles";

根據自定義的程度不同，自定義主題的目錄可以是不同的形式，類似 Django 的模板體系一樣引用靜態文件?？梢园?static, templates 和 img 三個子目錄。

如果主題目錄下包含 static 文件夾，則該文件夾會被當做 主題的靜態文件根目錄。例如，Horizon 會在該文件夾下查找 _variables.scss 和 _styles.scss 文件。The contents of this folder will also be served up at /static/custom.

如果主題目錄下包含 templates 文件夾，則該文件夾的路徑會添加到 TEMPLATE_DIRS 元組的前面，這樣主題就可以自定義模板。

在Horizon中，任何 Django 模板都可以被主題覆寫，提供了高度可定制的能力。覆寫的模板必須和被覆寫的模板保持一樣的目錄結構。

例如，如果你要自定義 sidebar，必須把在 templates 目錄下也新建一個 horizon/_sidebar.html 文件，這樣就可以在 { theme_path }/templates/horizon/_sidebar.html 引用中生效。

如果主題的靜態文件根目錄下包含 omg 文件夾，則所有用 {% themable_asset %} 模板標簽引入的圖片都會被覆寫，包括 logo.png, splash-logo.png and favicon.ico，但還不支持覆寫 dashboard/img 下的被 Heat 組件使用的 SVG/GIF 文件。

如果你想自定義啟動界面或頂部導航欄的logo，你需要在主題的 static 根目錄下創建一個 img 文件夾，將自定義的 logo.png 和 logo-splash.png 圖片放在里面。

如果你的 logo.png 的高度比頂部導航欄的高度更大，圖片會被壓縮至導航欄的高度。你可以通過 SCSS 變量 $navbar-height 來定制頂部導航欄的高度。 如果圖片的高度比頂部導航欄的高度小，那么會垂直居中顯示。

Kilo 之前的版本，需要將 Horizon 中的圖片替換成你自己的圖片，或者把樣式表中的圖片指向你的圖片路徑。

如果你想做更多的定制化，可以在主題根目錄下添加 templates/header/_brand.html ，然后修改里面的內容。參考：openstack_dashboard/themes/material/templates/header/_brand.html

啟動界面也可以定制，通過添加 templates/auth/_splash.html 文件實現。參考：openstack_dashboard/themes/material/templates/auth/_splash.html

從 Liberty 版本發布以來，Horizon 嚴格遵守著 Bootstrap 設計規范，努力創造更好的響應式網頁設計，也減輕未來每次版本改變風格的負擔。

以下組件根據版本號排列，充分利用了 Bootstrap 的主題結構

Top Navbar

Side Nav

Pie Charts

Tables

Bar Charts

Login

Tabs

Alerts

Checkboxes

創建品牌化主題的第一步是創建自定義的 Bootstrap 主題。有很多輔助工具，其中包括：

Bootswatchr

Paintstrap

Bootstrap

Bootstrap 使用 LESS 但我們用 SCSS，以上的工具都會提供 
``variables.less`` 文件，需要手動轉換為  ``_variables.scss`` 

現在的 Horizon 的頂部導航欄用 Bootstrap 原生的 navbar。在 _variables.scss 文件的 Navbar 區塊內查看哪些變量可以自定義。

導航欄用了原生的 Bootstrap dropdowns 組件，也可以自定義其中的變量值，參考 _variables.scss 文件中的 Dropdowns 區塊進行自定義。

頂部導航欄可以自適應小屏幕。

側邊欄組件也已經基于原生的 Stacked Pills 元素重構了，參考 _variables.scss 文件中的 Pills 區塊進行自定義。

餅圖由 SVG 元素構成，SVG 元素可以接受基礎的 CSS 的自定義樣式。(例如 colors, size)

Bootstrap 中沒有餅圖的原生元素，所以 Horizon 的圖表樣式是由主題樣式定義。參考 _pie_charts.scss

柱狀圖可以是 Bootstrap Progress Bar 也可以是 SVG 元素，兩種情況都使用了 Bootstrap Progress Bar 的樣式。

SVG 實現的柱狀圖無法自定義高度，所以推薦使用基于 Bootstrap Progress Bar 實現的柱狀圖。

參考 _variables.scss 文件中的 Progress bars 區塊進行自定義樣式，SVG 版的在 _bar_charts.scss 里面自定義。

標準的 Django 表格使用了原生的 Bootstrap table 標簽，參考 _variables.scss 文件中的 Tables 區塊進行自定義。

標準的 Bootstrap 表格是無邊框的，如果想要添加邊框，以 default 主題為例，參考 openstack_dashboard/themes/default/horizon/components/_tables.scss 文件。

登錄頁面使用了標準的 Bootstrap panel 的實現，參考 _variables.scss 文件中的 Panels 區塊進行自定義。

登錄彈窗使用了標準的 Bootstrap dialog，參考 _variables.scss 文件中的 Modals 區塊進行自定義。

Horizon 使用 icon fonts 來實現 checkboxs，只需要覆寫 standard scss 來實現自定義。例如 themes/material/static/horizon/components/_checkboxes.scss。

Bootswatch 是一系列免費的 Bootstrap 主題。Horizon 包含了另一個主題 material，遵循 Google"s Material Design 風格，基于 Bootswatch 的 Paper 主題。

Bootswatch 提供了一系列其他的主題，Horizon 是完全主題化的開發，可以很方便的切換主題、自定義主題。

每次修改主題后，需要手動生成 static 目錄里的內容，然后重啟服務器。如果你不想每次都重啟，可以按如下方式修改 local_settings.py 文件::

COMPRESS_OFFLINE = False
COMPRESS_ENABLED = False

在 local_settings.py 文件添加 SITE_BRANDING 變量來自定義站點標題。

在 local_settings.py 文件添加 SITE_BRANDING_LINK 變量來自定義站點首頁鏈接。

在主題目錄下的 template 文件夾添加 _footer.html 以自定義全局頁腳，添加 _login_footer.html 以自定義登錄頁頁腳。

你可以指定一個自定義的 python 模塊作為 dashboard 或 panel，常見的站點定制需求如下：

從 dashboard 注冊或注銷 panels

修改 dashboard 和 panel 的名稱

對 panel 進行重新排序

默認加載的 panel 在 openstack_dashboard/enabled/ 目錄下，根據文件名順序排序加載。文件名以 .example 后綴結尾的文件是一些示例。開發者和維護者最好也按照這種方式來組織，請不要胡亂覆寫文件和打補丁。

Horizon 使用 Font Awesome 的字體圖標。參閱 Font Awesome_。
使用 icon 屬性給表格添加 Action。例如

    class CreateSnapshot(tables.LinkAction):
        name = "snapshot"
        verbose_name = _("Create Snapshot")
        icon = "camera"

另外，全站的默認按鈕樣式修改，可以在 local_settings.py 文件中的 ACTION_CSS_CLASSES 中添加 class 類。

Horizon 可以自定義 dashboard 的樣式，基礎模板 openstack_dashboard/templates/base.html 中定義的 block 都可以被覆寫。

創建一個 dashboard 的 templates 文件夾，從 Horizon 的基礎模板繼承，例如 openstack_dashboard/dashboards/my_custom_dashboard/templates/my_custom_dashboard/base.html，然后就可以重新定義這個基礎模板中的 block css。（別忘了引入 _stylesheets.html，它包含了 Horizon 的所有默認樣式 ）::

{% extends "base.html" %}

{% block css %}
  {% include "_stylesheets.html" %}

  {% load compress %}
  {% compress css %}
  
  {% endcompress %}
{% endblock %}

自定義的樣式文件放在 dashboard 的 static 目錄下 openstack_dashboard/dashboards/my_custom_dashboard/static/my_custom_dashboard/scss/my_custom_dashboard.scss.

所有的 template 都必須繼承自 dashboard 的基礎模板

    {% extends "my_custom_dashboard/base.html" %}

頁面所有的 js 文件都在 openstack_dashboard/templates/horizon/_scripts.html 模板中引入，這個模板在 base 模板的 block js 中被引用。

在你的 dashboard 中創建一個 ``openstack_dashboard/dashboards/my_custom_dashboard/
templates/my_custom_dashboard/_scripts.html 模板，繼承自 horizon/_scripts.html，在這個模板中覆寫 block custom_js_files``，添加你自己的 javascript 文件

    {% extends "horizon/_scripts.html" %}

    {% block custom_js_files %}
        
    {% endblock %}

在你自己的 dashboard 的基礎模板 openstack_dashboard/dashboards/my_custom_dashboard/templates/my_custom_dashboard/base.html 中覆寫 block js，包含你自己的 _scripts.html

    {% block js %}
        {% include "my_custom_dashboard/_scripts.html" %}
    {% endblock %}

輸出結果是一個包含了 Horizon 和 dashboard 自定義腳本的壓縮文件。

另外，有些分析采集腳本需要在 中加載，這種情況可以在 horizon/_custom_head_js.html 添加。像上文提到的 _scripts.html 做法一樣，直接添加鏈接

也可以把腳本直接拷貝到模板里面::

把你自定義的 Meta 添加到 horizon/_custom_meta.html 文件中，此文件的內容將會被插入到頁面的 里。

Bootswatch: http://bootswatch.com
Bootswatchr: http://bootswatchr.com/create#!
Paintstrap: http://paintstrap.com
Bootstrap: http://getbootstrap.com/custo...
Google"s Material Design: https://www.google.com/design...
Font Awesome: https://fortawesome.github.io...