Change the Default AEM background to reflect your company's branding

Let us personalize our AEM

Ever wondered how to make your version of AEM fit the branding of your company? Well, it's not rocket science and I will show you how:

There are two ways to do this.. 

1) Changing the login component itself:

Default AEM login screen is rendered using the login component located at - /libs/cq/core/components/login path. If you need to change anything in login UI, you need to overlay this structure and make changes as desired. One such use case is changing the background image of the default login page.

Look at the following file in CRXDE Lite - /libs/cq/core/components/login/login.jsp

You will see that the background image is defined here:

If you just want to change the background image then overlay the path - /libs/cq/core/content/login/bg/background.png for your project. and place your background.png in the overlaid location in /apps/.

2) Changing the default images. 

For this exercise you would need to open CyberDuck. (I have covered in a previous post how to download and install CyberDuck) 

Within this method there are two options: 

2.1) One to copy the /libs/cq/core/content/login folder and paste it in your apps section. This option allows you to overlay the component and change the background image in the apps folder.  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: gq
• Right click on the newly created cq folder, and create a new folder named: core
• 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.

Once you have done this and you have your new design ready, use CyberDuck as the FTP program and copy and replace the image in the apps folder. Sign out of AEM, and refresh your browser. You will then see the new image. 

2.1) Be careful with the following method, as you will change the core background images of AEM. I would recommend this method only for your localhost.  

• Open Cyberduck and connect to your localhost. 
• Browser to the following folder libs/cq/core/content/login
• You will see the background.png image.
• Upload and replace the background image. 
• Go and show off your branded AEM to your colleagues!

Here is an image from CyberDuck:

This a great way to personalize your AEM Author instance, and keep the company's brand true. 

Happy Coding!