Atom feed of this document
  

 定制GUI界面

一旦你已经安装了web图形界面程序,你就可以定制它的外观和感觉,从而适应你自身的需求。

[注意]注意

OpenStack web 图形界面,在Ubuntu中默认安装的软件包是openstack-dashboard-ubuntu-theme

如果你不打算使用此默认的主题,你可以使用下面命令来删除它以及相关的依赖:

# apt-get remove --auto-remove openstack-dashboard-ubuntu-theme
[注意]注意

本书聚焦于文件local_settings.py,它存储在/openstack-dashboard/openstack_dashboard/local/目录。

此书摘选自如何为 OpenStack "Horizon" 定制自己的品牌

下列可轻松自定义:

  • 站点颜色

  • Logo

  • HTML 标题

  • 站点品牌链接

  • 帮助URL

 

Logo和站点颜色

  1. 创建两个png格式的logo文件,使用如下大小的透明背景:

    • 登录界面: 365 x 50

    • 登录边框: 216 x 35

  2. 上传新的图片到此位置:/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/

  3. 在此目录下创建一CSS样式表:/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/css/

  4. 根据实际情况更改颜色和图片文件名,相对的目录路径须一致。下面的文件是一个例子,说明了如何定制你的CSS文件:

    /*
    * New theme colors for dashboard that override the defaults:
    *  dark blue: #355796 / rgb(53, 87, 150)
    *  light blue: #BAD3E1 / rgb(186, 211, 225)
    *
    * By Preston Lee <plee@tgen.org>
    */
    h1.brand {
    background: #355796 repeat-x top left;
    border-bottom: 2px solid #BAD3E1;
    }
    h1.brand a {
    background: url(../img/my_cloud_logo_small.png) top left no-repeat;
    }
    #splash .login {
    background: #355796 url(../img/my_cloud_logo_medium.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;
    }
  5. 使用你喜爱的编辑器打开下面HTML模版:filename>/usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html

  6. 添加一行,将你新创建的样式表包含进来。例如custom.css文件:

    ...
        <link href='{{ STATIC_URL }}bootstrap/css/bootstrap.min.css' media='screen' rel='stylesheet' />
        <link href='{{ STATIC_URL }}dashboard/css/{% choose_css %}' media='screen' rel='stylesheet' />
        <link href='{{ STATIC_URL }}dashboard/css/custom.css' media='screen' rel='stylesheet' />
        ...
  7. 重启 Apache:

    Ubuntu中:

    # service apache2 restart

    Fedora, RHEL, CentOS中:

    # service httpd restart

    openSUSE中:

    # service apache2 restart
  8. 要查看你的修改的成果,重新载入web页面即可。如果不满意,再回去修改你的CSS文件。

 

HTML 标题

  1. 设置HTML标题,它会出现在浏览器的顶部,在配置文件local_settings.py中添加下面几行:

                SITE_BRANDING = "Example, Inc. Cloud"
            
  2. 重启Apache服务以使修改生效。

 

HTML 标题

  1. logo也扮演着一个超链接。默认会重定向到horizon:user_home。要修改此,给local_settings.py添加如下属性

    SITE_BRANDING_LINK = "http://example.com"
  2. 重启Apache服务以使修改生效。

 

帮助URL

  1. 默认的帮助URL指向的是http://docs.openstack.org。要变更此地址,在local_settings.py编辑下面属性为你要选择的URL

    'help_url': "http://openstack.mycompany.org",
  2. 重启Apache服务以使修改生效。

Questions? Discuss on ask.openstack.org
Found an error? Report a bug against this page


loading table of contents...