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.
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")
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 openstack- dashboard/ openstack_ dashboard/ themes/ ubuntu/ * custom/static/
2b) mkdir -p custom/static
2c) rsync -vza /usr/share/
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 themes/ custom/ img/image- background- pattern- custom. png")
url("/static/
url("/static/ themes/ ubuntu/ img/logo- ubuntu- orange. svg") to themes/ custom/ img/logo- custom- blue.svg" )
url("/static/
url("/static/ themes/ ubuntu/ img/logo- ubuntu- white.svg" ) to themes/ custom/ img/logo- custom- white.svg" )
url("/static/
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/036a3927aa 516912eca0c1c77 b86fc3f9d3f8b42 /templates/ rocky/openstack -dashboard. conf#L7
[2] https:/ /github. com/openstack/ charm-openstack -dashboard/ blob/036a3927aa 516912eca0c1c77 b86fc3f9d3f8b42 /hooks/ horizon_ utils.py# L906