5.7.2 Question - login page background

Permalink 2 users found helpful
Hi

How do I remove/change the background image on the login page?

Thanks

Dave

madesimplemedia
View Replies:
Mainio replied on at Permalink Reply
Mainio
Add this to your /application/config/generated_overrides/concrete.php:
return array(
    // ... other stuff here ...
    'white_label' => array(
        'background_image' => 'none',
    ),
    // ... other stuff there ...
);
madesimplemedia replied on at Permalink Reply
madesimplemedia
Excellent, thanks :)
kfog replied on at Permalink Reply
kfog
thanks for this information, - but how do i include my own background image?

thanks in advance.

keith
Mainio replied on at Permalink Reply
Mainio
I don't think there is a setting for that currently (5.7.2). Your only option is to create your own image feed which you point to the 'concrete.urls.background_feed' setting. It needs to follow the same format as the default image feed.

E.g. you can find today's picture from the following URL:
http://backgroundimages.concrete5.org/wallpaper/20141113.jpg...

If you would set the URL in that setting to "//backgroundimage.yoursite.com/wallpaper", it would fetch the image from the following URL:
http://backgroundimages.yoursite.com/wallpaper/20141113.jpg...

With some .htaccess rewrite rules you're able to hack it so that it always displays the same image, although the requested image name changes every day.

In addition, you might want to look into the 'concrete.urls.background_info' setting if you want to change the data displayed on the bottom of the screen. To do that, the respond format of your own URL needs to follow the JSON format of the default data URL, example here for today's picture:
http://backgroundimages.concrete5.org/get_image_data.php?image=2014...
kfog replied on at Permalink Reply
kfog
thx, mainio
i guess i'll stay with the blank login page. i hope it'll be included in a newer version.
kfog
madesimplemedia replied on at Permalink Reply
madesimplemedia
It looks to me like one could make the change to the config above and then set the background via CSS:

.ccm-ui {
background: url('yourimage.jpg');
}
Mainio replied on at Permalink Reply
Mainio
I don't think that works if you want a full page background.
madesimplemedia replied on at Permalink Reply
madesimplemedia
background-size: cover would help scale the background to fit.
Mainio replied on at Permalink Reply 1 Attachment
Mainio
I don't think it makes the element with the .ccm-ui class any bigger. Attached is an example of the login page with a red background applied to the .ccm-ui element.
madesimplemedia replied on at Permalink Reply
madesimplemedia
Ah yes, it does seem to be a bit more complicated than I thought at first.
julehti replied on at Permalink Reply
julehti
On 5.7.3.1 it seems to alter the whole site to blank white! Or do I miss something?

I hope that in the near future we could manage the site and login background in the same way as we did on 5.6.x era.
madesimplemedia replied on at Permalink Reply
madesimplemedia
I get faint white bricks:http://msmdev1.co.uk/index.php/login...
kspitzley replied on at Permalink Reply
kspitzley
One thing to remember with this is to make sure you download the latest version of your application/config/concrete.php file from your web server and edit/re-upload that version, because it may contain changes you made from within your dashboard to some of the site access or registration/login settings. An older local copy of the file might not contain those changes, and they will be overwritten if you upload an older version of concrete.php. I myself forgot to do this, and while it wasn't a big deal to change it back to my preferred settings because I hadn't changed much, it's still better to work with the latest version.

Also, on a general note for future versions of 5.7, being able to change this background image from within the dashboard would be a really good thing. Not everyone is going to be comfortable editing concrete.php...and sometimes an image from the feed is not appropriate for your client (for example, today the image was tequila-themed, and while I personally enjoy tequila, some of my less fun clients would consider that unprofessional).
MrKDilkington replied on at Permalink Reply
MrKDilkington
I agree that dashboard controls for the login background image would be useful. Enabling or disabling the background or setting a custom background image.

In the meantime, you can override login.php.

- copy login.php
concrete\single_pages\login.php
- paste the copy here
application\single_pages\login.php

There are actually two backgrounds.

1. the background image feed
Lines 197 through 219 hold the code that enables the background image feed.
<?php if(Config::get('concrete.white_label.background_image') !== 'none') { ?>
$(function () {
    var shown = false, info;
    $.getJSON('<?php echo Core::getApplicationURL() . '/' . DISPATCHER_FILENAME . '/tools/required/dashboard/get_image_data' ?>', { image: '<?php echo $image ?>' }, function (data) {
        if (shown) {
            $('div.background-credit').fadeIn().children().attr('href', data.link).text(data.author.join());
        } else {
            info = data;
        }
    });
    $(window).on('backstretch.show', function() {
        shown = true;
        if (info) {
            $('div.background-credit').fadeIn().children().attr('href', info.link).text(info.author.join());
        }


2. the white brick background (bg_login.png)
<style>
    body {
        background: url("<?php echo ASSETS_URL_IMAGES ?>/bg_login.png");
    }
</style>


You can comment out both sections of code to disable both images. Without background images, there is a plain white background.

This could be changed with CSS to add a color.
<style>
    body {
        /*background: url("<?php echo ASSETS_URL_IMAGES ?>/bg_login.png");*/
        background: #8D8989;
    }
</style>

You could also add a custom background image.
<script>
    $(document).ready(function() {
        $.backstretch('http://upload.wikimedia.org/wikipedia/commons/1/10/Hot_pizza.jpg');
    });
</script>

- this adds a family friendly image
madesimplemedia replied on at Permalink Reply
madesimplemedia
Very useful to know thanks :)
jpcharrier replied on at Permalink Reply
jpcharrier
Hey this has all changed with the latest releases (as of 5.7.5). Does anyone know how to successfully override the default white bricks in the background and use NO IMAGE AT ALL and replace with a colour?

I know its possible to declare this with CSS, but I would like it to be overridden at the start.

I note in /concrete/bootstrap/configure.php lines 269 & 276....
/**
 * ----------------------------------------------------------------------------
 * Configuration values that cannot be overridden
 * ----------------------------------------------------------------------------
 */
/* -- Appearance -- */
define('VIEW_CORE_THEME', 'concrete');
define('VIEW_CORE_THEME_TEMPLATE_BACKGROUND_IMAGE', 'background_image.php');


Peering into /concrete/themes/concrete/background_image.php shows the lines you have relating to the bg_login.png file.

My question is how do you override 'background_image.php' in a new theme to cancel this out?
ob7dev replied on at Permalink Reply
ob7dev
To override the white bricks, open:
/concrete/themes/concrete/background_image.php

Body bg style is set in header like so:

<style>
body {
background: url("<?php echo ASSETS_URL_IMAGES ?>/bg_login.png");
}
</style>

You can edit the BG file from there. Example, to make the BG a blue radial gradient:

<style>
body {
/*background: url("<?php echo ASSETS_URL_IMAGES ?>/bg_login.png");*/
background: rgb(30,87,153);
background: -moz-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
height: 100vh;
}
</style>

Make sure you've turned off daily BG image first, add:
'white_label' => array(
'background_image' => 'none',
),
to /application/config/generated_overrides/concrete.php
As described in an answer above.
MarcYBB replied on at Permalink Reply
MarcYBB
There is a free add-on in the marketplace... but it is rated for 5.7.5.+

https://www.concrete5.org/marketplace/addons/mrkdilkington-login-pag...

I installed it and it works like a charm.

The best part it is free.
MarcYBB replied on at Permalink Reply
MarcYBB
There is a free add-on in the marketplace... but it is rated for 5.7.5.+

https://www.concrete5.org/marketplace/addons/mrkdilkington-login-pag...

I installed it and it works like a charm.

The best part it is free.
TrinityBob replied on at Permalink Reply 1 Attachment
Hi,

Assuming you are using c5.7, navigate to the dashboard, go to System and Settings, then under Basics there is a subitem called 'Login Page Background' which can be changed to whatever you need. In my case i have used the same background currently being used as my website background.

I have attached a screenshot of my dashboard showing the item you are looking for.

Hope it solves the problem for you.
mason203 replied on at Permalink Reply
if you are using win 10:
Windows 10 allows you to change the lock screen background, but the login screen background always features the default Windows 10 background. Use these tweaks and you can set any image or color you want as the background.

This changes the image that appears on the sign-in screen after you leave your lock screen. On Windows 8 and 8.1, this was just a flat-color background. The trick for changing Windows 7’s login screen background no longer works the same way on Windows 10.