效果图

这里，我们来参照阿里云的登陆页面改一改平台登陆页面，看看效果图吧
阿里云页面(20170710时候的页面)

smaleaf主题修改后的页面

有几分神似，但非专业美工，谈不上美化了，能看ok了。阿里云登陆的那个框是iframe，当然你也可以做一个静态网页，留一个iframe，然后把openstack的login页面嵌入。这里我采用的是直接修改，没有用框架。

注：默认都是在smalleaf里面工作的 “./”代表当前目录是“/usr/share/openstack_dashboard/themes/smalleaf/”目录下
注：制作过程用到了浏览器开发者工具，不断尝试，这是一种笨方法。您大可自己弄一套后台管理页面进行开发
注：smalleaf是default主题拷贝的一个备份，改名为smalleaf，在default基础上进行修改，上一篇博客有大致步骤

静态文件准备

mkdir ./templates/auth/header ->创建存放login-header的存放目录
cp ./templates/header/_header.html ./templates/auth/header/  && cp ./templages/header/_usermenu.html ./templates/auth/header/
cp ./templates/base.html ./templates/auth/ ->这里准备一个base，专门提供login使用。

./template/auth/header/_header.html内容

{% load i18n %}{% spaceless %}<nav class="navbar navbar-default navbar-fixed-top" style="background: #191E21;"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header">{% include "auth/header/_brand.html" %}<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"><span class="sr-only">{% trans "Toggle navigation" %}</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="navbar-collapse"><ul class="nav navbar-nav navbar-right">{% include "auth/header/_user_menu.html" %}</ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>{% endspaceless %}

./templates/auth/header/_user_menu.html内容

{% load i18n %}{% load themes %}{% if not_list %}<div class="dropdown user-menu">{% else %}<li class="dropdown user-menu">{% endif %}<a data-toggle="dropdown" href="#" class="dropdown-toggle" role="button" aria-expanded="false"><span class="fa fa-home"></span><span class="user-name">首 页</span></a>{% if not_list %}</div>{% else %}</li>{% endif %}

./templates/auth/login.html文件内容

{% extends "auth/base.html" %}<!--这里加载的是自己的base-->{% load i18n %}{% block title %}{% trans "云平台 | 登陆" %}{% endblock %}{% block body_id %}splash{% endblock %}{% block content %}<div class='topbar'>{% include "auth/header/_header.html" %}</div>{% include 'auth/_login.html' %}{% endblock %}{% block footer %}{% include '_login_footer.html' %}{% endblock %}

这样，header添加完毕

背景修改

背景使用的是阿里云的那个背景，直接修改./templates/auth/base.html即可

.body-bk {background-color: #1F2325;background-image: url(../img/bk-2880-1280.jpg);background-size: cover;
}
...
<body class="body-bk" id="{% block body_id %}{% endblock %}" ng-app='horizon.app' ng-strict-di>
...
</body>

container 修改

这里需要注意的是，horizon-center要指定一下float:right，然后修改一下style.大概内容为：
./templates/auth/_login_page.html

{% extends 'auth/_login_form.html' %}{% load i18n %}{% block pre_login %}<!--自定义的一个css--><style>.login-welcome {margin-left:7%;margin-right:7%;margin-top:12%;float:left;color:#ffffff;}</style><div class="container login" ><div class="row"><div class="login-welcome " ><h1>xx低门槛快速</h1><br><ul><li>...<li></ul></div><!--div class="col-xs-11 col-sm-8 col-md-6 col-lg-5 horizontal-center"--><div class="col-xs-10 col-sm-7 col-md-5 col-lg-4 horizontal-center" style="margin-top:10%;margin-right: 7%; float: right"><!--div class="col-xs-10 col-sm-7 col-md-5 col-lg-4 col-md-offset-7"-->{{ block.super }}{% endblock %}{% block login_header %}{#  {% include 'auth/_splash.html' %}#}{{ block.super }}{% endblock %}{% block post_login %}{{ block.super }}</div></div></div>{% endblock %}

页脚添加和页眉类似，需要注意一点，当浏览器缩小时，页脚可能会遮住正文内容，而且没有滚动条显示，解决方法为，创建一个空的div，指定个高度

 <div style="height:120px;"></div> <p></p>

./templates/_login_footer.html内容

{% comment %}A simple placeholder template for custom login footer content
{% endcomment %}{% load i18n %}{% spaceless %}<!--这里的空的div 是防止footer遮住正文内容--><div style="height:120px;"></div> <p></p><nav class="navbar navbar-default navbar-fixed-bottom" style="background: #373D41;"><div class="container-fluid"><div id="navbar-collapse"><ul class="nav navbar-nav "><li><a style="float: left"><span>关于我们</span></a><a style="float: left"><span>招贤纳士</span></a><a style="float: left"><span>友情链接</span></a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>{% endspaceless %}

结束语

这里的登陆页面，仍旧没有修改任何py文件，简单的改了下html。权当抛砖引玉，您可以自己准备一套精美的皮肤，大刀阔斧的改吧。但要注意，文件路径要准确，否则加载不了。
openstack horizon 利用回调机制，会从外层向里层调用准备的模板，静态文件等，当外层（比如我的smalleaf主题）含有符合他要求的模板，静态文件等，他就会加载我的文件，没有的他会自己用自己的。horion加载的同一个文件在两个地方都有的情况下回调，先调用openstck目录中的，找不到的情况下会去horizon里面去找。详细的请研究源码吧。

Horizon 二次开发 - 登陆页面修改相关推荐

Revit二次开发之批量修改族名称及族类型名称
昨天是参加工作整一年的好日子,在这一年中逐步开始接触C#和Revit二次开发,困扰和BUG伴随着整个学习过程.由于Revit二次开发的资料和课程不多,很多情况下都是依靠博客.技术贴和QQ群里的大神等方 ...
第十一章：【UCHome二次开发】功能修改
有些功能的修改涉及到了流程或数据需求的变动,这时候简单的修改模板文件已经无法解决问题,而是需要修改对应的流程和数据处理代码来完成.一般处理程序文件位于/source文件夹下.具体的代码修改就是根据功能 ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
Horizon二次开发
注:OpenStack Horizon项目与其它项目有所不同,它主要提供一套工具,我们可以自己定制开发我们想要的dashboard(控制面板). 翻译自:http://docs.openstack.o ...
Revit二次开发—获取并修改指定标高
关注公众号及时获取文章更新 FilteredElementCollector collector = new FilteredElementCollector(doc); List<Elemen ...
利用时间修改工具进行二次开发
利用时间修改工具进行VISSIM二次开发 1.VISSIM430时间修改工具相信大家在使用VISSIM430的过程中对其登录时间的限制不胜其烦,它需要你下一次登录在上一次登录之后.可是,正常人谁会详 ...
二次开发_企业ERP系统二次开发问题的探讨分析
新朋友点上方蓝字"ERP之家"快速关注导读:根据笔者多年在企业中实施及推进ERP,概的实战经验,阐述了ERP系统二次开发的必然性和二次发开的成因及存在的风险,提出如何合理地规避二 ...
开发期间模板引擎页面修改以后，要实时生效 || 登陆成功，防止表单重复提交，可以重定向||只有登录之后才能访问相关的页面
去除模板引擎的缓存 th:if 优先级高于 th:text 登陆成功,防止表单重复提交,可以重定向到主页只有登录之后才能访问相关的页面 login.html <!DOCTYPE html& ...
Guns二次开发（五）：解决Guns v5.1-final 【代码生成】页面数据表列表没有数据的问题
关于博客中使用的Guns版本问题请先阅读 Guns二次开发目录前面的博客中说过,选择Guns做我们的后台管理系统,其中很大一个原因是看中了他的代码生成功能,建议大家先看一下这个演示视频 guns ...

Horizon 二次开发 - 登陆页面修改

效果图

静态文件准备

header 添加

背景修改

container 修改

footer添加

结束语

Horizon 二次开发 - 登陆页面修改相关推荐

最新文章

热门文章