OpenStack Horizon Dashboard How to customize header sidebar and stylesheet

OpenStack Horizon Dashboard How to customize header sidebar and stylesheet

A)

Existing Code

==========

1)
I could see two _header.html in Openstack Havana horizon projects

a)
horizon/openstack_dashboard/templates/_header.html
This "_header.html" contains username, Settings, Help and Signout links.

{% load i18n %}
{% load url from future %}

  {% blocktrans with username=request.user.username %}Logged in as: {{ username }}{% endblocktrans %}
  {% trans "Settings" %}
  {% if HORIZON_CONFIG.help_url %}
  {% trans "Help" %}
  {% endif %}
  {% trans "Sign Out" %}
  {% include "horizon/common/_region_selector.html" %}

b)
horizon/horizon/templates/_header.html
I don't know, where we using this "_header.html" template.

2)
horizon/horizon/templates/base.html
* The "horizon/openstack_dashboard/templates/_header.html" is included in the "base.html".
* The "horizon/horizon/templates/horizon/common/_sidebar.html" is included in the "base.html".

{% load branding i18n %}

DOCTYPE html>
html>
  head>
    meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    title>{% block title %}{% endblock %} - {% site_branding %}

    {% comment %} Load CSS sheets before Javascript  {% endcomment %}
    {% block css %}
      {% include "_stylesheets.html" %}
    {% endblock %}
    {% include "horizon/_conf.html" %}
    {% include "horizon/client_side/_script_loader.html" %}
  /head>
  body id="{% block body_id %}{% endblock %}">
    {% block content %}
      div id="container">
        {% block sidebar %}
          {% include 'horizon/common/_sidebar.html' %}
        {% endblock %}
        div id='main_content'>
          div class='topbar'>
          {% include "_header.html" %}
          {% block page_header %}{% endblock %}
          /div>
          {% include "horizon/_messages.html" %}
          {% block main %}{% endblock %}
        /div>
      /div>
    {% endblock %}
    div id="footer">
      {% block footer %}{% endblock %}
    /div>
    {% block js %}
      {% include "horizon/_scripts.html" %}
    {% endblock %}
    div id="modal_wrapper" />
  /body>
/html>

3)

B)
Customized Code
===========

1)
Create a new folder like
horizon/horizon/templates/custom_cloud/common/

2)
Copy existing "_header.html" from horizon/openstack_dashboard/templates/ to
horizon/horizon/templates/custom_cloud/common/

3)
Copy existing "_sidebar.html" from horizon/horizon/templates/horizon/common/ to
horizon/horizon/templates/custom_cloud/common/

4)
So you copied two html files to new folder
horizon/horizon/templates/custom_cloud/common/_header.html
horizon/horizon/templates/custom_cloud/common/_sidebar.html

5)
* First take a copy of horizon/horizon/templates/base.html and rename to
horizon/horizon/templates/base.html.backup.

* Then edit the original horizon/horizon/templates/base.html and update with following lines
{% include "custom_cloud/common/_sidebar.html" %}
{% include "custom_cloud/common/_header.html" %}

6)
Modify "custom_cloud/common/_sidebar.html" and "custom_cloud/common/_header.html"
based on your requirement.

7)
How to Modify CSS
http://fosshelp.blogspot.in/2014/02/openstack-horizon-how-to-include-custom.html