Customizing Layouts and Skins in UCM 11g

Along the same lines as my previous post on modifying the navigation menus, I thought I would cover how to customize layouts and skins in 11g.  Back in 10g, I had posted an entry on using configuration flags to continue to use the method of copying skins and layout directories under /weblayout to customize them.  I also mentioned that this method was going away in favor of using custom components to do the customizations.  Well in 11g, that is the only method.

The technique is similar to what the 10g custom component would look like, but does include a few changes including some new approaches of using dynamicdata tables to drive data.

To add new layouts, they get merged in the LmLayouts table.  New skins get merged into the LmLayoutSkinPairs table.  And the PublishedWeblayoutFiles and PublishedStaticFiles merged tables define what files get published to the weblayout directory.   Let’s take a look at each.

In the following table, we’re defining our new layout with an id, label, and marking it enabled. This is what will get merged into LmLayouts.

<@table CreateLayoutAndSkin_Layouts@>
<table>
<tr>
<td>id</td> <td>label</td> <td>enabled</td> </tr>
<tr>
<td>NewTopMenus</td> <td>New Top Menus</td> <td>1</td> </tr>
</table>
</@end@>


Next we’ll define out to render the new layouts. This helps determine how the layout.js file is deployed dynamically. If you wanted to define a whole new layout altogether, you’d create a new layoutMode. This definition uses the new dynamicdata data table construct.

<@dynamicdata LayoutRenderModes@>
layoutName, layoutMode
NewTopMenus, Top Menus
NewTrays, Trays
<@end@>


In the next table, we’ll define the skins to use for our new layout. We can also define an entirely new skin and apply it to either the new or existing layouts.

<@table CreateLayoutAndSkin_LayoutSkinPairs@>
<table>
<tr>
<td>layout</td><td>skin</td><td>skinDir</td><td>enabled</td>
</tr>
<tr>
<td>NewTopMenus</td><td>Oracle</td><td></td><td>1</td>
</tr>
<tr>
<td>Top Menus</td><td>Gray</td><td></td><td>1</td>
</tr>
</table>
<@end@>


The publishing of weblayout files happens in two ways. The first is the dynamic building and publishing of files. This is done for the layout JavaScript and skin CSS files.  In the case of the layout, it will use the TOP_MENUS_LAYOUT_JS template and for the skin, it will use the IDC_SKIN_CSS template.

<@table CreateLayoutAndSkin_PublishedWeblayoutFiles@>
<table>
<tr>
<td>path</td><td>template</td><td>class</td><td>loadOrder</td><td>doPublishScript</td>
</tr>
<tr>
<td>resources/layouts/NewTopMenus/layout.js</td> <td>TOP_MENUS_LAYOUT_JS</td> <td>javascript:layout:NewTopMenus</td> <td>50</td> <td><$if isLayoutEnabled("NewTopMenus") and (not DisableNewTopMenusPublishing)$><$doPublish = 1$><$endif$></td>
</tr>
<tr>
<td>resources/layouts/NewTopMenus/Oracle/skin.css</td> <td>IDC_SKIN_CSS</td> <td>css:layout:NewTopMenus</td> <td>50</td> <td><$if isLayoutEnabled("NewTopMenus") and (not DisableOracleSkinPublishing) and (not DisableNewTopMenusPublishing)$><$doPublish = 1$><$endif$><$tags="top_menus:oracle"$></td>
</tr>
</table>
<@end@>


The second type of publishing is that of the static files such as images.

<@table CreateLayoutAndSkin_PublishedStaticFiles@>
<table border=1>
<tr>
<td>srcPath</td><td>path</td><td>class</td><td>loadOrder</td><td>doPublishScript</td><td>canDeleteDir</td>
</tr>
<tr>
<td>publish/resources/layouts/NewTrays/Oracle</td><td>resources/layouts/NewTrays/Oracle</td><td>resources:layout:NewTrays</td><td>50</td> <td><$if isLayoutEnabled("NewTrays") and (not DisableOracleSkinPublishing) and (not DisableNewTraysPublishing)$><$doPublish = 1$><$endif$></td><td>0</td>
</tr>
</table>
<@end@>


Many of the styles that get dynamically build with the skin.css file can be changed using the dynamicdata constructs.  For example, to change the link colors when in a trays layout:

<@dynamicdata css_vars_trays_oracle@>
name, value
linkColor1, #FF0000
linkColor2, #FF0000
<@end@>

These examples are rolled up into the sample CreateLayoutAndSkin component. It uses all the above techniques to create a new trays layout and top menus layout as well as a new skin. In the skin example, rather then creating a custom template and resources for the css file, a static one is defined within the static folders that gets published. Since it is custom, it’s less likely that the css file needs to be dynamically built.

Hopefully this gets you on your way to customizing the UCM (or URM) UI for your own look & feel.