Creating a Custom ThemeRoller Theme

Added by Ken Fyten, last edited by Ken Fyten on Feb 02, 2012
Table of Contents

Although ICEfaces includes a large set of predefined ThemeRoller themes for use with the ACE Components, you may also leverage the ThemeRoller tools and community to create custom ACE ThemeRoller-based themes of your own.

Creating and using a custom ThemeRoller theme with the ACE Components requires the following steps:

  1. Create a new theme with the Themeroller utility.
  2. Prepare the generated files to be used by ICEfaces.
  3. Deploy the theme in your application.
Create a new theme with the ThemeRoller utility
  1. Navigate to http://jqueryui.com/themeroller/
  2. Use the controls on the left to create a custom theme.
  3. Click the 'Download theme' button.
  4. Click on 'Deselect all components' to avoid downloading unnecessary Javascript resources.
  5. Click on 'Advanced Theme Settings'.
  6. Enter the name of your theme in the text box labeled 'Advanced Theme Settings', e.g. 'mytheme'.
  7. Click on the 'Download' button to save the file.
Prepare the generated files to be used by ICEfaces.
  1. Locate in your file system the compressed file obtained in the previous step.
  2. Uncompress the file into a new directory.
  3. Open this new directory that contains the uncompressed files.
  4. Navigate to the '/css' subdirectory.
  5. You should see a subdirectory that has the name you chose for your theme, e.g. 'mytheme', rename this subdirectory by prepending the original name with 'ace-', e.g. 'ace-mytheme'.
  6. Navigate to this renamed subdirectory, e.g. 'ace-mytheme'.
  7. Change the name of the only CSS file there to 'theme.css'.
  8. Open this theme.css file in a text editor.
  9. Remove unnecessary structural CSS inside this file (it has been known to cause some problems).
    1. If 'Deselect all components' was clicked in the previous step, this file should not contain any widget-specific CSS, but if it does, remove all CSS rules that start with the name of widget (e.g. ui-accordion). These appear just below the rules labeled as 'Overlays' that appear after the corner radius rules. You can delete everything from this point to the end of the file.
  10. Modify all url() declarations inside the file to comply with the JSF resource handling mechanism, and prepend each path with 'ace-<theme-name>:', e.g. url(images/ui-bg_flat_75_ffffff_40x100.png) becomes url("#{resource['ace-mytheme:images/ui-bg_flat_75_ffffff_40x100.png']}").
    If there's a format error, JSF will fail fast and return a blank CSS resource. So, if you see your page has no theme at all, most likely there was a url format error in this step.
  11. Put this theme in a .jar file to be served by JSF. You can accomplish this in the following way:
    1. In a staging directory create a subdirectory named 'META-INF'.
    2. Inside 'META-INF' create a subdirectory named 'resources'.
    3. Inside 'resources' put a copy of your theme folder, e.g. 'ace-mytheme'.
    4. Create a zip file that contains the 'META-INF' directory and all its contents. The name of this file can be anything; it could be the name of your theme, for example.
    5. Change the extension of this zip file to 'jar'.
      This is an example of the final structure: 
      META-INF
     resources
         ace-mytheme
             theme.css
             images
Deploy the theme in your application.
  1. Copy this .jar file inside the /WEB-INF/lib directory of your application.
  2. In your web.xml file, add or set the org.icefaces.ace.theme context parameter to the name of your theme as the value.
    e.g. 
    	<context-param>
		<param-name>org.icefaces.ace.theme</param-name>
		<param-value>mytheme</param-value>
	</context-param>
  3. Launch your application and test your new theme.
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2021 ICEsoft Technologies Canada Corp.