Install new Share theme via JAR file

[mikeh]

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'
  
  
  

  alfresco
  
     site-data
  
        themes
  
           devcon.xml
  
  META-INF
  
     themes
  
        devcon

  
  
  



• 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'?>
  
  <theme>
  
     <title>DevCon 2010</title>
  
  </theme>

  
  
  

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

surfjar devcon-theme

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/