Custom Logo Issue

[Ali Kazmi]

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?

[Alan Rominger]

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

https://github.com/ansible/awx/blob/devel/INSTALL.md#awx-branding

Alan

github: AlanCoding

On Mon, Dec 18, 2017 at 2:23 PM, Ali Kazmi <ali.z...@gmail.com> wrote:

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?

--
You received this message because you are subscribed to the Google Groups "AWX Project" group.
To unsubscribe from this group and stop receiving emails from it, send an email to awx-project+unsubscribe@googlegroups.com.
To post to this group, send email to awx-p...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/awx-project/2c7d4f2f-1bf9-4f6c-8556-f61c580fdd61%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[John Mitchell]

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.

On Mon, Dec 18, 2017 at 2:23 PM, Ali Kazmi <ali.z...@gmail.com> wrote:

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?

--

You received this message because you are subscribed to the Google Groups "AWX Project" group.
To unsubscribe from this group and stop receiving emails from it, send an email to awx-project+unsubscribe@googlegroups.com.
To post to this group, send email to awx-p...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/awx-project/2c7d4f2f-1bf9-4f6c-8556-f61c580fdd61%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

John Mitchell
UI Engineer - Ansible Tower
Ansible by Red Hat

919-394-6667 | ansible.com 

GitHub: jlmitch5

[Ali Kazmi]

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 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 

 

[John Mitchell]

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.

On Mon, Dec 18, 2017 at 3:53 PM, Ali Kazmi <ali.z...@gmail.com> wrote:

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 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 

 

--

You received this message because you are subscribed to the Google Groups "AWX Project" group.
To unsubscribe from this group and stop receiving emails from it, send an email to awx-project+unsubscribe@googlegroups.com.
To post to this group, send email to awx-p...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/awx-project/a52be173-d9f6-4c5f-b2ca-dcf42b83b62d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Ali Kazmi]

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

[John Mitchell]

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
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
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

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 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

On Tue, Dec 19, 2017 at 10:28 AM, Ali Kazmi <ali.z...@gmail.com> wrote:

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

--

You received this message because you are subscribed to the Google Groups "AWX Project" group.
To unsubscribe from this group and stop receiving emails from it, send an email to awx-project+unsubscribe@googlegroups.com.
To post to this group, send email to awx-p...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/awx-project/b406bd11-ee14-4885-bae8-7a1d26a74e9b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Steven Bateman]

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

batem...@gmail.com

On Tuesday, December 19, 2017 at 1:38:39 PM UTC-6, John Mitchell wrote:

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
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
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

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 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

On Tue, Dec 19, 2017 at 10:28 AM, Ali Kazmi <ali.z...@gmail.com> wrote:

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

--
You received this message because you are subscribed to the Google Groups "AWX Project" group.

To unsubscribe from this group and stop receiving emails from it, send an email to awx-project...@googlegroups.com.

To post to this group, send email to awx-p...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/awx-project/b406bd11-ee14-4885-bae8-7a1d26a74e9b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[John Mitchell]

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

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

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

Let me know if that works,
John

To unsubscribe from this group and stop receiving emails from it, send an email to awx-project+unsubscribe@googlegroups.com.

To post to this group, send email to awx-p...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/awx-project/f7680268-a5cb-40f1-a3ae-c0b4256205cb%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[John Mitchell]

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.

[Andrew Crisp]

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

[John Mitchell]

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

--
You received this message because you are subscribed to the Google Groups "AWX Project" group.
To unsubscribe from this group and stop receiving emails from it, send an email to awx-project...@googlegroups.com.
To post to this group, send email to awx-p...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/awx-project/4983b835-9424-45ab-b57f-b3ac54010208%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[John Mitchell]

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

On Thu, Jan 4, 2018 at 9:04 AM, Andrew Crisp <cri...@atonhill.com> wrote:

Hi John - if you install awx using the place holder awx svg logos (ie no official branding) and connect- on the login page  you will see it’s offset top left of login box. 

If I then add a custom logo via the settings menu - it’s better as in the logo now appears in the box but it’s set what almost appears to be left justified.

Looking at the css - 

.LoginModal-logoImage-notCustom has a default margin width of -35px 0px -10px -20px 

This results in it being top left and mostly out of the login frame. Still trying to find where those margin Params originate. - awx/ui/client/src/login/loginModal/loginModal.block.less simply refers to @login-margin

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;

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

If above still not enough info I will try sending screen shot.

Andy

Sent from my iPhone

On 4 Jan 2018, at 13:36, John Mitchell <jmit...@redhat.com> wrote:

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

On Thu, Jan 4, 2018 at 5:12 AM Andrew Crisp <cri...@atonhill.com> wrote:

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

--
You received this message because you are subscribed to the Google Groups "AWX Project" group.

To unsubscribe from this group and stop receiving emails from it, send an email to awx-project+unsubscribe@googlegroups.com.

To post to this group, send email to awx-p...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/awx-project/4983b835-9424-45ab-b57f-b3ac54010208%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

John Mitchell
UI Engineer - Ansible Tower
Ansible by Red Hat

919-394-6667 | ansible.com 

GitHub: jlmitch5

[John Mitchell]

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.

[Andrew Crisp]

Ah ok well it is although think it looks better cantered 

Andy

Sent from my iPhone