In a previous tutorial we learnt how to develop a custom theme for Alfresco Share and how to customize it according to your personal needs.
In this hands-on tutorial we are going to learn how to modify the Alfresco Share login page of the lightweight theme without writing any code (CSS included).
Prerequisites and environment
All the development and tests have been performed on a brand new installation of an Alfresco 4.2.c community. The Alfresco 4.2.c has been installed according to the no-bundle installation guide on an Ubuntu distribution.
Please, do not work directly on the bundle themes but I strongly recomend you to work on your own developed theme to avoid problems. If you don’t have it or you don’t know how to develop your own Alfresco Share theme, don’t worry and follow this easy tutorial.
The task we have declared is easy to reach if we know that all the default Alfresco Share themes are stored in the file system starting from the path below:
In this path you find one folder for each theme. The default theme for Alfresco 4.2.c is contained in the ‘lightTheme’ folder but it’s quite easy to understand wich folder corresponds to your own theme.
Theme images folder
Inside the lightTheme folder (and it’s the same for all the other bundle themes) you find an ‘images’ sub-folder containg several images used by all the pages. Let’s see in detail the most relevants with a special attention to the login page, describing how they are used.
- alfresco-logo-bg.jpg – This image is used as backgroup in the login page.
- logo.png This is image is used as logo in the login form.
- app-logo.png – This image is used as default logo in every page of the theme. Probably you already know that you can change it directly using the application item in the Alfresco Share’s administration menu.
As basis for our examples, let’s see how the Share’s login page looks like by default.
Example n.1 – Customizing the background image
Starting from above, let’s see in practice how we could easily customize the background image of the login page obtaining our own Alfresco’s look and feel. To reach our goal we prepared our own image with those characteristics:
- Format: JPG
- Size: 1920×1100 pixels.
The size of the image is only a suggested size because the theme will render it depending with the client resolution, aligning the image on the top left. For that reason, if your users uses a low resolution, I suggest you to use a smaller image.
After replacing the image to the ‘alfresco-logo-bg.jpg’, refresh the page in the web browser obtaining the page you see below.
Example n.2 – Customizing the login logo
Now that you have your own backuground, let’s customize the logo of the login page. To do this we prepared our own image with those characteristics:
- Format: PNG
- Size: 200×58 pixels.
- Background: transparent.
After replacing the image to the ‘logo.png‘, you have to restart Alfresco to obtaining the page you see below.
Can you believe this is your usual alfresco?
To end this post I share with you some different styles of layout to show which results we could obtain without writing any code.
Don’t shoot, I’m the pianist!
I sincerely apologize with web designers and graphics about the composition of the layouts in the examples but mine is a technical contribution. 😉