Please login or register to participate.
Wiki Page

Change background image of login screen


How to change background image of the login screen

Login Screen
You need to be a Site Admin to perform this operations

1. Navigate to">ubify_cyninv2theme_styles/banners.css

2. Click on customize

3. Copy the below code block and add it to the bottom of your customized banners.css 


,body.template-login_failed ,body.template-mail_password_form ,body.template-admin-contact-info ,body.template-send_feedback_confirm_admin ,body.template-mail_password_response ,body.template-logged_out ,body.template-pwreset_form ,body.template-pwreset_invalid ,body.template-pwreset_finish ,body.template-join_form ,body.template-getlicense { background: &dtml-cigray2; url("&dtml-portal_url;/login-bg-team.gif") no-repeat right bottom; padding:0; }

4. Navigate to 

5. From dropdown select "Image" and Click "Add"

6. Fill in the details and choose an image from your machine.

Keep in mind to update the banners.css with name of your newly uploaded image 

The current image dimension is width : 2000 x height : 303. This is to accommodate wide screen high resolution displays.



Edit 2011-01-26:


I made it the easy way...

Here is how I made it:


To change the Background-Image of the login-screen

--> /home/cynin/buildout/src/ubify.cyninv2theme/ubify/cyninv2theme/skins/images

- replace the file login-bg-team.gif with one of you pictures


To change the favicon for your browser

--> /home/cynin/buildout/src/ubify.cyninv2theme/ubify/cyninv2theme/skins/icons

- replace the file favicon.ico with one of your icons


I think this is much easier to do than to hack in css-files.

Hope this helps!



Comments (8)
dhiraj Mar 16, 2010 02:05 PM
Hmm... this wiki page needs an update. If we're to use the &dtml-cigray2 codes as is, then banners.css needs some extra stuff at the top and the bottom:
/* <dtml-with base_properties> (do not remove this :) */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */

.... whatever code is in between, here.....

/* </dtml-with> */
deadlines Jan 26, 2011 12:38 AM
Can someone please update this entry that knows how to do this? It's really confusing, and again makes a seemingly simple task unnecessarily complex (my biggest complaint with
alonzob Oct 07, 2011 12:44 AM
I've attempted both methods and still have the default image. There has to be something i'm missing. Ive followed the instructions for both to the T. With editing the banner.css the changes never get saved, I've cleared my browser cache as well as restarted the server still no change. Please help what am I missing???
tmatysiak Oct 07, 2011 11:35 AM
I've simply changed the background image via the following stepes:

go to --> /home/cynin/buildout/src/ubify.cyninv2theme/ubify/cyninv2theme/skins/images

and overwrite the file "login-bg-team.png"
alonzob Oct 08, 2011 12:26 AM
I've done this as well. The issue is where is the "collaboration" verbiage kept??? Also what is the css selector so I can adjust the image size?
alonzob Oct 08, 2011 12:27 AM
And this only changes the images on the home page and not the login screen. I've had no success with changing that. I now these are noob questions but Hey I'm a Noob!
tmatysiak Oct 09, 2011 01:16 AM
Sorry made a mistake in my explanation.
If you do not change the banner.css, the default file for the login-screen background image is login-bg-team.gif. So you have to override that one to get your custom login background-image.
tobym Aug 15, 2012 10:22 AM
Is there any more up-to-date information on image changing?

We'd like to change a few of the images, things like banner-business-team.png, which displays on the first screen after login. I think I've found this one, for example, in portal_skins/images, and I can click the 'Customise' button and seemingly replace (or override, not sure?) it - is that the correct way of changing images?