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
How do I remove/change the background image on the login page?
Thanks
Dave
Add this to your /application/config/generated_overrides/concrete.php:
Excellent, thanks :)
thanks for this information, - but how do i include my own background image?
thanks in advance.
keith
thanks in advance.
keith
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...
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...
thx, mainio
i guess i'll stay with the blank login page. i hope it'll be included in a newer version.
kfog
i guess i'll stay with the blank login page. i hope it'll be included in a newer version.
kfog
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');
}
.ccm-ui {
background: url('yourimage.jpg');
}
I don't think that works if you want a full page background.
background-size: cover would help scale the background to fit.
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.
Ah yes, it does seem to be a bit more complicated than I thought at first.
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.
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.
I get faint white bricks:http://msmdev1.co.uk/index.php/login...
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).
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).
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.
2. the white brick background (bg_login.png)
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.
You could also add a custom background image.
- this adds a family friendly 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()); }
Viewing 15 lines of 21 lines. View entire code block.
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
Very useful to know thanks :)
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....
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?
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?
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.
/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.
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.
https://www.concrete5.org/marketplace/addons/mrkdilkington-login-pag...
I installed it and it works like a charm.
The best part it is free.
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.
https://www.concrete5.org/marketplace/addons/mrkdilkington-login-pag...
I installed it and it works like a charm.
The best part it is free.
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.
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.
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.
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.