[MainUI] Custom logo and CSS

[tarag]

The problem

It would be great to be able to customise the MainUI look using a custom image instead of the openhab logo in the upper-left corner and also a different color scheme.

Your suggestion

Provide an administrator configuration option to select a file that would be served in conf/html directory for logo and CSS, or use a predefined name.

Your environment

OH3 M2

[hmerk]

What is the purpose of your request. As this is openHABs main UI, it should show the logo.

[kaikreuzer]

I guess the use case is white-labelling - we also had the option for other UIs in the past to add a fragment for customization (own css, assets, etc.). I wouldn't necessarily make it customizable through the UI, but rather statically (like the fragment concept) as the use case is typically for people using it in a commercial context.

Imho not a top prio, but a valid feature request.

[tarag]

That's right, but there is also the case where pure users of openHAB in a house might not be familiar at all about what it is. That's not very meaningful to have the link to the overview page behind this logo. A picture/drawing of the house or some other picture might be more appropriate.

I am not talking about the 'help and about' page where the logo makes more sense of course with the software version.

Concerning the way to do it, of course since it is mostly a one-time modification for a setup, there is no need to have a UI for this but it would be great to be able to do it without rebuilding/patching the distro.

I just thought it would be an easy mod and way to reward through bounty. By the way @kaikreuzer, I could not find a way to add the 'bounty' label to issues in this repo. I have other ideas for more substantial ones...

[kaikreuzer]

That's not very meaningful to have the link to the overview page behind this logo.

Well, it is the common practice for websites that clicking on the logo brings you back to the main page. And showing the openHAB logo here makes it clear that it is openHAB that the user interacts with. But I agree that it is currently pretty huge and not that helpful, especially when in the side menu on a phone:

I'd hence rather tend to reduce the size, but still keep the reference to openHAB in place as a best practice for navigation. But @ghys is our expert here and I'll fully trust in what he thinks can or should be done here.

Wrt CSS, I'd think that this is probably something that could be seen as a "custom theme" addition.

I could not find a way to add the 'bounty' label to issues in this repo.

Good point, that didn't exist here yet, I have just created it. Thanks for making use of the bounty feature!

[ghys]

I'd hence rather tend to reduce the size, but still keep the reference to openHAB in place as a best practice for navigation.

It has undergone different iterations, the Material Design navigation drawer it was loosely designed after at the time featured a very prominent header at the time by default:

But the current ones have more reasonably sized versions - https://material.io/components/navigation-drawer - so it might be worth reconsidering.

Regarding altering the logo/color scheme, we could argue it's a good thing to affirm openHAB's "brand" especially now that it's a self-contained purely community-driven project and doesn't necessarily need to adapt its branding to cater to commercial derivatives. But point taken nonetheless about personal tastes - HABPanel has a similar feature, after all. Don't hold your breath though, I don't see it implemented at least by me before the 3.0 release.

[mstormi]

Hi @splatch @ghys Reading your PR comments I'd think anyone who wants this still needs to compile his own OH pkg - which isn't an option to most people. But since you closed this issue with that PR, could you please also bridge the remaining gap and provide a tutorial how an ordinary (non-dev) user could say replace the main UI logo in his OH installation, just using standard (not any customized) OH code ? Thanks.

[splatch]

@mstormi I am afraid there is no simple way to address this issue. Until GUI gets more clever to load resources/css from a custom location it is a low level resource (classpath) override, just like it was with paper ui. This method require you to deploy additional bundle (module) with extra resources you want to use. It doesn't work and will never work with a filesystem.

I could come with a proposal to fix that in a better way, yet 1) current bounty is far to small to commit my time on it 2) result has to pass a review, so it needs to be first agreed with webui maintainers.

[mstormi]

Ok Yannick I hope you can prove Lukasz wrong ;-) If not please at least reopen this issue as it ain't solved.

[mstormi]

1) current bounty is far to small to commit my time on it 2) result has to pass a review, so it needs to be first agreed with webui maintainers.

Please post your proposal here so @ghys can read & comment (& please reopen this issue, Yannick).

@splatch What would be a bounty you'd accept ? I'd claim it would be pretty beneficial to our common OH project as a whole so just an idea maybe the OH foundation could sponsor that ? (cc @hmerk).

[hmerk]

@mstormi Sorry, the foundation cannot pay into a bounty, as this topic is not inline with our constitution.

[ghys]

I'll reopen the issue but I think the issue is still (at least) partly solved.

As discussed above IMHO replacing the logo is a matter of altering the branding as much as personal preference. If you make a openHAB fork or derivative then #1359 provides you with a great way to change the branding without having to fork the UI code - which is perfectly fine.

If you're a user - or vendor - of the vanilla community-driven openHAB project, however, and just want to get rid of that openHAB branding for whatever reason (and they aren't necessarily always legitimate reasons), then I'm not sure it should be made easy for you. This could open the way for "bootleg" OH installations presented as original solutions with all the problems it could entail.

Just my 2 cents - but I will still review any PR that adds this functionality and eventually merge it, just know that I won't support it.