Folder rename, file rename, flattening of directories
Current folder name New folder name Book title ---------------------------------------------------------- basic-install DELETE cli-guide DELETE common common NEW admin-guide-cloud Cloud Administrators Guide docbkx-example DELETE openstack-block-storage-admin DELETE openstack-compute-admin DELETE openstack-config config-reference OpenStack Configuration Reference openstack-ha high-availability-guide OpenStack High Availabilty Guide openstack-image image-guide OpenStack Virtual Machine Image Guide openstack-install install-guide OpenStack Installation Guide openstack-network-connectivity-admin admin-guide-network OpenStack Networking Administration Guide openstack-object-storage-admin DELETE openstack-security security-guide OpenStack Security Guide openstack-training training-guide OpenStack Training Guide openstack-user user-guide OpenStack End User Guide openstack-user-admin user-guide-admin OpenStack Admin User Guide glossary NEW OpenStack Glossary bug: #1220407 Change-Id: Id5ffc774b966ba7b9a591743a877aa10ab3094c7 author: diane fleming
This commit is contained in:
Diane Fleming
committed by
annegentle
annegentle
parent
f4bb021c6a
commit
64b6c9261e
137
doc/common/section_dashboard_customizing.xml
Normal file
137
doc/common/section_dashboard_customizing.xml
Normal file
@@ -0,0 +1,137 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<section xml:id="dashboard-custom-brand"
|
||||
xmlns="http://docbook.org/ns/docbook"
|
||||
xmlns:xi="http://www.w3.org/2001/XInclude"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" version="5.0">
|
||||
<title>Customize the dashboard</title>
|
||||
<para>Adapted from <link
|
||||
xlink:href="http://www.prestonlee.com/2012/05/09/how-to-custom-brand-the-openstack-horizon-dashboard/"
|
||||
>How To Custom Brand The OpenStack “Horizon”
|
||||
Dashboard</link>.</para>
|
||||
<para>You install the OpenStack dashboard through the
|
||||
<literal>openstack-dashboard</literal> package. You can
|
||||
customize the dashboard with your own colors, logo, and site
|
||||
title through a CSS file.</para>
|
||||
<para>Canonical also provides an
|
||||
<literal>openstack-dashboard-ubuntu-theme</literal>
|
||||
package that brands the Python-based Django interface.</para>
|
||||
<para>The following example shows a customized dashboard with
|
||||
custom colors, logo, and site title:</para>
|
||||
<mediaobject>
|
||||
<imageobject role="fo">
|
||||
<imagedata
|
||||
fileref="figures/Login-OpenStack-Dashboard.png"
|
||||
format="PNG" scale="60"/>
|
||||
</imageobject>
|
||||
<imageobject role="html">
|
||||
<imagedata
|
||||
fileref="figures/Login-OpenStack-Dashboard.png"
|
||||
format="PNG"/>
|
||||
</imageobject>
|
||||
</mediaobject>
|
||||
<mediaobject>
|
||||
<imageobject role="fo">
|
||||
<imagedata
|
||||
fileref="figures/Flavors-TGen-Cloud-Dashboard.png"
|
||||
format="PNG" scale="60"/>
|
||||
</imageobject>
|
||||
<imageobject role="html">
|
||||
<imagedata
|
||||
fileref="figures/Flavors-TGen-Cloud-Dashboard.png"
|
||||
format="PNG"/>
|
||||
</imageobject>
|
||||
</mediaobject>
|
||||
<procedure>
|
||||
<title>To customize the dashboard:</title>
|
||||
<step>
|
||||
<para>Create a graphical logo with a transparent
|
||||
background. The text <literal>TGen Cloud</literal> in
|
||||
this example is rendered through
|
||||
<filename>.png</filename> files of multiple sizes
|
||||
created with a graphics program.</para>
|
||||
<para>Use a 200×27 for the logged-in banner graphic, and
|
||||
365×50 for the login screen graphic.</para>
|
||||
</step>
|
||||
<step>
|
||||
<para>Set the HTML title, which appears at the top of the
|
||||
browser window, by adding the following line to
|
||||
<filename>/etc/openstack-dashboard/local_settings.py</filename>:</para>
|
||||
<para><code>SITE_BRANDING = "Example, Inc.
|
||||
Cloud"</code></para>
|
||||
</step>
|
||||
<step>
|
||||
<para>Upload your new graphic files to the following
|
||||
location:
|
||||
<screen>/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/</screen></para>
|
||||
</step>
|
||||
<step>
|
||||
<para>Create a CSS style sheet in the following directory:
|
||||
<screen>/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/css/</screen></para>
|
||||
</step>
|
||||
<step>
|
||||
<para>Edit your CSS file to override the Ubuntu
|
||||
customizations in the <filename>ubuntu.css</filename>
|
||||
file.</para>
|
||||
<para>Change the colors and image file names as
|
||||
appropriate, though the relative directory paths
|
||||
should be the same. The following example file shows
|
||||
you how to customize your CSS
|
||||
file:<programlisting><?db-font-size 65%?>/*
|
||||
* 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;
|
||||
}</programlisting></para>
|
||||
</step>
|
||||
<step>
|
||||
<para>Open the following HTML template in an editor:
|
||||
<screen>/usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html</screen></para>
|
||||
</step>
|
||||
<step>
|
||||
<para>Add a line to include your
|
||||
<filename>custom.css</filename> file:
|
||||
<programlisting><?db-font-size 65%?>...
|
||||
<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' />
|
||||
<emphasis><link href='{{ STATIC_URL }}dashboard/css/custom.css' media='screen' rel='stylesheet' /></emphasis>
|
||||
...</programlisting></para>
|
||||
</step>
|
||||
<step>
|
||||
<para>Restart apache:</para>
|
||||
<screen os="ubuntu"><prompt>$</prompt> <userinput>sudo service apache2 restart</userinput></screen>
|
||||
<screen os="centos;fedora;rhel"><prompt>$</prompt> <userinput>sudo service httpd restart</userinput></screen>
|
||||
</step>
|
||||
<step>
|
||||
<para>Reload the dashboard in your browser to view your
|
||||
changes.</para>
|
||||
<para>Modify your CSS file as appropriate.</para>
|
||||
</step>
|
||||
</procedure>
|
||||
</section>
|
||||
Reference in New Issue
Block a user