环境准备
- 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 %}
<!--solve fixed sidebar problem by gqw-->
<!--主要是增加这个fixed-->
<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 %}">
{# <img class="openstack-logo" src="{% themable_asset 'img/logo.svg' %}" alt="{% site_branding %}">#}
</a>
初步效果图
登陆
界面展示
总结
- 没有对*.py文件进行任何修改
- 所有工作都是在Smalleaf文件夹中进行
- _styles.scss _variables.scss能够完成绝大部分主题颜色修改
- 目前工作仅仅是最简答的修改,系统性的修改,后期会进行