Author Topic: Background color of login page  (Read 188 times)

Offline timewind

  • Newbie
  • *
  • Posts: 3
Background color of login page
« on: October 22, 2022, 11:15:40 AM »
Hi

How do I change the background color of the login page without any changes occuring elsewhere? Shouldn't this be something the could be set in the "config.inc.php"? As it is now (the latest 1.4 and newer), changes to the file "styles.css" at:

"layout-content{display:flex;flex:6;flex-direction:column;background-color:#fff}html.iframe"

does change the login page background but also changes the color of the mail viewing window the to same color as the login page.

Please help to resolve this issue and any workarounds. The system is FreeBSD 12.x, PHP 7.4.x and Apache 2.4.

Best Regards
Stefan Sundberg


Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,783
    • SKaero - Custom Roundcube development
Re: Background color of login page
« Reply #1 on: October 22, 2022, 12:46:16 PM »
You could just effect the login page by adding a style for ".task-login .layout-content {}" I would also recommend looking handing it as a skin extension https://github.com/roundcube/roundcubemail/wiki/Skins#extending-skins so it doesn't get overwritten with Roundcube upgrades.

Offline timewind

  • Newbie
  • *
  • Posts: 3
Re: Background color of login page
« Reply #2 on: October 22, 2022, 03:01:14 PM »
Hi!

Thank you for your reply even if it is somewhat cryptic. Can you please show us all a working example? It would also be great if this could be incorporated into the configuration file so this work is unnecessary in the future? The logo image could be set there so why not the background color?

Best Regards
Stefan Sundberg

Offline timewind

  • Newbie
  • *
  • Posts: 3
Re: Background color of login page
« Reply #3 on: October 23, 2022, 04:51:55 PM »
Hi

I fixed this by:

1. Installing node and npm.
2. Installed lessc : npm install less -g
3. Added "background-color: #0082c9;" to the less file as below:

.task-login {
    #layout-content {
        text-align: center;
        width: 100%;
        display: block;
        background-color: #0082c9;
    }

    #logo {
        display: inline-block;
        position: relative;
        top: 16vh;
        max-height: 100px;
    }
}

4. Recompiled the style file: lessc styles.less styles.css.

This works on the 1.4.x version at least.