- Navigate to $WEBAPPS/share/WEB-INF/classes/alfresco/site-data/themes . BTW: $WEBAPPS is the deployment folder of your servlet container.
- Copy the file yellowTheme.xml to myTheme.xml
- Edit the file myTheme.xml by setting the title and the id. The id has to be 'theme.myTheme'
- Navigate to $WEBAPPS/themes!
- Make a copy of the complete folder 'yellowTheme' by naming it to 'myTheme'.
- Naviagate to $WEBAPPS/themes/myTheme/images!
- 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.
- Navigate back to $WEBAPPS/themes/myTheme!
- 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.
- 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.
- Naviagete to $WEBAPPS/themes/myTheme/yui/assets
- Inside the file 'skin.css', also replace every occurrence of 'yellowTheme' with 'myTheme'.
- Restart Alfresco
- Open Alfresco Share, create a new site and choose the entry 'myTheme' as the site theme.
- Perform some CSS changes by being able to test your changes immediately by refreshing the just created site.
- Open the Administration Console and set the theme 'myTheme' as the gloabl one.
Tuesday, June 12, 2012
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: