Webapp Login Screens customization

Hi,

is there a possibility to change the background picture and the Logo for the Login Screen.

Best Theo

Hi,

if you load the Webapp via Firefox and you press F12, you see the console and the loaded items.

You should see a picture loading called “loginbg_daybreak.jpg” at location “<server>/webapp/client/resources/images/loginbg_daybreak.jpg” - you can change the image behind this :)

I replaced the picture with another one (same resolution).

Cant find another way to do this - but this works :)

Coffee_is_Life

Hi theodorm, Hey Coffee_is_life,

Alternatively you could make a theme and make it the default theme for your customers. That will be better with upgrading WebApp etc.
Checkout https://stash.kopano.io/projects/KWA/repos/themeexample/browse

@marty
Sounds good marty…and thank you…

How we can make this then default (also under univention) and in which folder the theme should be stored.
If we only want change the Logo and Background picture, do we need all the files from the example?

Best Theo

The default theme can be set in WebApp’s config.php. Here:
https://stash.kopano.io/projects/KW/repos/kopano-webapp/browse/config.php.dist#80

The theme needs to be added to the plugin directory of webapp. Usually
/usr/share/kopano-webapp/plugins/

As for the folders:
You’ll need a css folder and file (without a folder named “css” the theme is not picked up).
Technically you can store the new background image wherever you want, but adding it to a img folder is cleaner.

There are a lot of comments in the theme.css and and theme.js that explains it all.
https://stash.kopano.io/projects/KWA/repos/themeexample/browse/css/theme.css
https://stash.kopano.io/projects/KWA/repos/themeexample/browse/js/Theme.js

It might be easier / faster if you simply clone this repository and start customizing the theme.

@marty
Thank you so much marty, this works perfect…
The only thing I cant find is, how I change Welcome to other text or other Language.
I can see with insepct that this comes from a html file but I can’t find them…sorry…
Other thing where can I change that also for the Webapp after the Login the example theme is loaded for all and where can I change the name of the Theme, at the moment I can see in the configuration menu of the Webapp only Example Theme.

Best Theo

Hi Theo,

There is a way to ‘change’ the welcome text.
For example:

  • Change the font-size to 0px in the element in the <h1> tag where “welcome” is shown ("!important" must be added).
  • Create a new element for the “<h1>” tag. Example:
    "h1::before" and add this:
content: "The text you want to display"
font-size: "Your font-size" (don't forget "!important" again).

Make sure you only change it within the welcome screen.

Name of the theme should be changed in the js file. Please read the comments in that file.
In WebApp’s config.php you should set this theme as default theme. New users will see your theme as default, but if someone has another setting (so another theme) set, his setting won’t be changed of course. This can be changed with for example python-kopano.

@marty said in Webapp Login Screens customization:

  • Change the font-size to 0px in the element in the <h1> tag where “welcome” is shown ("!important" must be added).
  • Create a new element for the “<h1>” tag. Example:
    "h1::before" and add this:

Excuse me for being so cumbersome, but I have to ask again…(all other changes working)
In which file you changed this.

And because we’re at it, is it possible to change all this things also in the Deskapp?
If yes, should I open a new Threat?

Best Theo

PS: Can I spend you a Beer? Always great work…!!!

Hi Theo,

You can create a css file and add the changes there. These changes will overwrite existing css if !important is added.

in DeskApp the language shown in the login page is based on your OS language.
I’ve made a ticket to change this: https://jira.kopano.io/browse/KD-235. When that’s possible you can most likely use that setting in combination with https://jira.kopano.io/browse/KD-6.

The text itself cannot be changed for all users.

Perhaps we can meet up at the conference (https://kopano.com/conference/) and you can buy me a beer there ;)

Hello Forum,

i know this is an old post, but i got another question for custimazition:

is there a way to force all users to use a theme, installed under plugins?
i found settings to set it as default, but if a user changes this theme its user-based loaded.

setting “always enabled plugins” seems not to work with themes…

coffee_is_life

@Coffee_is_life That’s correct. It was designed this way.

There is no fancy way to fix this I’m afraid.

Maybe you can check if you can override the setting before it’s loaded.
container.getSettingsModel().set(‘zarafa/v1/main/active_theme’, your_plugin);

Hello @marty,

thanks for the hint, but i’ve got another question:
in which file i can/should put this line?

coffee_is_life

To restore the old giraffe background you need to take the following steps (it’s monkey pathcing so you have to repeat after an update):

That’s it, worked for me. WebApp 3.4.13.1441+812.1 on ubuntu 16.0.4.