193 lines
7.7 KiB
XML
193 lines
7.7 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<section 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"
|
|
xml:id="dashboard-custom-brand">
|
|
<title>Customize the dashboard</title>
|
|
<para>Once you have the dashboard installed you can customize the way it looks and feels to suit your own needs.</para>
|
|
<note>
|
|
<para>The OpenStack dashboard by default on Ubuntu installs the <literal>openstack-dashboard-ubuntu-theme</literal> package.</para>
|
|
<para>If you do not want to use this theme you can remove it and its dependencies using the following command:</para>
|
|
<screen><prompt>#</prompt> <userinput>apt-get remove --auto-remove openstack-dashboard-ubuntu-theme</userinput></screen>
|
|
</note>
|
|
<note>
|
|
<para>This guide focuses on the <filename>local_settings.py</filename> file, stored in <filename>/openstack-dashboard/openstack_dashboard/local/</filename>.</para>
|
|
</note>
|
|
<para>This guide is 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>The following can easily be customized:
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>Site colors</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>Logo</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>HTML title</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>Site branding link</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>Help URL</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</para>
|
|
<!-- The following diagrams are sized incorrectly and will add back later -->
|
|
<!--<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="40"/>
|
|
</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="40"/>
|
|
</imageobject>
|
|
<imageobject role="html">
|
|
<imagedata
|
|
fileref="figures/Flavors-TGen-Cloud-Dashboard.png"
|
|
format="PNG"/>
|
|
</imageobject>
|
|
</mediaobject>-->
|
|
<procedure>
|
|
<title>Logo and site colors</title>
|
|
<step>
|
|
<para>Create two logo files, png format, with transparent backgrounds using the following sizes:
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>Login screen: 365 x 50</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>Logged in banner: 216 x 35</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>Upload your new images to the following location:
|
|
<filename>/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/</filename>
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
Create a CSS style sheet in the following directory:
|
|
<filename>/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/scss/</filename>
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<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:
|
|
</para>
|
|
<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>
|
|
</step>
|
|
<step>
|
|
<para>Open the following HTML template in an editor of your choice:
|
|
<filename>/usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html</filename>
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>Add a line to include your newly created style sheet. For example
|
|
<filename>custom.css</filename> file:</para>
|
|
<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>
|
|
</step>
|
|
<step>
|
|
<title>Restart Apache:</title>
|
|
<para>On Ubuntu:
|
|
<screen><prompt>#</prompt> <userinput>service apache2 restart</userinput></screen>
|
|
</para>
|
|
<para>On Fedora, RHEL, CentOS:
|
|
<screen><prompt>#</prompt> <userinput>service httpd restart</userinput></screen>
|
|
</para>
|
|
<para>On openSUSE:
|
|
<screen><prompt>#</prompt> <userinput>service apache2 restart</userinput></screen>
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>To view your changes simply reload your dashboard. If necessary go back and modify your CSS file as appropriate.</para>
|
|
</step>
|
|
</procedure>
|
|
<procedure>
|
|
<title>HTML title</title>
|
|
<step>
|
|
<para>Set the HTML title, which appears at the top of the browser window, by adding the following line to
|
|
<filename>local_settings.py</filename>:
|
|
<programlisting language="ini">
|
|
SITE_BRANDING = "Example, Inc. Cloud"
|
|
</programlisting>
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>Restart Apache for this change to take effect.</para>
|
|
</step>
|
|
</procedure>
|
|
<procedure>
|
|
<title>HTML title</title>
|
|
<step>
|
|
<para>The logo also acts as a hyperlink. The default behavior is to redirect to <literal>horizon:user_home</literal>. To change this, add the following attribute to <filename>local_settings.py</filename></para>
|
|
<programlisting language="ini">SITE_BRANDING_LINK = "http://example.com"</programlisting>
|
|
</step>
|
|
<step>
|
|
<para>Restart Apache for this change to take effect.</para>
|
|
</step>
|
|
</procedure>
|
|
<procedure>
|
|
<title>Help URL</title>
|
|
<step>
|
|
<para>By default the help URL points to <link xlink:href="http://docs.openstack.org">http://docs.openstack.org</link>. Change this by editing the following arritbute to the URL of your choice in <filename>local_settings.py</filename></para>
|
|
<programlisting language="ini">'help_url': "http://openstack.mycompany.org",</programlisting>
|
|
</step>
|
|
<step>
|
|
<para>Restart Apache for this change to take effect.</para>
|
|
</step>
|
|
</procedure>
|
|
</section>
|
|
|