Horizon 二次开发 - 主题简单修改

环境准备

• ssh 允许root（不安全，但是为了使用pycharm代码提交方便，最简单的方法）登陆
• 修改/etc/ssh/sshd_config 将 PermitRootLogin prohibit-password -> PermitRootLogin yes

• 备份一下目录：

  
  # cp /user/share/openstack_dashboard /user/share/openstack_dashboard.bak
  

• 说明：请开发中间阶段，即使备份，或制作快照，保存本地

pycharm 远程同步/user/share/openstack_dashboard 所有文件
注：使用pycharm登陆服务器，请使用root+passwd 否则会出现上传代码没权限的情况

---

初步修改

• cp /openstack_dashboard/themes/default /openstack_dashboard/themes/smalleaf
• 对openstack_dashboard/setting.py的修改
  

DEBUG=TRUE
....
AVAILABLE_THEMES = [
    (
        'ubuntu',
        pgettext_lazy('Ubuntu theme', 'Ubuntu'),
        'themes/ubuntu'
    ), (
        'default',
        pgettext_lazy('Default style theme', 'Default'),
        'themes/default'
    ), (
        'material',
        pgettext_lazy("Google's Material Design style theme", "Material"),
        'themes/material'
    ),
    (
        'smalleaf',
        pgettext_lazy("Design theme by Longruan", "SmallLeaf"),
        'themes/smalleaf'
    ),
]

这样就能增加了一个SmallLeaf的主题格式，接下来，进行修改Smalleaf内容

themes 文件准备

mkdir ./openstack_dashboard/smalleaf/static
mkdir ./openstack_dashboard/smalleaf/templstes
cp -r ./horizon/templates/auth ./openstack_dashboard/themes/smalleaf/auth
cp -r ./horizon/templates/horizon ./openstack_dashboard/themes/smalleaf/horizon
cp -r ./openstack_dashboard/templates/* ./openstack_dashboard/themes/smalleaf/templates/
cp -r ./openstack_dashboard/static/dashboard ./openstack_dashboard/themes/smalleaf/static/
mv ./openstack_dashboard/themes/smalleaf/_styles.scss ./openstack_dashboard/themes/smalleaf/static/
mv ./openstack_dashboard/themes/smalleaf/_variables.scss ./openstack_dashboard/themes/smalleaf/static/

文件说明

两个非常重要的文件：
_styles.scss ->horizon样式
_variables.scss->全局变量定义

修改部分html

• 修改图标
  themes/smalleaf/auth/_splash.html

{% load themes %}

<div class="text-center">
    <img class="splash-logo" src="{{ STATIC_URL }}themes/smalleaf/img/login_logo.png">
div>

• 固定右侧侧边栏
  themes/smalleaf/horizon/_sidebar.html

{% load horizon i18n %}


<style>.fixed{  position:fixed;  width: 220px;  background:#333744;  height: 100%;}style>
...

• themes/smalleaf/templates/horizon/commen/_sidebar.html

{% load branding horizon i18n %}

<nav id='sidebar' class="fixed">
  {% horizon_nav %}
nav>

• themes/smalleaf/static/_styles.scss

// all this line
@import "dashboard/scss/horizon";

• 修改图标
  themes/smalleaf/teamplates/head/_brand.html

{% load branding %}
{% load themes %}

<a class="navbar-brand" href="{% site_branding_link %}" target="_self">
        <img class="openstack-logo" src="{{ STATIC_URL }}themes/smalleaf/img/head_logo.png" alt="{% site_branding %}">
    {#  #}
a>

初步效果图

• 登陆
  

• 界面展示

总结

1. 没有对*.py文件进行任何修改
2. 所有工作都是在Smalleaf文件夹中进行
3. _styles.scss _variables.scss能够完成绝大部分主题颜色修改
4. 目前工作仅仅是最简答的修改，系统性的修改，后期会进行