# Custom Logo Issue

**URL:** <https://forum.ansible.com/t/custom-logo-issue/26323>\
**Category:** AWX Project\
**Created:** [December 18, 2017, 7:23pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323 "2017-12-18T19:23:23Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ali\_Kazmi](https://avatars.discourse-cdn.com/v4/letter/a/b4bc9f/32.png) [@Ali\_Kazmi](https://forum.ansible.com/u/Ali_Kazmi)\
**Post date:** [December 18, 2017, 7:23pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/1 "2017-12-18T19:23:23Z")

</div>

I changed the logo via tower settings \> User Interface. However that seemed to only change the logo on the login screen. Once logged in, the angry potato persists in my top left corner of my dashboard. I’d like to change him as well. Any help would be appreciated?

---

<div class="post-metadata">

**Author:** ![AlanCoding](https://sea1.discourse-cdn.com/ansible/user_avatar/forum.ansible.com/alancoding/32/301_2.png) [@AlanCoding](https://forum.ansible.com/u/AlanCoding)\
**Post date:** [December 18, 2017, 8:41pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/2 "2017-12-18T20:41:27Z")

</div>

What you want is in the AWX branding part of the install guide.

[https://github.com/ansible/awx/blob/devel/INSTALL.md#awx-branding](https://github.com/ansible/awx/blob/devel/INSTALL.md#awx-branding)

---

<div class="post-metadata">

**Author:** ![jmitchel](https://sea1.discourse-cdn.com/ansible/user_avatar/forum.ansible.com/jmitchel/32/10148_2.png) [@jmitchel](https://forum.ansible.com/u/jmitchel)\
**Post date:** [December 18, 2017, 8:52pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/3 "2017-12-18T20:52:06Z")

</div>

To add some context...custom logo implementation is coded to only change  
the login modal (true in both AWX and Tower).

The angry potato is basically an indicator that the install process was not  
the standardized one.

---

<div class="post-metadata">

**Author:** ![Ali\_Kazmi](https://avatars.discourse-cdn.com/v4/letter/a/b4bc9f/32.png) [@Ali\_Kazmi](https://forum.ansible.com/u/Ali_Kazmi)\
**Post date:** [December 18, 2017, 8:53pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/4 "2017-12-18T20:53:21Z")

</div>

> I’ve gone over that, however, i’m not looking to use the awx branding logos. I’d like to use a custom logo. I also followed [https://github.com/geerlingguy/awx-container](https://github.com/geerlingguy/awx-container) install guide instead of ansible/awx’s. Although, i’ve installed with both before. So any help on how to load a custom logo to the favicon and dashboard would be helpful.

Cheers

---

<div class="post-metadata">

**Author:** ![jmitchel](https://sea1.discourse-cdn.com/ansible/user_avatar/forum.ansible.com/jmitchel/32/10148_2.png) [@jmitchel](https://forum.ansible.com/u/jmitchel)\
**Post date:** [December 18, 2017, 9:05pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/5 "2017-12-18T21:05:07Z")

</div>

Ah, I understand what you mean now.

That would be an enhancement to the custom logo feature, as it’s current implementation is to only have the logo change in the login modal (and there’s no custom favicon loading supported).

You are welcome to submit a github issue (or pr) in the awx repo for the enhancement to be triaged by our design/product team, though I can think of a deliberate reason why we would not want a custom logo in the nav (the aspect ratios for custom logo in terms of the nav element would need to be optimized for usability in a way it is not now). In other words, there may need to be some feedback and iteration on the proposed enhancement before it is deemed suitable for inclusion in the devel branch.

The quick and dirty solution I can think of is to ssh into the tower server and manually update the files being served as the favicon/nav logo.

---

<div class="post-metadata">

**Author:** ![Ali\_Kazmi](https://avatars.discourse-cdn.com/v4/letter/a/b4bc9f/32.png) [@Ali\_Kazmi](https://forum.ansible.com/u/Ali_Kazmi)\
**Post date:** [December 19, 2017, 3:28pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/6 "2017-12-19T15:28:35Z")

</div>

Do you know where these assets would reside in the tower server??

---

<div class="post-metadata">

**Author:** ![jmitchel](https://sea1.discourse-cdn.com/ansible/user_avatar/forum.ansible.com/jmitchel/32/10148_2.png) [@jmitchel](https://forum.ansible.com/u/jmitchel)\
**Post date:** [December 19, 2017, 7:38pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/7 "2017-12-19T19:38:37Z")

</div>

Hey Ali,  
Top nav partial loads this svg: [https://github.com/ansible/awx/blob/devel/awx/ui/client/lib/components/layout/layout.partial.html#L5](https://github.com/ansible/awx/blob/devel/awx/ui/client/lib/components/layout/layout.partial.html#L5)  
Looks like the static dir (in terms of the ui code) is awx/ui/static: [https://github.com/ansible/awx/blob/devel/awx/ui/build/webpack.base.js#L22](https://github.com/ansible/awx/blob/devel/awx/ui/build/webpack.base.js#L22)  
Looks similar to me (by default) as far as I understand Django settings files: [https://github.com/ansible/awx/blob/devel/awx/settings/defaults.py#L90](https://github.com/ansible/awx/blob/devel/awx/settings/defaults.py#L90)

Note that you might need to exec into the container and run `awx-manage collectstatic` in order for the file to be “picked up” by Django. I’m not sure of the exact steps in terms of the community-supported awx production install to point you to the exact commands.

favicon might be a little more tricky, as those are picked up directly through nginx. I would just replace/put the file at the paths mentioned in these various [files](https://github.com/ansible/awx/search?utf8=%E2%9C%93&q=favicon&type=) I found by searching for favicon.ico.

Also when updating this kind of thing, make sure to do a cache-clear refresh (cmd+shift+r, etc.) instead of a standard refresh, as it might try to pull the static files from cache if they have the same name.

Hope that helps,  
John

---

<div class="post-metadata">

**Author:** ![Steven\_Bateman](https://avatars.discourse-cdn.com/v4/letter/s/779978/32.png) [@Steven\_Bateman](https://forum.ansible.com/u/Steven_Bateman)\
**Post date:** [December 20, 2017, 5:32pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/8 "2017-12-20T17:32:54Z")

</div>

John,

Is there any easy (or not easy) way to override CSS in conjunction with the custom static assets? Doesn’t look like it since it’s pre-complied but wanted to check.

All we’d be looking to do is change the color of the sidebar to distinguish between environments.

Thanks,

-stb

Steven Bateman  
[batemanwork@gmail.com](mailto:batemanwork@gmail.com)

---

<div class="post-metadata">

**Author:** ![jmitchel](https://sea1.discourse-cdn.com/ansible/user_avatar/forum.ansible.com/jmitchel/32/10148_2.png) [@jmitchel](https://forum.ansible.com/u/jmitchel)\
**Post date:** [December 20, 2017, 7:22pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/9 "2017-12-20T19:22:23Z")

</div>

Hey Steven,

Here’s the less variable you can change: [https://github.com/ansible/awx/blob/96c66b1e202381d253f6f57968be9cb92722c8ae/awx/ui/client/lib/theme/\_variables.less#L161](https://github.com/ansible/awx/blob/96c66b1e202381d253f6f57968be9cb92722c8ae/awx/ui/client/lib/theme/_variables.less#L161)  
You’ll need to compile the less.

The less files are compiled using webpack, I bet the awx prod installation uses this one (note that you might have to manually `rm` the flag file before running) [https://github.com/ansible/awx/blob/devel/Makefile#L491](https://github.com/ansible/awx/blob/devel/Makefile#L491)

After this, you will probably need to collectstatic as I explained above.

Let me know if that works,  
John

---

<div class="post-metadata">

**Author:** ![jmitchel](https://sea1.discourse-cdn.com/ansible/user_avatar/forum.ansible.com/jmitchel/32/10148_2.png) [@jmitchel](https://forum.ansible.com/u/jmitchel)\
**Post date:** [December 20, 2017, 7:23pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/10 "2017-12-20T19:23:35Z")

</div>

And to add further context, webpack is ran from an npm script, which can be called from the phony make task I linked to in the make file.

---

<div class="post-metadata">

**Author:** ![Andrew\_Crisp](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Andrew\_Crisp](https://forum.ansible.com/u/Andrew_Crisp)\
**Post date:** [January 4, 2018, 10:12am UTC](https://forum.ansible.com/t/custom-logo-issue/26323/11 "2018-01-04T10:12:23Z")

</div>

Css settings.

High John I note the css settings for the logo on the main login page (awx 1.0.1.173 build) pushes the default awx logo to the top left and outside the login box. Are there any plans to correct the css settings so that I can avoid having to compile my own up and maintain different config from the distribution?

Happy to raise a GitHub issue but thought worth checking first

Andy

---

<div class="post-metadata">

**Author:** ![jmitchel](https://sea1.discourse-cdn.com/ansible/user_avatar/forum.ansible.com/jmitchel/32/10148_2.png) [@jmitchel](https://forum.ansible.com/u/jmitchel)\
**Post date:** [January 4, 2018, 1:36pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/12 "2018-01-04T13:36:02Z")

</div>

Hey Andrew,  
I’m not sure what the issue is exactly, can you upload a screenshot? I’ll have the ux designer on the team take a look,

Thanks,  
John

---

<div class="post-metadata">

**Author:** ![jmitchel](https://sea1.discourse-cdn.com/ansible/user_avatar/forum.ansible.com/jmitchel/32/10148_2.png) [@jmitchel](https://forum.ansible.com/u/jmitchel)\
**Post date:** [January 4, 2018, 5:30pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/13 "2018-01-04T17:30:54Z")

</div>

Hey Andrew,  
I’m still not entirely sure under what context you are seeing the issue, but this is helpful.

If you add a custom logo via the awx settings page within the UI, it should probably be centered or otherwise be placed evenly within the login modal. If not, that’s a bug.

Since the AWX logo has wings around it, it didn’t fit well when bounded within the login modal–that’s why the `--notCustom` modifier pulls it up and outside the bounds of the modal. That class _should_ only be affecting the css for the AWX winged logo though.

> However - .LoginModal-logoImage  
> Sets  
> Max-width: 112px  
> margin: 20px 20px 10px 20px.  
> This results with the image being within the login frame but aligned left.

> With a png file I have tried - (and changing parms in chrome on fly to test) I found that for image I am using the following works well and image centred top in frame  
> max-width: 200px;  
> margin: 20px 20px 10px 130px;

So it seems like that custom logo images are left aligned (within the modal) as opposed to centered. That’s the intentional implementation (I checked with our UX designer). If you want to center them, patching custom css would be the way to go.

If there’s an alignment issue with custom logos being out of the bounds of the modal/overlapping a click target/etc., that’s a bug. A screenshot would help to discern this.

> Also can the inventory be updated to allow for import of custom favicon.ico as well ?

We don’t currently have plans to support adding a custom favicon within the UI. Adding new settings within our settings UI interface is a pretty large task (have to write the API to accept the configuration, API has to go and update the file system, etc.) Again, adding in the files manually on the server would be the way to do it.

Hopefully that clarifies things,  
John

---

<div class="post-metadata">

**Author:** ![jmitchel](https://sea1.discourse-cdn.com/ansible/user_avatar/forum.ansible.com/jmitchel/32/10148_2.png) [@jmitchel](https://forum.ansible.com/u/jmitchel)\
**Post date:** [January 4, 2018, 5:32pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/14 "2018-01-04T17:32:22Z")

</div>

> If you add a custom logo via the awx settings page within the UI, it should probably be centered or otherwise be placed evenly within the login modal. If not, that’s a bug.

Wrote that line before I talked to the UX designer. He said it should be left-aligned, so that should read:

If you add a custom logo via the awx settings page within the UI, it should probably be left-aligned within the bounds of the login modal. If not, that’s a bug.

---

<div class="post-metadata">

**Author:** ![Andrew\_Crisp](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Andrew\_Crisp](https://forum.ansible.com/u/Andrew_Crisp)\
**Post date:** [January 4, 2018, 6:15pm UTC](https://forum.ansible.com/t/custom-logo-issue/26323/15 "2018-01-04T18:15:21Z")

</div>

Ah ok well it is although think it looks better cantered

Andy
