Customizing Layouts and Skins in UCM 11g

custom skin

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.


Comments:

Hi Kyle,

I am trying to create a custom Layout and Skin for UCM 11g, however when I looked for LmLayouts table I could not find it. I can see a View with the same name but I don't see any name for an underlying table.

When I try to "Edit Values" for LmLayouts, I get an error that it is not view on a table.

Am I missing components in my schema?

Lastly, do you have reference on any material published by oracle on this?

Thanks

Posted by guest on September 06, 2011 at 10:11 PM CDT #

There isn't a database table for defining these Layouts, if that is what you are looking for. The layouts are defined in a static table (in one of the server's core resource HTML files). Additional custom layouts are added by merging in new rows into that table. That is what is being done in the code above in the 'table CreateLayoutAndSkin_Layout' section. The 'NewTopMenus' is being merged and added to the core Layout table. The View you're seeing in Configuration Manager is basically reading from that static resource table.

Documentation on changing the look and navigation of UCM is available here: http://download.oracle.com/docs/cd/E21764_01/doc.1111/e10807/c04_look_nav.htm#insertedID0

The example component is basically a sample implementation of that. I would suggest loading and playing with that component to see how the pieces interact.

Thanks,
Kyle

Posted by Kyle Hatlestad on September 07, 2011 at 03:43 AM CDT #

Hi Kyle,
I successfully installed the component on UCM 11g PS4. However when I go to Administration -> Admin Actions and click '[publish static, string, and dynamic files', I see from UCM log the following error:
<Dec 13, 2011 2:33:50 PM CET> <Error> <oracle.ucm.idccs> <UCM-CS-000001> <general exception>
<Dec 13, 2011 2:33:50 PM CET> <Error> <oracle.ucm.idccs> <UCM-CS-000001> <general exception>
<Dec 13, 2011 2:33:50 PM CET> <Error> <oracle.ucm.idccs> <UCM-CS-000001> <general exception>

Any idea?

Thank you very much.
Best regards,
S.

Posted by Simone on December 13, 2011 at 01:44 AM CST #

I've got the same problem as Simone. When checking the log files I see:

csMissingPublishSource(C:/Oracle/MIDDLE~1/Oracle_ECM1/ucm/idc/resources/core/images/layouts/Gray/base/) Exception type is 'java.lang.Throwable'.

And when checking that location of course there's nothing there :/

I just want to paint the whole interface in a different colour, nothing too fancy really but I don't seem to be able to have my skins properly working

Posted by guest on January 04, 2012 at 07:03 AM CST #

Ah, I see the errors being mentioned. It seems there is some publishing logic that is looking into the core Oracle_ECM1 directory for those items to be published, even though that skin is coming from the component. But since the component is providing these files, these errors can be safely ignored.

In any event, if you go to the user profile page you should still be able to change the skin to the new Gray setting.

Thanks,
-Kyle

Posted by Kyle Hatlestad on January 04, 2012 at 07:42 AM CST #

Hi Kyle,
I have an other question for you. I am interested to get information on how to add a custom layout and skin for the login page. Can you help to find some information about it ?

Cheers
Myriam

Posted by Myriam on May 08, 2012 at 01:26 PM CDT #

Hi Kyle,

most important thing I want to understand now , is how I get change the layout.js ? I have minor changes to bring like logo image size ...

Thanks so much

Posted by guest on May 10, 2012 at 01:14 PM CDT #

Hi Kyle,

I have requirement for customizing the default error page which comes on failure of Login. Can you help how to go for it?

Thanks

Posted by guest on September 14, 2012 at 11:20 PM CDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

Kyle Hatlestad is a Solution Architect in the WebCenter Architecture group (A-Team) who works with WebCenter Content and other products in the WebCenter & Fusion Middleware portfolios. The WebCenter A-Team blog can be found at: https://blogs.oracle.com/ ateam_webcenter/

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
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
   
       
Today