Tuesday, April 30, 2013

CQ5/AEM How to skin the login page

The Problem

You want to customize the images displayed for the CQ5.5 login page

The Solution

You need to take a copy of the libs/cq/core/content/login node, and copy it to apps/cq/core/content/login.

If you don't already have the following folder structure, create the following by going to localhost:4502/crxde 

Right click on apps, create folder and call it:

right click on the newly created cq folder, and create a new folder named: 

right click on core, and create a content folder

go to /libs/cq/core/content/login, copy the folder, and paste it into your newly created core folder.

You should see the following:

To replace the background of the login page, replace background.png with an image of your choice.

Do the same for all of the relevant background screens.

The images folder contains all of the additional images for the login screen. You can go through these one by one to customize the page.

If your desired customization needs to go further than simply replacing images, you can change the login.css and login_ie.css style sheets.

Further Reading


  1. If i am using CRXDE Lite, How to replace background.png with an image of my choice.?

  2. First of all, I would strongly dissuade you from using CRXDE Lite for development/deployment work, as it lacks code complete, direct integration with a proper code repository, and it's far too easy to lose changes using it in combination with the package manager. It's far better to use Maven and Eclipse to manage your packages.

    If you still have to use CRXDE Light, upload the image to the DAM, and then move it to the relevant location.

    1. Hi Bayani, is there a step by step procedure to use Eclipse with Maven for CQ development? It would be very useful to get going.. Thanks

  3. You can configure Webdav and drop the image into the required directory

  4. That's correct, you can use Webdav, and it's a very good answer if you are moving a lot of files, and you aren't using maven to deploy.

    In a lot of cases in production, however, webdav is disabled, so I have wound up recommending either Maven to be used to drop items such as the background for admin screens, or the DAM if it is content that is to be dropped in by hand.