[kolla] [horizon] Custom logos (WAS: [Openstack-operators] Horizon Custom Logos (Queens, 13.0.1))
We have been using Ubuntu VMs for the control plane until now, so it was a simple matter of inserting our logo-splash.svg and logo.svg into /var/lib/openstack-dashboard/static/dashboard/img/ and then restarting services.
Now we're switching to Kolla, and the relevant path isn't mounted as is the case with the likes of /etc/kolla/horizon and /var/log/kolla. We don't (yet?) build our own container images, so I'm wondering what next.
Did anyone get any further with this?
On 21/8/18 9:28 pm, Nick Jones wrote:
Hi Erich.
Yeah, I battled against this myself quite recently. Here's what I did to add a logo to the Horizon splash page and to the header of each page itself.
Create a file called _splash.html, containing:
<div class="text-center"> <img class="splash-logo" src={% themable_asset "img/logo.png" %}> </div>
And a file called _brand.html, containing:
{% load branding %} {% load themes %}
<a class="navbar-brand" href="{% site_branding_link %}" target="_self"> <img class="openstack-logo" src="{% themable_asset 'img/logo.png' %}" alt="{% site_branding %}"> </a>
I then created a folder called /usr/share/openstack-dashboard/openstack_dashboard/themes/default/templates/auth/ and copied _splash.html into there, copied _brand.html into /usr/share/openstack-dashboard/openstack_dashboard/templates/header/, and finally my 'logo.png' was copied into /usr/lib/python2.7/site-packages/openstack_dashboard/static/dashboard/img/
Note that this approach might differ slightly from your setup, as in my case it's a Kolla-based deployment so these changes are applied to the image I'm using to deploy a Horizon container. But it's the same release (Queens) and a CentOS base image, so in principle the steps should work for you.
Hope that helps.
--
-Nick
On 20 August 2018 at 17:40, Erich Weiler <weiler@soe.ucsc.edu mailto:weiler@soe.ucsc.edu> wrote:
Hi Y'all, I've been banging my head against a wall for days on this item and can't find anything via google on how to get around it - I am trying to install a custom logo onto my Horizon Dashboard front page (the splash page). I have my logo ready to go, logo-splash.png. I have tried following the instructions here on how to install a custom logo: https://docs.openstack.org/horizon/queens/admin/customize-configure.html <https://docs.openstack.org/horizon/queens/admin/customize-configure.html> But it simply doesn't work. It seems this stanza... #splash .login { background: #355796 url(../img/my_cloud_logo_medium.png) no-repeat center 35px; } ...doesn't actually replace the logo (which is logo-splash.svg), it only seems to put my file, logo-splash.png as the *background* to the .svg logo. And since the option there is "no-repeat center", it appears *behind* the svg logo and I can't see it. I played around with those options, removing "no-repeat" for example, and it dutifully shows my logo repeating in the background. But I need the default logo-splash.svg file to actually be gone and my logo to exist in it's place. Maybe I'm missing something simple? I'm restarting apache and memchached after every change I make when I was testing. And because the images directory is rebuilt every time I restart apache, I can't even copy in a custom logo-splash.svg file. Which wouldn't help anyway, as I want my .png file in there instead. I don't have the means to create a .svg file at this time. ;) Help! As a side note, I'm using the Queens distribution via RedHat. Many thanks in advance, erich _______________________________________________ OpenStack-operators mailing list OpenStack-operators@lists.openstack.org <mailto:OpenStack-operators@lists.openstack.org> http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-operators <http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-operators>
OpenStack-operators mailing list OpenStack-operators@lists.openstack.org http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-operators
On Thu, 13 Jan 2022 at 05:19, Gregory Orange gregory.orange@pawsey.org.au wrote:
We have been using Ubuntu VMs for the control plane until now, so it was a simple matter of inserting our logo-splash.svg and logo.svg into /var/lib/openstack-dashboard/static/dashboard/img/ and then restarting services.
Now we're switching to Kolla, and the relevant path isn't mounted as is the case with the likes of /etc/kolla/horizon and /var/log/kolla. We don't (yet?) build our own container images, so I'm wondering what next.
Did anyone get any further with this?
Hi Greg,
Typically what we do is create a theme repository, e.g. https://github.com/stackhpc/horizon-theme. This is then built into the image in /etc/openstack-dashboard/themes/<theme>.
There is another approach proposed which does not involve rebuilding the image, but it is still WIP: https://review.opendev.org/c/openstack/kolla-ansible/+/761364
Mark
On 21/8/18 9:28 pm, Nick Jones wrote:
Hi Erich.
Yeah, I battled against this myself quite recently. Here's what I did to add a logo to the Horizon splash page and to the header of each page itself.
Create a file called _splash.html, containing:
<div class="text-center"> <img class="splash-logo" src={% themable_asset "img/logo.png" %}> </div>
And a file called _brand.html, containing:
{% load branding %} {% load themes %}
<a class="navbar-brand" href="{% site_branding_link %}" target="_self"> <img class="openstack-logo" src="{% themable_asset 'img/logo.png' %}" alt="{% site_branding %}"> </a>
I then created a folder called /usr/share/openstack-dashboard/openstack_dashboard/themes/default/templates/auth/ and copied _splash.html into there, copied _brand.html into /usr/share/openstack-dashboard/openstack_dashboard/templates/header/, and finally my 'logo.png' was copied into /usr/lib/python2.7/site-packages/openstack_dashboard/static/dashboard/img/
Note that this approach might differ slightly from your setup, as in my case it's a Kolla-based deployment so these changes are applied to the image I'm using to deploy a Horizon container. But it's the same release (Queens) and a CentOS base image, so in principle the steps should work for you.
Hope that helps.
--
-Nick
On 20 August 2018 at 17:40, Erich Weiler <weiler@soe.ucsc.edu mailto:weiler@soe.ucsc.edu> wrote:
Hi Y'all, I've been banging my head against a wall for days on this item and can't find anything via google on how to get around it - I am trying to install a custom logo onto my Horizon Dashboard front page (the splash page). I have my logo ready to go, logo-splash.png. I have tried following the instructions here on how to install a custom logo: https://docs.openstack.org/horizon/queens/admin/customize-configure.html <https://docs.openstack.org/horizon/queens/admin/customize-configure.html> But it simply doesn't work. It seems this stanza... #splash .login { background: #355796 url(../img/my_cloud_logo_medium.png) no-repeat center 35px; } ...doesn't actually replace the logo (which is logo-splash.svg), it only seems to put my file, logo-splash.png as the *background* to the .svg logo. And since the option there is "no-repeat center", it appears *behind* the svg logo and I can't see it. I played around with those options, removing "no-repeat" for example, and it dutifully shows my logo repeating in the background. But I need the default logo-splash.svg file to actually be gone and my logo to exist in it's place. Maybe I'm missing something simple? I'm restarting apache and memchached after every change I make when I was testing. And because the images directory is rebuilt every time I restart apache, I can't even copy in a custom logo-splash.svg file. Which wouldn't help anyway, as I want my .png file in there instead. I don't have the means to create a .svg file at this time. ;) Help! As a side note, I'm using the Queens distribution via RedHat. Many thanks in advance, erich _______________________________________________ OpenStack-operators mailing list OpenStack-operators@lists.openstack.org <mailto:OpenStack-operators@lists.openstack.org> http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-operators <http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-operators>
OpenStack-operators mailing list OpenStack-operators@lists.openstack.org http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-operators
-- Gregory Orange
Cloud System Administrator Scientific Platforms Team building representative Pawsey Supercomputing Centre, CSIRO
On 13/1/22 5:06 pm, Mark Goddard wrote:
On Thu, 13 Jan 2022 at 05:19, Gregory Orange gregory.orange@pawsey.org.au wrote:
We have been using Ubuntu VMs for the control plane until now, so it was a simple matter of inserting our logo-splash.svg and logo.svg into /var/lib/openstack-dashboard/static/dashboard/img/ and then restarting services.
Now we're switching to Kolla, and the relevant path isn't mounted as is the case with the likes of /etc/kolla/horizon and /var/log/kolla. We don't (yet?) build our own container images, so I'm wondering what next.
Typically what we do is create a theme repository, e.g. https://github.com/stackhpc/horizon-theme. This is then built into the image in/etc/openstack-dashboard/themes/<theme>.
There is another approach proposed which does not involve rebuilding the image, but it is still WIP: https://review.opendev.org/c/openstack/kolla-ansible/+/761364
Good to know, thank you. For now I have figured out that 'docker cp'ing the files into place works, although of course that doesn't persist across things like reconfigure runs. Curiously though it does persist with a container restart, even though I didn't `commit` the change to the container image.
Cheers, Greg.
On Mon, 17 Jan 2022 at 02:19, Gregory Orange gregory.orange@pawsey.org.au wrote:
On 13/1/22 5:06 pm, Mark Goddard wrote:
On Thu, 13 Jan 2022 at 05:19, Gregory Orange gregory.orange@pawsey.org.au wrote:
We have been using Ubuntu VMs for the control plane until now, so it was a simple matter of inserting our logo-splash.svg and logo.svg into /var/lib/openstack-dashboard/static/dashboard/img/ and then restarting services.
Now we're switching to Kolla, and the relevant path isn't mounted as is the case with the likes of /etc/kolla/horizon and /var/log/kolla. We don't (yet?) build our own container images, so I'm wondering what next.
Typically what we do is create a theme repository, e.g. https://github.com/stackhpc/horizon-theme. This is then built into the image in/etc/openstack-dashboard/themes/<theme>.
There is another approach proposed which does not involve rebuilding the image, but it is still WIP: https://review.opendev.org/c/openstack/kolla-ansible/+/761364
Good to know, thank you. For now I have figured out that 'docker cp'ing the files into place works, although of course that doesn't persist across things like reconfigure runs. Curiously though it does persist with a container restart, even though I didn't `commit` the change to the container image.
Cheers, Greg.
Hello Greg,
When you restart the Horizon container, it keeps running from the existing, modified container image. The container image is only recreated from the pulled image by deploy or reconfigure actions in Kolla. So, if you don't want to use Kolla to build a new image (which I would recommend as you can keep your modifications in version control!), you can `docker commit` your changes into a new image, which you could push to your local registry for redeploying later.
Best wishes, Pierre
participants (3)
-
Gregory Orange
-
Mark Goddard
-
Pierre Riteau