Webapp Login Screens customization

Coffee_is_life

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

marty

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

theodorm

@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

marty

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.

theodorm

@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

marty

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.

theodorm

@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…!!!

marty

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

Coffee_is_life

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

marty

@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);

Coffee_is_life

Hello @marty,

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

coffee_is_life

baloan

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

Download the giraffe background loginbg_daybreak.jpg from https://github.com/Kopano-dev/kopano-webapp/tree/4e0309767bd63d9f97566a72052645d6a76b4304/client/resources/images,
copy to /usr/share/kopano-webapp/client/resources/images

vi ./client/resources/css/external/login.css and comment lines 62-63

background: url(../../images/background.svg);
background-size: cover;

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

mcostan

@Coffee_is_life

Hello,

It didn’t quite work (completely) for me.

What happens is that the background picture is now changed, but the sketches on top stayed the same…

Which looks a bit funny since I replaced the image with that of mountains with schetches of drawn people on top.

Is there anyway to remove the blue schetches?

fbartels

@mcostan by now you should use the JSON theme functionality instead of modifying the standard theme.

Coffee_is_life

Hello @mcostan

since after every webapp update the css theme changes back, i put a background-image (called background-webapp.jpg) in the same folder as “loginbg_daybreak.jpg” and “background.svg”.

then i use a script which edit the css:

####  Change the background to Custom Logo ###
##  just a quick sed command ##
## v1.0 by Coffee_is_life ##

## VARS ##
pfad="/usr/share/kopano-webapp/client/resources/css/external"
datei="login.css"
ist_string1="loginbg_daybreak\.jpg"
ist_string2="background\.svg"
soll_string="background-webapp\.jpg"
## /VARS ##

##   SEDS  ###
sed -i "s/$ist_string1/$soll_string/g" $pfad/$datei
sed -i "s/$ist_string2/$soll_string/g" $pfad/$datei


## ENDE ##  -  Kein Log benötigt für so eine kleine aufgabe

this quick sed command works for me like a charm, it replaces the daybreak image and the overlay with my custom bg

best regards
Coffee_is_life

fbartels

@Coffee_is_life with https://kopano.com/blog/new-json-themes-kopano-webapp/ you do no longer need to modify files after each update.

This is also what I am using in https://stash.z-hub.io/projects/K4U/repos/kopano4ucs/browse/webapp

mcostan

thank you both, I will have a look.

michaelschefczyk

For the login page to comply with European laws, it would be good to be able to provide a link to an imprint and a GDPR policy on the login page. Nextcloud is a good example regarding how to solve this. Do you plan to enable that within the theme framework? Otherwise, compliance aware users would have to consider an iframe solution or more complex modifications of the code.

marty

@michaelschefczyk

It would be better to include that in WebApp itself instead of a plugin IMO.

Nextcloud is a good example regarding how to solve this.

How do they solve it?

robgnu

@marty
In the admin-panel you can deposit a link to your imprint and to your data protection policy. At the login-page you can see these links. It’s simple and easy.

Bye
Robert.