View Source


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:

# Create a new theme with the Themeroller utility.
# Prepare the generated files to be used by ICEfaces.
# Deploy the theme in your application.


h5. Create a new theme with the ThemeRoller utility
{panel}
# Navigate to [http://jqueryui.com/themeroller/]
# Use the controls on the left to create a custom theme.
# Click the 'Download theme' button.
# Click on 'Deselect all components' to avoid downloading unnecessary Javascript resources.
# Click on 'Advanced Theme Settings'.
# Enter the name of your theme in the text box labeled 'Advanced Theme Settings', e.g. 'mytheme'.
# Click on the 'Download' button to save the file.
{panel}


h5. Prepare the generated files to be used by ICEfaces.
{panel}
# Locate in your file system the compressed file obtained in the previous step.
# Uncompress the file into a new directory.
# Open this new directory that contains the uncompressed files.
# Navigate to the '/css' subdirectory.
# 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'.
# Navigate to this renamed subdirectory, e.g. 'ace-mytheme'.
# Change the name of the only CSS file there to 'theme.css'.
# Open this theme.css file in a text editor.
# Remove unnecessary structural CSS inside this file (it has been known to cause some problems).
## 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.
# 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'\]\}")}}.
{tip}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.{tip}
# Put this theme in a .jar file to be served by JSF. You can accomplish this in the following way:
## In a staging directory create a subdirectory named 'META-INF'.
## Inside 'META-INF' create a subdirectory named 'resources'.
## Inside 'resources' put a copy of your theme folder, e.g. 'ace-mytheme'.
## 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.
## Change the extension of this zip file to 'jar'.
This is an example of the final structure:
{code}
META-INF
resources
ace-mytheme
theme.css
images
{code}
{panel}


h5. Deploy the theme in your application.
{panel}
# Copy this .jar file inside the /WEB-INF/lib directory of your application.
# 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.
{code}
<context-param>
<param-name>org.icefaces.ace.theme</param-name>
<param-value>mytheme</param-value>
</context-param>
{code}
# Launch your application and test your new theme.
{panel}