Here's a simple way to create a custom theme in WebSphere Portal. Your new theme will be based on the default PageBuilder2 theme. There are two main steps: first you copy your new theme components to the portal server, and then you register this new theme.
Even if you only want to keep the PageBuilder2 theme and only tweak the style, it's still a good idea to create your own theme. That way, none of your changes will be lost when you apply a fixpack.
- Use a WebDAV client to connect to your running portal at http://<hostname>:10039/wps/mycontenthandler/dav/fs-type1. You'll see a number of directories, including the one you want: themes.
- Change to the themes directory, and you'll see the PageBuilder2 directory. Copy this entire directory to your local system.
- Rename the directory. I used "CacyCustomTheme".
- Copy the new theme back to the portal server, into the themes directory and at the same level as the PageBuilder2 theme.
Ok, you've done the first part. Now to register the theme with portal. You'll use xmlaccess for this; I've included a sample input file here. This file assumes that you will want the same skins (Standard and No Skin) as the PageBulder2 theme uses. Note that there are certain places you will need to edit in this file, so that it points to your theme.
- Edit the xml file so it points to your theme (three places in my example).
- Run this command from the <install-dir>/PortalServer/bin directory:
xmlaccess.sh|bat -url http://localhost:10039/wps/config -user <username> -password <password> -in <your input file> -out output.xml
That's it! Now you can navigate to the Themes and Skins portlet and see your theme. Configure a page to use this theme and see....that it looks exactly like the PageBuilder2 theme. Well, you haven't customized the look and feel any. To do that, make changes to the LOCAL version of the files, then use WebDAV to copy those files to the portal server. Refresh the portal page in your browser, and test your changes. You may need to clear your browser's cache.
If you are interested in customizing the style, follow these steps.
- In the theme you just created, look in the css directory. You'll see several directories, but the one you care about is "gold". Copy this directory and paste it into the same location, giving it a new name. I used CacyStyle.
- Open up this new directory. In it, you'll see a file called gold.css. Rename it to match your style; I used CacyStyle.css.
- Now look in the system directory of your new theme. You'll see a file called styles.json. Open it in a text editor. Add a line to this file which refers to your new style. NOTE: if you add a line after the "gold" line, be sure to put a comma on the gold line; only the last line of this json definition doesn't have a comma. Here's what mine looks like:
- You can edit this file, copy it to the server with WebDAV, clear your cache, and refresh the page in your browser. The style will then be available (Actions -> Edit Page, Customize, Change Style).
You can find my sample theme here