Custom "branding" of a Yunohost site / look and feel

Hi. Is there any (more or less) easy way of changing the visual look and feel of a Yunohost site?

I mean, to change the colors of the login screens and the user navigation panel, or display the logo and name of the organization that owns the site somewhere.

I know I always can do this by forking the source code, but I aks if is there any way of doing this via configuration only.

Thanks

Hello !

Unfortunately, this is not currently easily doable. This is a topic in the wishlist though (and unfortunately has been in it for a few years now).

You could still locally replace some files in the filesystem somehow to change the logo / css but that’s gonna be overriden by any upgrade of ssowat I guess…

If you are interested (we can provide cookies ! (the eatable ones)) feel free to have a look at how the SSO portal is built. It is not too complicated if you are a bit familiar with web stuff : https://github.com/YunoHost/SSOwat/tree/stretch-unstable/portal

Basically the goal would be to make this “modular” or easily overridable (for instance if somebody put some custom logo/css files in ,say, /etc/ssowat/custom_portal/)

Ok, I see. I currently have very little time for this, but if I find some time i’ll look for it. Thanks for the info.

1 Like

Hi @hirunatan
What exactly you want to change?

Well, I said before:

Basically, I want to use a YunoHost instance as a members intranet for a NGO I belong to, and would like that the dashboard was visually integrated with the public website, with similar color and logos.

All the things you want to change can be changed by editing files that are under /usr/share/ssowat/

Note: On updating Yunohost all the files will be overwritten and you will need to change the files again.

Thanks. Perhaps I may create a script that redo the change after updating (or something like that). This could work until we can make a better way to do this.

I will make a package for it with cron job soon.

3 Likes

Fantastic, thanks

Hello, did you make progress on this?

I am not getting the right time slot to do the app.

Can you do the script?
And give basic details about how it would work?

1 Like

heya, has there been progress in this field? I would be happy if I can change the logo and background colour on the …/yunohost/sso/ login page

and maybe also the little yunohost overlay logo in the bottem-right

c.f. https://yunohost.org/#/theming

(example at the bottom shows how to change the logo in particular)

1 Like

hey @Aleks, here a little feedback.

During installation of YNH the user admin is created and root is disabled. But when I want to change any of the files in /usr/share/ssowat/portal/ I need to be root.

Over SSH this is easy with su. But when connecting over SFTP, this is harder…
Especially when it comes to changing graphical files, it is easier to do so over SFTP as you can edit files directly on the server.

But how do you think I should best approach the problem of the ownership of the files in /usr/share/ssowat/portal/? Can I safely change the owner to admin and start editing? Or should I change the owner always back to root? Or is there another preferred way to edit and change these files while keeping the privileges intact?

Thnx for your thoughts!

1 Like

eeeeeh yeah that’s a good question … I think what we had in mind was mostly that one would just drop/unzip a pre-created theme in there, so not many questions regarding access rights

But if you’re developing your own theme “on the fly” it’s indeed relevant … But honestly I think just chown -R admin /usr/share/ssowat/portal/` is the right way to go, I don’t see any drawback in term of security

1 Like

can the YNH overlay button be disabled?

Well you can probably add a display:none somewhere if you’re fluent with js/css …

1 Like

indeed

	#ynh-overlay-switch {
	  /* FIXME : idk if this is an issue or not to have /yunohost/sso hard-coded here */
	  background-image: url("./logo-ynh.svg");
	  border-color: #eee;
	  background-color: #eee;
	  display:none;
	}
	
	#ynh-overlay-switch:hover {
	  border-color: #ccc;
	  background-color: #ccc;
	  display:none;
	}