Background image login page

Developing with Concrete
#1

We had for our client a custom background image at login. We updated to v.9 and for some reason it doesn’t load.

In application/config/concrete.php I have:

<?php

return [
    'white_label' => [
        'background_url' => 'https://mysite.com/loginimages/login_background.svg',
    ],
];

does anybody if that still works or what might be wrong?
Thanks.

#2

May be related?: [9.0.2] Login page forces gray background on custom themes · Issue #10516 · concrete5/concrete5 · GitHub

#3

Thanks for the info. That might be it. But I cannot tell, I have an RC04 version installed - it doesn’t work yet.

#5

I think your code is correct.
I override conrete/single_pages/login.php of v.9.02, then I login with http once (result: no background image) and switch to https, login again an there it is, the desired login image.
I have no idea why, - I found out rather by accident. It’s all very tricky, you have to tinker a lot. Maybe somebody knows why.
Regards Carmel

#6

It’s an older thread I know. But it’s probably helpful since the old way of adding a custom background to the login page does not work anymore.

We found a solution for the custom background-image on the login-page.
You can add the code below that adds some css. Apply the code in the file /application/bootstrap/app.php

Double check that your code (first lines till ) are not indented. This would throw an error. And provide your own url for the image. The example points to unsplash and shows a random image.

Hope this is helping some others.

Events::addListener('on_before_render', function() {
$customCSS = <<<EOT
<style>
    .body-page-login {
        background-color: gold;
        background: url('https://source.unsplash.com/random/1920x1080?nature') no-repeat center center;
        background-size: cover;
    }

    .body-page-login .login-page {
        background: #252525;
    }
    .body-page-login .login-page .btn-primary {
        background: #252525;
        border-color: #252525;
    }
    .body-page-login .login-page-header {
        padding: 25px 0;
    }

</style>
EOT;
    
    // get the current page object
    $c = \Page::getCurrentPage();
    // get one instance of the view object
    $v = \View::getInstance();
    // check that $c is an object before adding the custom CSS
    if (is_object($c)) {
        // get the permissions for the current page
        $cp = new \Permissions($c);
        // if the permissions allow for the page to be viewed, add the custom CSS
        if ($cp->canViewPage()) {
            $v->addFooterItem($customCSS);
        }
    }
});
#7

Thanks @webpresso for this contribution.
Is there also a way to get rid of the background image on the welcome page?
It would be nice to use the same background as on the login page.

#8

Hey adexec
Yes you can add some more css to override the background-image for the welcome-page too. Probably not the best way but it’s working and nothing should break anything. There should be an option as it used to be with whitelabeling.

add these lines to the example above before to the css part:

.ccm-page-background-credit,
.ccm-dashboard-desktop .backstretch .backstretch-item img {
  display: none;
}

.ccm-dashboard-desktop .backstretch .backstretch-item {
  background-image: url('https://source.unsplash.com/random/1920x1080?nature');
}
1 Like
#9

@webpresso this is really great. Thank you for that solution.

1 Like