Theme it

Today I had to investigate how to add a custom theme to my Alfresco 4.x installation. Some parts were a bit tricky, but the most of it was quite simple. Here some useful steps:

1. Navigate to $WEBAPPS/share/WEB-INF/classes/alfresco/site-data/themes . BTW: $WEBAPPS is the deployment folder of your servlet container.
2. Copy the file yellowTheme.xml to myTheme.xml
3. Edit the file myTheme.xml by setting the title and the id. The id has to be 'theme.myTheme'
4. Navigate to $WEBAPPS/themes!
5. Make a copy of the complete folder 'yellowTheme' by naming it to 'myTheme'.
6. Naviagate to $WEBAPPS/themes/myTheme/images!
7. Open all the images by using E.G. the G(nu) I(mage) M(anipulation) P(rogram) . The Command is 'gimp'. Then colorize the images to fit your required base color. I just colorized every image which had a yellow color before. The main loge image is named 'app_logo.png' and can be replaced by your prefered one.
8. Navigate back to $WEBAPPS/themes/myTheme!
9. Edit the file presentation.css by setting the required colors. Again, I just copied the color codes to GIMP by only replacing the yellow color tones with my prefered ones.
10. Now the tricky part. There are some css dependencies those need to be changed inside this file. So just replace every occurrence of 'yellowTheme' with 'myTheme' inside this file.
11. Naviagete to $WEBAPPS/themes/myTheme/yui/assets
12. Inside the file 'skin.css', also replace every occurrence of 'yellowTheme' with 'myTheme'.
13. Restart Alfresco
14. Open Alfresco Share, create a new site and choose the entry 'myTheme' as the site theme.
15. Perform some CSS changes by being able to test your changes immediately by refreshing the just created site.
16. Open the Administration Console and set the theme 'myTheme' as the gloabl one.

I hope this article helps you to get quickly started with customizing your Alfresco theme.