Creating and deploying a custom theme : Mashup Center 2.0Added by IBM on November 20, 2009 | Version 1 (Original)
Contents: Developing widgets : Mashup Center 2.0
This topic describes how to create and deploy a custom theme and skin. We recommend that you use a default theme provided with Mashup Center as a template, and then use an Eclipse-based tool such as WebSphere Application Server Toolkit or Rational®
Application Development to package your new theme as a WAR file and deploy it to the Mashup Center server.
About this task
To create and deploy your new theme WAR file, do the following steps:
- Do the following steps to organize the file structure of the theme WAR file. Specifically, you will set up the directory structure that contains all the necessary subdirectories and files that are required for the new theme WAR file. In a later step, you will ZIP everything up and give the new ZIP file a WAR file extension.
- To export themes.ear from the WebSphere Application Server administrative console, navigate to Applications -> Application Types -> WebSphere enterprise applications, select themes, and click Export.
- Extract themes.war from theme.ear, and create new WAR file based on existing file structure in themes.war.
- Confirm that mashups.properties is located under \WEB-INF and that it contains the following line: themeRootDir=
- Rename the defaultTheme folder to mytheme. Delete the other standard themes that come with Mashup Center, for example defaultThemeColumned, tabTheme, and tabThemeColumned.
- To create a skin for your new theme, do one of the following steps:
- Duplicate an existing skin by renaming it to mynewskin.
- Create a new folder named mynewskin under the mytheme folder, and delete any skins that you do not need.
Now you have set up the directory structure for your new theme and are ready to start creating your new theme and skin.
Do the following steps to name your new theme and set your new skin as the default skin in the theme's metadata.xml file:
- Open mytheme\metadata.xml and replace Mashups Free Form with mytheme in the following string: <nls-string language="en">Mashups Free Form</nls-string>. This is the name that will appear in the Mashup Center user interface.
- Optional: To define the new theme name in other languages, replace the values in the other nls strings. If you do not want to define names in other languages, simply delete those strings.
- To make your new skin the default skin in the theme metadata.xml file, replace NoSkin with mynewskin in the following string: <default-skin>NoSkin</default-skin>.
- Because Mashup Center provides four standard themes, assign 5 as the new theme ID in metadata.xml, for example <id>5</id>.
- Modify the following two meta-data elements in metadata.xml:
Press Ctrl + S to save the file.
- <meta-data name="com.ibm.mashups.theme.body.class">mashups</meta-data>
- <meta-data name="preview-url">preview.png</meta-data>
Now that you've created the directory structure for your new theme and skin and updated the required files to make them available to Mashup Center, you are ready to add new images and update the theme and skin style sheets with your own look and feel.
Do the following steps to customize your new theme by changing the background image of the mashup page. The background image is a rectangular image that repeats vertically from one end of the page to the other. The system widgets that make up the main portion of the mashup page are positioned on top of the repeating background images.
- Add the new image to the mytheme\images folder.
- Open mythemetheme.css and replace background.png with the name of the new image in the following string: background:url(images/background.png) repeat-x;.
- To change how often the image repeats on the page, replace the x in this same string with a different value. Currently, the image is set to repeat as many times as necessary to cover the page.
- Press Ctrl + S to save the file.
Now you are ready to customize the skin that defines the look and feel of the widgets that you will include in your mashup pages.
Do the following steps to customize your new skin. Specifically, you will add new images to your skin and update the CSS file that applies them to your widget wrappers.
Do the following steps to package and deploy your new theme to the Mashup Center server:
- Add any new images that you want to display in the widget wrapper to the mytheme\\mynewskin folder.
- Open mytheme\mynewskin\skin.css and update the image references as desired. Notice that the images for the theme are located in an images folder, whereas the images for the skins are located in the same folder as the CSS file.
- Press Ctrl + S to save the file.
Note: To improve the performance of your images, consider implementing the CSS Sprite technique.
- Now you are ready to package and deploy your new theme and skin to the Mashup Center server so you can apply them to your mashup pages and widgets.
- Either use an Eclipse-based integrated development environment to export your project as mycustomthemes.war, or simply zip up all the files and name the new file mycustomthemes.war.
- Open the WebSphere Application Server administrative console to install the theme WAR file. Be sure to specify a unique context root, for example themes/mytheme.
- If you want to change the default theme for all mashup pages to your new custom theme, open ConfigService.properties, located in the Mashups_install_root\\mm\\config directory, and modify the following section with new theme ID:
#Theme and Skin default setting
#Lotus Mashups Default Theme
If you decide to add a new theme to a WAR file that you have already deployed, simply redeploy the WAR file.
Parent topic: Working with themes and skins : Mashup Center 2.0