Comment 4 for bug 1897805

Hello,

I investigated this issue in depth and realized that the problem is actually the folder structure and poor documentation.

There shouldn't be a need to run collectstatic at all, nor any configuration or commands aside from juju commands.

The reason there is so much confusion around this is that most people are deriving the ubuntu theme but not realizing the mapping to static files is different for the custom theme, as can be seen in [1]. When deriving the ubuntu theme there is no "static" folder, but the mapping requires one, as according to the charm code at [2], the data is being extracted to themes/custom without a "static" folder. The confusion gets even worse because somehow the theme partially works without the "static" folder structure, and when a "static" folder is added, it crashes when loading the theme if all the static contents are not moved there. This required structure is definitely not obvious.

Therefore, the base folder structure should be:

themes/custom/
- static/
- - img/
- - _styles.scss
- - _variables.scss
- - ...
- local_settings.py (optional)

See below the steps to customize the theme correctly:

1) Deploy fresh environment with default settings, and therefore ubuntu theme

2) We are going to derive the custom theme from the ubuntu theme, so:

2a) ssh to an openstack-dashboard unit
2b) mkdir -p custom/static
2c) rsync -vza /usr/share/openstack-dashboard/openstack_dashboard/themes/ubuntu/* custom/static/
2d) edit _variables.scss and change the orange colors to green
2e) edit _styles.scss and change the path of all images as follows:

url("/static/themes/ubuntu/img/image-background-pattern.png") to
url("/static/themes/custom/img/image-background-pattern-custom.png")

url("/static/themes/ubuntu/img/logo-ubuntu-orange.svg") to
url("/static/themes/custom/img/logo-custom-blue.svg")

url("/static/themes/ubuntu/img/logo-ubuntu-white.svg") to
url("/static/themes/custom/img/logo-custom-white.svg")

2f) mv custom/static/img/image-background-pattern.png custom/static/img/image-background-pattern-custom.png

2g) mv custom/static/img/logo-ubuntu-white.svg custom/static/img/logo-custom-white.svg

2h) mv custom/static/img/logo-ubuntu-orange.svg custom/static/img/logo-custom-blue.svg

2i) wget https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/heart.svg

2j) edit custom/static/img/logo-custom-white.svg and replace its contents with the contents from heart.svg, change the fill to #000

2k) edit custom/static/img/logo-custom-blue.svg and replace its contents with the contents from heart.svg, change the fill to #00F

2l) cd custom; tar -czvf custom.tgz static

3) at juju jumphost:

3a) rsync -vza <openstack-dashboard_unit_ip>:~/custom/custom.tgz .

3b) juju config openstack-dashboard custom-theme=true ubuntu-theme=no

watch juju status and wait for unit to be idle

3c) juju attach-resource openstack-dashboard theme=custom.tgz

watch juju status and wait for unit to be idle

4) access horizon and change the theme to custom

5) optionally, change default-theme juju config option to "custom" so it doesn't have to be changed for new users in the future.

juju config openstack-dashboard default-theme=custom

In conclusion, the most important steps are 2b, 2c and 2l, so the structure is correct in the tgz file.

[1] https://github.com/openstack/charm-openstack-dashboard/blob/036a3927aa516912eca0c1c77b86fc3f9d3f8b42/templates/rocky/openstack-dashboard.conf#L7

[2] https://github.com/openstack/charm-openstack-dashboard/blob/036a3927aa516912eca0c1c77b86fc3f9d3f8b42/hooks/horizon_utils.py#L906