Creating and deploying custom themes and skins 

---

This topic describes how to create and deploy a custom theme and skin. We recommend that you use the default Page Builder 2 theme that is provided with Mashup Center as a template, update the files as necessary, and then upload them to the public WebDAV storage directory on the Mashup Center server.

Note: When using previous versions of Mashup Center, you were required to package and deploy your custom themes as WAR files. Starting with Mashup Center 3.0, themes are no longer packaged as WAR files but are instead stored in WebDAV in the public/themes directory as a defined folder structure. Mashup Center 3.0 still supports the WAR file format and deployment for themes in a 3.0 format, but we recommend that you use the new WebDAV method since it does not require any special tools such as an Eclipse-based development environment.

Procedure

1. Do the following steps to create a new custom theme called myTheme:
   1. On the Mashup Center server, navigate to the MashupCenter_install_root/mm/themes/ directory.
   2. Make a copy of the pageBuilder2.zip file and paste it into a directory on your local machine where you can edit it. From this point forward, you will be editing your local copy of the pageBuilder2.zip file, not the one on the server. Be sure not to delete or alter the file on the server.
   3. Rename the pageBuilder2.zip file to something unique, such as myTheme.zip.
   4. Unzip the myTheme.zip file in the myTheme directory.
   5. Open the myTheme/metadata.properties file, and change the unique-name property value to myTheme. Later, if you create a new skin for your theme and want to designate that skin as the default skin for the theme, reopen this file and change the default-skin property value to the name of your custom skin. Do not change the com.ibm.mashups.theme.body.class and preview-url property values.
   6. Open the myTheme/metadata/localized_en.properties file, and change the title property to myTheme. Optionally add a description.
   7. Save your changes.
   8. Do the following steps to customize your new theme and change the background of the mashup page:
      1. Add the new image to the myTheme/css/default/themeImages folder.
      2. Open the myTheme/css/themes/theme.css file and change the lotusMain { background: #FFF; margin: 0px; ......} line to lotusMain { background: url(../default/themeImages/loginBkgd.jpg); margin: 0px; ......}.
      3. Save your changes.
      Example: To change the background color from white to black, do the following steps:
      1. Open the myTheme/css/themes/theme.css file and change the lotusMain { background: #FFF; margin: 0px; ......} line to lotusMain { background: #000; margin: 0px; ......}.
      2. Save your changes.
   9. Do the following steps to customize your new theme and change the banner background color. This example changes the background color to red:
      1. Open the myTheme/css/themes/theme.css file and change the .lotusBanner{padding:0 10px;background-color:#000;background-image:-moz-linear-gradient(top,
         1. 525252 0%, #000000 100%);-webkit-gradient(linear, left top, left
         bottom, from(#525252), to(#000000));} line to lotusBanner{padding:0 10px;background-color:red;background-image:-moz-linear-gradient(top, red 0%, red 100%);-webkit-gradient(linear, left top, left bottom, from(red), to(red));}.
      2. Save your changes.
2. Do the following steps to create a new custom skin called mySkin:
   1. Make a copy of the myTheme/Standard folder in the same myTheme folder, and rename the new folder to something unique, for example mySkin. At this point, your myTheme folder contains various subfolders, including the following:
      • Standard
      • NoSkin
      • mySkin
   2. Open the mySkin/metadata.properties file, and change the unique-name property value to mySkin and save your changes.
   3. Open the mySkin/metadata/localized_en.properties file, and change the title property to My Skin. Optionally add a description. Save your changes.
3. Do the following steps to customize your new skin to reference an image:
   1. Open the myTheme/mySkin/nls/skin_en.html file.
   2. Locate the header element for the title bar, for example <h2 class="decoration-titlebar....">.
   3. Locate this line of code in the title bar section:

      <span class="lotusLeft"> <!-- lm-dynamic-title node marks location for dynamic title support -->
      	     <span class="lm-dynamic-title asa.portlet.title decoration-title">
      <a rel="dynamic-content" href="lm:title"></a><br />
      <a rel="dynamic-content" href="lm:description"></a></span>
      	 </span>

   4. Add the following code after the </span> tag and save your changes: <span class="myimage">&nbsp</span>.
   5. Open the myTheme/css/themes/theme.css file.
   6. Add the following code to the bottom of the file and save your changes:

      .myimage{
                       display:block;
                       float:left;
                       background:url("../../css/images/iconInfo.gif") no-repeat;
                       margin-left:10px;
                       min-height:16px;
                       min-width:16px;
                   }

4. To stop the caching of themes in WebDAV, open myTheme/metadata.properties, and set the developerMode property to true. This allows your theme changes to take place immediately for users without having to restart the Mashup Center server.
5. Do the following steps to deploy your myTheme custom theme:
   1. Compress the contents of the myTheme folder and name it myTheme.zip.
   2. Place the myTheme.zip file in the MashupCenter_install_root/mm/themes directory.
   3. Navigate to the MashupCenter_install_root/config directory.
   4. Enter the following command to install the theme:
      • Windows: config.bat import-theme –DthemeZip=myTheme.zip –DMashupAdmin=admin –DMashupPass=admin
      • Linux and AIX: ./config.sh import-theme –DthemeZip=myTheme.zip –DMashupAdmin=admin –DMashupPass=admin
   5. Restart the Mashup Center server.

Parent topic: Working with themes and skins