creating a custom theme based on the WebSphere Portal 7.0.0.2 theme
Recently at work I was tasked with creating a customized Portal theme based on the new 7.0.0.2 theme, which uses Dojo 1.6 and thus supports IE9. I followed all of IBM’s steps for making a copy of the 7.0.0.2 theme’s static files (the non-JSP stuff that you can access via WebDAV), but still my custom 7.0.0.2 wouldn’t load for me. I didn’t modify anything in my copy from the original except the metadata to change the theme name. When I would select my copy as a page’s theme or the Portal default theme, I would just get a white page with a snippet of XML up top, sometimes including an error message. When I checked the Portal logs, I saw error messages pertaining to PageBuilder2–what? PageBuilder2 is the old Portal theme, and the new 7.0.0.2 theme didn’t seem to mention PageBuilder2 anywhere. If you’re experiencing this, here’s what I did to fix it.
Go to your Portal’s Administration > Portal Settings > Import XML page. Copy the following XML into a file and import it:
1 2 3 4 5 6 |
<?xml version="1.0" encoding="UTF-8"?> <request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_7.0.0.xsd" type="export" create-oids="true"> <portal action="locate"> <theme action="export" objectid="*" /> </portal> </request> |
This will export a list of all the themes your Portal knows about. We want to find out what Portal thinks about the copy of the 7.0.0.2 theme you’re trying to create.
After importing the XML, you’ll see a ‘View Details’ link. Click that and a new window will open, giving you some more XML that is Portal’s response to your XML query. Copy that XML and paste it into a new file, say theme-export-results.xml
.
Look in theme-export-results.xml
for your custom theme in a <theme>
tag. Mine looked like this:
1 2 3 4 5 6 7 8 9 10 11 |
<theme action="update" active="true" context-root="/PageBuilder2" default="false" defaultskinref="ZK_UP469B1A0O8000I5551U2M1GN3" domain="rel" objectid="ZJ_UP469B1A0OFN10IL887GJU2001" resourceroot="PageBuilder2"> <localedata locale="en"> <title>My Custom 7.0.0.2 Portal Theme</title> <description>My custom Portal 7.0.0.2 theme</description> </localedata> <allowed-skin skin="ZK_UP469B1A0O8000I5551U2M1GN3" update="set"/> <parameter name="com.ibm.portal.themetype" type="string" update="set"><![CDATA[CSA2]]></parameter> <parameter name="com.ibm.portal.friendly.name" type="string" update="set"><![CDATA[MyCustom7002PortalTheme]]></parameter> <parameter name="com.ibm.portal.layout.template.href" type="string" update="set"><![CDATA[dav:fs-type1/themes/MyCustom7002PortalTheme/layout-templates/2ColumnEqual/]]></parameter> <parameter name="resourceaggregation.profile" type="string" update="set"><![CDATA[profiles/profile_deferred.json]]></parameter> </theme> |
Hmm, what are these references to PageBuilder2 doing in the context-root
and resourceroot
attributes? For comparison, here is what the default Portal 7.0.0.2 entry looked like:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<theme action="update" active="true" context-root="/wps/themeModules" default="false" defaultskinref="ZK_UP469B1A0O8000I5551U2M1GN5" domain="rel" objectid="ZJ_UP469B1A0O8000I5551U2M1GF0" resourceroot="dynamicSpots" uniquename="ibm.portal.7002Theme"> <localedata locale="ar"> <title>Portal 7.0.0.2</title> </localedata> <em><!-- snipped: a lot more localedata tags for other languages --></em> <allowed-skin skin="ZK_UP469B1A0O8000I5551U2M1GN3" update="set"/> <allowed-skin skin="ZK_UP469B1A0O8000I5551U2M1GN5" update="set"/> <allowed-skin skin="ZK_UP469B1A0O8000I5551U2M1GN7" update="set"/> <parameter name="com.ibm.portal.themetype" type="string" update="set"><![CDATA[CSA2]]></parameter> <parameter name="com.ibm.portal.layout.template.href" type="string" update="set"><![CDATA[dav:fs-type1/themes/Portal7.0.0.2/layout-templates/2ColumnEqual/]]></parameter> <parameter name="resourceaggregation.profile" type="string" update="set"><![CDATA[profiles/profile_deferred.json]]></parameter> <parameter name="com.ibm.portal.theme.template.ref" type="string" update="set"><![CDATA[dav:fs-type1/themes/Portal7.0.0.2/]]></parameter> </theme> |
The context-root
and resourceroot
attributes are completely different, with my custom theme pointing to PageBuilder2 instead of where the Portal 7.0.0.2 theme points.
Edit your custom 7.0.0.2 theme’s <theme>
tag to use the context-root
and resourceroot
attributes from the default Portal 7.0.0.2 theme. Also add a com.ibm.portal.theme.template.ref
parameter tag to your custom theme if it isn’t there, as well as a uniquename
attribute. Here was mine after I edited it:
1 2 3 4 5 6 7 8 9 10 11 12 |
<theme action="update" active="true" context-root="/wps/themeModules" default="false" defaultskinref="ZK_UP469B1A0O8000I5551U2M1GN3" domain="rel" objectid="ZJ_UP469B1A0OFN10IL887GJU2001" resourceroot="dynamicSpots" uniquename="com.mycompany.MyCustom7002PortalTheme"> <localedata locale="en"> <title>My Custom 7.0.0.2 Portal Theme</title> <description>My custom Portal 7.0.0.2 theme</description> </localedata> <allowed-skin skin="ZK_UP469B1A0O8000I5551U2M1GN3" update="set"/> <parameter name="com.ibm.portal.themetype" type="string" update="set"><![CDATA[CSA2]]></parameter> <parameter name="com.ibm.portal.friendly.name" type="string" update="set"><![CDATA[MyCustom7002PortalTheme]]></parameter> <parameter name="com.ibm.portal.layout.template.href" type="string" update="set"><![CDATA[dav:fs-type1/themes/MyCustom7002PortalTheme/layout-templates/2ColumnEqual/]]></parameter> <parameter name="com.ibm.portal.theme.template.ref" type="string" update="set"><![CDATA[dav:fs-type1/themes/MyCustom7002PortalTheme/]]></parameter> <parameter name="resourceaggregation.profile" type="string" update="set"><![CDATA[profiles/profile_deferred.json]]></parameter> </theme> |
After you’ve edited your custom theme’s <theme>
tag, remove the other <theme>
tags from the file. You’ll end up with something like the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?xml version="1.0" encoding="UTF-8"?> <!-- IBM WebSphere Portal/7.0.0.2 build wp7002_132_01 exported on Mon Jan 30 16:07:56 EST 2012 from localhost --> <!-- 1 [skin ZK_CGAH47L008LG50IAHUR9Q330S4] --> <!-- 2 [skin ZK_CGAH47L008LG50IAHUR9Q330S2] --> <!-- 3 [skin ZK_CGAH47L008LG50IAHUR9Q330S6] --> <!-- 4 [theme ZJ_CGAH47L008LG50IAHUR9Q330H0] --> <!-- 5 [skin ZK_CGAH47L000CS30IAH1044E1KJ1] --> <!-- 6 [skin ZK_CGAH47L008LG50IAHUR9Q330S5] --> <!-- 7 [theme ZJ_CGAH47L000CS30IAH1044E1KJ5] --> <!-- 8 [theme ZJ_UP469B1A00HN80I5CQA99I3GL5] --> <!-- 9 [skin ZK_CGAH47L008LG50IAHUR9Q330S1] --> <!-- 10 [skin ZK_UP469B1A0O8000I5551U2M1GN3] --> <!-- 11 [skin ZK_UP469B1A0O8000I5551U2M1GN5] --> <!-- 12 [skin ZK_UP469B1A0O8000I5551U2M1GN7] --> <!-- 13 [theme ZJ_UP469B1A0O7O80I5CHI1LG1006] --> <!-- 14 [theme ZJ_UP469B1A0O8000I5551U2M1GF0] --> <!-- 15 [theme ZJ_UP469B1A0OFN10IL887GJU2001] --> <!-- 16 [theme ZJ_UP469B1A0OF180IL8DCDE02006] --> <request build="wp7002_132_01" type="update" version="7.0.0.2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="PortalConfig_7.0.0_2.xsd"> <portal action="locate"> <skin action="locate" domain="rel" objectid="ZK_CGAH47L008LG50IAHUR9Q330S4" uniquename="ibm.portal.skin.IBM"/> <skin action="locate" domain="rel" objectid="ZK_CGAH47L008LG50IAHUR9Q330S2" uniquename="wps.skin.thinSkin"/> <skin action="locate" domain="rel" objectid="ZK_CGAH47L008LG50IAHUR9Q330S6" uniquename="wps.skin.noSkin"/> <skin action="locate" domain="rel" objectid="ZK_CGAH47L000CS30IAH1044E1KJ1" uniquename="csa2.standard"/> <skin action="locate" domain="rel" objectid="ZK_CGAH47L008LG50IAHUR9Q330S5" uniquename="csa2.noskin"/> <skin action="locate" domain="rel" objectid="ZK_CGAH47L008LG50IAHUR9Q330S1" uniquename="wps.iframe.album"/> <skin action="locate" domain="rel" objectid="ZK_UP469B1A0O8000I5551U2M1GN3" uniquename="ibm.portal.7002Standard"/> <skin action="locate" domain="rel" objectid="ZK_UP469B1A0O8000I5551U2M1GN5" uniquename="ibm.portal.7002Hidden"/> <skin action="locate" domain="rel" objectid="ZK_UP469B1A0O8000I5551U2M1GN7" uniquename="ibm.portal.7002NoSkin"/> <theme action="update" active="true" context-root="/wps/themeModules" default="false" defaultskinref="ZK_UP469B1A0O8000I5551U2M1GN3" domain="rel" objectid="ZJ_UP469B1A0OFN10IL887GJU2001" resourceroot="dynamicSpots" uniquename="com.mycompany.MyCustom7002PortalTheme"> <localedata locale="en"> <title>My Custom 7.0.0.2 Portal Theme</title> <description>My custom Portal 7.0.0.2 theme</description> </localedata> <allowed-skin skin="ZK_UP469B1A0O8000I5551U2M1GN3" update="set"/> <parameter name="com.ibm.portal.themetype" type="string" update="set"><![CDATA[CSA2]]></parameter> <parameter name="com.ibm.portal.friendly.name" type="string" update="set"><![CDATA[MyCustom7002PortalTheme]]></parameter> <parameter name="com.ibm.portal.layout.template.href" type="string" update="set"><![CDATA[dav:fs-type1/themes/MyCustom7002PortalTheme/layout-templates/2ColumnEqual/]]></parameter> <parameter name="com.ibm.portal.theme.template.ref" type="string" update="set"><![CDATA[dav:fs-type1/themes/MyCustom7002PortalTheme/]]></parameter> <parameter name="resourceaggregation.profile" type="string" update="set"><![CDATA[profiles/profile_deferred.json]]></parameter> </theme> </portal> <status element="all" result="ok"/> </request> |
Import this XML file containing your updated theme information via the ‘Import XML’ page again.
Hooray, your custom Portal 7.0.0.2 theme should now load and look just like the original 7.0.0.2 theme! Now you can edit the CSS and HTML to your heart’s content. :)