How to customize the Alfresco Share login page without writing code for the lightweight theme
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.
Themes location
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:
<alfresco root>/tomcat/webapps/share/themes
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?
Other examples
To end this post I share with you some different styles of layout to show which results we could obtain without writing any code.
Touristic (my town)
Tech
Travel
Wellness & beauty
Personal & sport
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. 😉
I don’t seem to get the “Customizing the background image” to work in 4.2e. Got any idea’s?
Hi Johan,
No ideas now!
I have to check with the new version.
Someone else is reading has checked?
Yep – 4.2e themes have no background on the login page. Trying to fix this too.
Worked it out. Edit the presentation.css in your theme – section .alfresco-guest .sticky-wrapper as follows (amend the image path as required)
.alfresco-guest .sticky-wrapper
{
background: url(‘images/alfresco-logo-bg.jpg’) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hei Martin,
Thank you very much for your contribution… it’s really appreciated by me and I’m sure from all the community.
Good job!
Well done!
Everything looks good in IE, Chrome and FF. But I cannot log in when using IE 11 on Windows 7. Pressing ‘enter/return’ or using the mouse.
Any of you guys experiencing the same problem?
This don’t work for me… 🙁 Tried all but with not success
Looks great!!! Thank for the explanation.
Our login button on the front page is bright green….
How do i change this?
Hi Karen,
Thank you for the feedback.
You can modify the CSS file.
To find it, try the browser inspector.
can this “© 2005-2013 Alfresco Software Inc. All rights reserved.” be removed or change
Hi Dylan,
I discourage to do this because it’s a clear violation of the legal copyright.
If you want to do it, you have to change the content of the theme and not the images or the css.
Hi Francesco,
I am asking if there is any possibility to disable the alfresco authentication page.
Regards
Hi Khoul,
No, sorry!
I want to make the authentication on an other server. I configured the external authentication : the authentication chain in alfresco-global.properties and
the modification in share-config-custom.xml But I still have the 403 error. I will be thankfull if you help me to resolve this problem.
Hi Khoul,
I suggest you to separate the authentication chain from the customization of the login page. They are two different topics.
In this article the topic is about the customization of the login page. 😉
Hi,
Doesn’t work from 4.2.f. I truy Matin solution too. Any suggestion?
I realized that editing the codes require restart of the Alfresco. It may not work with just refresh of the page. It did not work when I refreshed but the background and the colour changes come alive after refresh. 4.2.f on windows 8.
Excellent plain and simple advice. However, it appears that Alfresco 5.0.a CE does not employ/deploy a background image on the login page. I’m trying to figure out how to make it do that, but so far I’m coming up short. Any advice?
Hi Trevor, thank you for the feedback. Thank you for coming back with a tested solution for that problem. The community will be grateful.
I would suggest to try to use a different theme instead of the default one. This because probably another theme could have a background image.
Hello Francesco,
First i wanted to thank you about your awesome work about Alfresco, it is very helpful!
Did someone come up with a solution for newer versions of Alfresco community (5.0c /5.0d)? I need to customize the share login page too. Any advice?
Thank you Driss?
Did you try this:
http://docs.alfresco.com/5.0/tasks/dev-extensions-share-tutorials-override-login-page.html
Hello Francesco, thank you for you link, i understand it allows to create a custom login page for Alfresco 5. But since my technical knowledge is still limited (but iam learning very fast thanks to people like you who contribute to the community :D), i cant see where to implement code that will control the insert of the backgound image and the company logo. Is it in the Html section of the code?
Tutorials Login
Tutorials Login
Username:
Password:
How should i proceed?
Thank you very much for your advice!
Hi Driss,
Thank you for the feedback.
You have to ways to reach your goal:
1) Change the HTML source code.
2) Work on the CSS.
The first path is easier but less “clean”.
Probably you could try to start from there…
Hello Francesco,
well, thanks to you, i think iam getting it. If i understood what you just said, i can succeed modifying the html directly in the overriding login page, but that would be a kind of mess, since its not very “clean” to do that as a developper, right? i should work on the css to implement those changes (cleaner approach), so is it the login.css (tomcat/webapps/share/components/guest) file that i have to edit?
It also seems that there is no image declared at all in the “tutorials login” page, am i right? is it made to give us freedom implementing whatever image(s) we want?
Thank you again Alfresco master! Grazie mille!
Hi Driss,
Yes, what you say is correct for me.
Unfortunately there is no a “pure approach” in customizing the login page and logos but, as an open source framework (please remember that Alfresco is more closed to a “framework” instead of a “product”), the source code is completely available.
One of the biggest improvement of the Alfresco 5 is the Aikau framework and with it you can easily develop your own page… this is definitely cleaner. 😉
Cheers.
Hi Driss,
I think that is a little bit late…
But maybe this could be useful for new users of alfresco 5++ versions.
I follow the next steps to customize my login page:
1.) Desing or use some images as Mr. Francesco recommends (size in pixels).
2.) edit your presentation.css /webapps/share/themes/(custom theme or default theme) as follows (same steps that Mr. Martin Dunn share with us a long time ago):
.alfresco-guest .sticky-wrapper
{
background: url(‘images/alfresco-logo-bg.png’) no-repeat center center fixed;
}
3.) restart alfresco and make sure that you are using the custom theme or default theme that you modify in step 2.
That’s all!
I want to add some other customization if you don’t like the footer “Sample + Smart” that appears in 5++ versions of alfresco community you could change in this way:
1.) locate the next directory:
/webapps/components/images/
and put the png image that you want to use, I recommend a size of 180px x 180px.
2.) Go to:
/webapps/components/tradeMarkLogo/
and edit tradeMarkLogo.css as follows.
.theme-trademark
{
height: 180px;
width: 180px;
background: transparent url(../images/NameOfYourImage.png) no-repeat;
position: absolute;
bottom: 15px;
right: 15px;
}
3.) Restart alfresco service.
Here you can see my current alfresco login.
https://goo.gl/zT5Cmk
Thank you Mr. Francesco for your help.