2 Replies Latest reply: May 21, 2013 9:36 AM by 1010161 RSS

    UCM Skin and Layout Customization

    850825
      Hi,

      I have been trying to figure out this one on UCM 11g (11.1.1.4.0). I took the 10g sample CreateLayout component, modified it to be compatible with 11g, and installed. I created one custome oracle_logo.png, copied the skin.css from the original TopMenu/Oracle folder, and edited some colors. After the component was installed, I can see custom folder under UCM instance. I restarted the ucm, and did publish static, and dynamic files. UCM created my custom layout under weblayout/resources folder with my oracle_logo.png but overwritten my skin.css file. The orginal skin.css file was around 52 kb but UCM overwrote this and put a different skin.css file which is only 29 kb. I'm not sure where is this coming from. However, if i edit the skin.css in the weblayout folder itself then i can see the changes in the interface (only my custom TopMenu is working but not Trays as it is not showing left navigation). Please advice. Please see below the sample resource.htm file.

      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>
      CreateLayout staticResTable
      </title>
      </head>
      <body>

      <!--[[%
      - The following table is merged into the LmLayouts table, and defines two new
      - layouts for the Content Server: NewTopMenus and NewTrays, both of which are
      - based upon existing Content Server layouts. Notice how both of them have
      - the 'enabled' column set to 1. Changing one of them to 0 would disable that
      - layout in the Content Server, preventing users from selecting it in their
      - profile.
      %]]-->
      <@table CreateLayout_Layouts@>
      <table border=1>
           <tr>
                <td>id</td><td>label</td><td>enabled</td>

           </tr>
           
           <tr>
                <td>NewTopMenus</td><td>New Top Menus</td><td>1</td>
           </tr>
           <tr>
                <td>NewTrays</td><td>New Trays</td><td>1</td>

           </tr>
      </table>
      <@end@>

      <!--[[%
      - The following table is merged into the LmLayoutSkinPairs table, and defines the relations
      - between the new layouts and the Oracle Skin.
      - skinDir, if empty, will be computed as "resources/layouts/<$layout$>/<$skin$>/" and is relative to
      - weblayout.
      %]]-->
      <@table CreateLayout_LayoutsSkinPairs@>
      <table border=1>
           <tr>
                <td>layout</td><td>skin</td><td>skinDir</td><td>enabled</td>
           </tr>

           
           <tr>
                <td>NewTopMenus</td><td>Oracle</td><td></td><td><$if isLayoutEnabled("NewTopMenus") and not isTrue(getValue("#env", "DisableSkin_Oracle"))$>1<$else$>0<$endif$></td>
           </tr>
           <tr>
                <td>NewTrays</td><td>Oracle</td><td></td><td><$if isLayoutEnabled("NewTrays") and not isTrue(getValue("#env", "DisableSkin_Oracle"))$>1<$else$>0<$endif$></td>

           </tr>
      </table>
      <@end@>


      <!--[[%
      - This table is merged into the PublishedWeblayoutFiles table. It describes a
      - number of files which will be created from Content Server templates and then
      - pushed out to the weblayout directory.
      %]]-->
      <@table CreateLayout_PublishedWeblayoutFiles@>
      <table border=1>
           <tr>
                <td>path</td><td>template</td><td>class</td><td>loadOrder</td><td>doPublishScript</td>
           </tr>

           
           <!--[[%
           - The following three entries are used to push out the necessary JavaScript
           - and CSS files for a new Top Menus layout with a single skin. Notice how we
           - can turn the publishing for any of these files off by either disabling
           - the NewTopMenus layout in the CreateLayout_Layouts table above, or by
           - setting a config.cfg flags such as DisableNewTopMenusPublishing.
           - If we wanted to add more skins to this layout, we would need to specify
           - additional skin.css files to push out to each skin directory.
           -
           - Note that since these are constructed from standard Content Server templates,
           - it is possible to use a completely different and custom template for any of
           - these files. It is also possible to override any of these templates so that
           - both your custom layouts as well as the standard layouts that ship with the
           - content server will use the modified file.
           %]]-->
           <tr>
                <td>resources/layouts/NewTopMenus/layout.js</td>
                <td>TOP_MENUS_LAYOUT_JS</td>
                <td>javascript:layout:NewTopMenus</td>
                <td>150</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>150</td>
                <td><$if isLayoutEnabled("NewTopMenus") and (not DisableOracleSkinPublishing) and (not DisableNewTopMenusPublishing)$><$doPublish = 1$><$endif$></td>

           </tr>
           
           <!--[[%
           - Much like the NewTopMenus rows above, the following five entries are used
           - to push out the necessary JavaScript and CSS files for a new Trays layout
           - with a single skin.
           %]]-->
           <tr>
                <td>resources/layouts/NewTrays/layout.js</td>
                <td>TRAYS_LAYOUT_JS</td>
                <td>javascript:layout:NewTrays</td>
                <td>150</td>

                <td><$if isLayoutEnabled("NewTrays") and (not DisableNewTraysPublishing)$><$doPublish = 1$><$endif$></td>
           </tr>
           <tr>

                <td>resources/layouts/NewTrays/Oracle/skin.css</td>
                <td>IDC_SKIN_CSS</td>
                <td>css:layout:NewTrays</td>
                <td>150</td>
                <td><$if isLayoutEnabled("NewTrays") and (not DisableOracleSkinPublishing) and (not DisableNewTraysPublishing)$><$doPublish = 1$><$endif$></td>

           </tr>
      </table>
      <@end@>


      <!--[[%
      - This table is merged with the PublishedStaticFiles table. It lists a number
      - of directories that contain files which should be published to the weblayout
      - directory.
      %]]-->
      <@table CreateLayout_PublishedStaticFiles@>
      <table border=1>
           <tr>
                <td>srcPath</td>
                <td>path</td>
                <td>class</td>

                <td>loadOrder</td>
                <td>doPublishScript</td>
                <td>canDeleteDir</td>
           </tr>
           
           <!--[[%
           - The following two rows describe the basic files that need to be published for
           - a single skin in both the NewTopMenus and NewTrays layouts. Additional entries
           - can be added here for additional skins. Notice how the files being published
           - come from the stellent/shared directory, not from this component. That way,
           - when the Content Server is updated, these new layouts will automatically
           - receive those changes, too, and no manual work will need to be done to sync
           - the standard layouts with the new, custom layouts.
           %]]-->
           <tr>
                <td></td>
                <td>resources/layouts/NewTopMenus/Oracle</td>
                <td>resources:layout:NewTopMenus</td>
                <td>30</td>
                <td><$if isLayoutEnabled("NewTopMenus") and (not DisableOracleSkinPublishing) and (not DisableNewTopMenusPublishing)$><$doPublish = 1$><$endif$></td>
                <td>1</td>

           </tr>
           <tr>
                <td></td>
                <td>resources/layouts/NewTrays/Oracle</td>
                <td>resources:layout:NewTrays</td>
                <td>30</td>
                <td><$if isLayoutEnabled("NewTrays") and (not DisableOracleSkinPublishing) and (not DisableNewTraysPublishing)$><$doPublish = 1$><$endif$></td>

                <td>1</td>
           </tr>
           
           <!--[[%
           - The following row provides a mechanism for overriding files that already exist
           - in the NewTrays/Oracle folder. In addition, it can be used to add new files
           - to this folder. Note that the loadOrder of this row is greater than the loadOrder
           - of the rows above. This ensures that any files published by this entry will
           - override any conflicting files published by the previous ones. So, simply dropping
           - a file into publish/resources/layouts/NewTrays/Oracle located within this component's
           - folder will cause that file to be pushed out to the NewTrays/Oracle layout
           - in the weblayout folder.
           %]]-->
           <tr>
                <td>publish/resources/layouts/NewTopMenus/Oracle</td>
                <td>resources/layouts/NewTopMenus/Oracle</td>
                <td>resources:layout:NewTopMenus</td>
                <td>150</td>
                <td><$if isLayoutEnabled("NewTopMenus") and (not DisableOracleSkinPublishing) and (not DisableNewTopMenusPublishing)$><$doPublish = 1$><$endif$></td>
                <td>1</td>

           </tr>
           <tr>
                <td>publish/resources/layouts/NewTrays/Oracle</td>
                <td>resources/layouts/NewTrays/Oracle</td>
                <td>resources:layout:NewTrays</td>

                <td>150</td>
                <td><$if isLayoutEnabled("NewTrays") and (not DisableOracleSkinPublishing) and (not DisableNewTraysPublishing)$><$doPublish = 1$><$endif$></td>
                <td>0</td>
           </tr>
      </table>
      <@end@>


      </body></html>