For my presentations at the recent Alfresco DevCons in Paris and New York, I put together a very simple theme modification to style the Share login dialog. The theme was based on our out-of-the-box 'Yellow theme' and very simply replaced the login dialog's background image to look like the picture below:
The interesting bit however, is that I could define a brand-new theme purely through the Spring Surf JAR mechanism; that is by dropping a single JAR file into Tomcat/shared/lib then restarting Share.
This is the process I used:
- Created a folder called 'devcon-theme'; doesn't matter where.
- Created the following folder structure within 'devcon-theme'
- Copied the files within share.war!/themes/yellowTheme to the META-INF/themes/devcon folder. It's always a good idea to start from one of our own custom themes, rather than 'default'.
- Within that devcon folder, use any text editor to open up presentation.css and yui/assets/skin.css and replace .yui-skin-yellowTheme with .yui-skin-devcon.
- Replaced the images/loginbg.png and images/logo.png with my DevCon-themed versions.
- The final step is to populate the devcon.xml file with some theme metadata:
<?xml version='1.0' encoding='UTF-8'?>
That's it in terms of customisations (I did say it was a very simple modification!).
The new theme needs to be wrapped up into a JAR file, for which I've got a very simple shell script:
jar cvf $APP_TOMCAT_HOME/shared/lib/$1.jar -C $1 .
..where $APP_TOMCAT_HOME is an environment variable that's set to my Tomcat server where Share is deployed. I've called the script surfjar so I use
from the devcon-theme's parent folder.
Remember, if you're using Tomcat 6, you'll also have to configure it to look in the shared folder for these Share extensions. See the wiki article here for details.
Restart Share, login as the admin user and choose More / Application from the main header menu to select your new theme.
You can download the sample devcon-theme.jar file from http://tenthpla.net/alfresco/