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


  • Kopano

    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


  • Kopano

    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


  • Kopano

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


  • Kopano

    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


  • Kopano

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



  • @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?


  • Kopano

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



  • 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


  • Kopano

    @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



  • thank you both, I will have a look.



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


  • Kopano

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


Log in to reply