OpenStack Horizon How to include custom stylesheets css less

Method 1 (Tested with OpenStack Havana)

===========================

1)

Create a folder for css/less. like,

horizon/openstack_dashboard/static/custom_dashboard/less

2)

Goto that folder and create a css/less file dashboard.less

#cd horizon/openstack_dashboard/static/custom_dashboard/less

#vim dashboard.less

3)

Open _stylesheets.html file and include your stylesheet there.

horizon/openstack_dashboard/templates/_stylesheets.html

{% load compress %}

{% compress css %}

link href='{{ STATIC_URL }}dashboard/less/horizon.less' type='text/less' media='screen' rel='stylesheet' />

link href='{{ STATIC_URL }}dashboard/less/rickshaw.css' type='text/css' media='screen' rel='stylesheet' />

link href='{{ STATIC_URL }}dashboard/less/horizon_charts.less' type='text/less' media='screen' rel='stylesheet' />

link href='{{ STATIC_URL }}custom_dashboard/less/dashboard.less' type='text/less' media='screen' rel='stylesheet' />

{% endcompress %}

link rel="shortcut icon" href="{{ STATIC_URL }}dashboard/img/favicon.ico"/>

4)

Restart apache

#sudo service apache2 restart

Notes:

----------

* In horizon you can find two _stylesheets.html files

a)

horizon/openstack_dashboard/templates/_stylesheets.html

Included in horizon/horizon/templates/base.html

Here, base.html is the base of all dashboard pages.

b)

horizon/horizon/templates/_stylesheets.html

Included in horizon/horizon/templates/splash.html

Here, splash.html is the Login Page.

Method 2 (Tested with OpenStack Havana)

===========================

1)

Create a folder for css/less. like,

horizon/openstack_dashboard/static/custom_dashboard/less

2)

Goto that folder and create a css/less file dashboard.less

#cd horizon/openstack_dashboard/static/custom_dashboard/less

#vim dashboard.less

3)

a)

Goto horizon/horizon/templates

#cd horizon/horizon/templates

b)

Rename "base.html" to "horizon_base.html"

c)

Create a new html file named "base.html" and add following lines.

{% extends 'horizon_base.html' %}

{% block css %}

{% include "_stylesheets.html" %}

{% load compress %}

{% compress css %}

link href='{{ STATIC_URL }}custom_dashboard/less/dashboard.less' type='text/less' media='screen' rel='stylesheet' />

{% endcompress %}

{% endblock %}

4)

Restart apache

#sudo service apache2 restart

Notes:

---------

a)

If you are planning to implement like following link, then you have to edit all dashboard templates

http://docs.openstack.org/developer/horizon/topics/customizing.html

b)

You can also try following method (recomended)

http://docs.openstack.org/grizzly/openstack-compute/install/yum/content/dashboard-custom-brand.html