WebCenter Spaces 11g - UI Customization

When developing on top of a portal platform to support an intranet or extranet, a portion of the development time is spent adjusting the out-of-box user templates to adjust the look and feel of the platform for your organization. Generally your deployment will not need to look like anything like the sites posted on http://cssremix.com/ or http://www.webcreme.com/, but will meet business needs by adjusting basic elements like navigation, color palate and logo placement.

After spending some time doing custom UI development with WebCenter Spaces 11G I have gathered a few tips that I hope can help to speed anyone's efforts to quickly "skin" a WebCenter Spaces deployment. A detailed white paper was released that outlines a technique to quickly update the UI during runtime - http://www.oracle.com/technology/products/webcenter/pdf/owcs_r11120_cust_skins_runtime_wp.pdf. Customizing at "runtime" means using CSS and images to adjust the page layout and feel, which when creatively done can change the pages drastically.

WebCenter also allows for detailed templates to manage the placement of major page elements like menus, sidebar, etc, but by adjusting only images and CSS we can end up with something like the custom solution shown below.

Overview620.png

view large image

Let's dive right in and take a look at some tools to make our efforts more efficient.
Tools
WebCenter Spaces compresses its CSS to reduce the amount of information that is transfered from the web server to the client machines. Unfortunately this makes reading source for the HTML page and correlating it with the CSS fairly tricky.

Sample Compressed CSS

Gedit_CSS.png

The following tools are invaluable to quickly navigate page source code and understand how CSS is applied within the page.

Firebug - http://getfirebug.com/
Firebug does an excellent job of allowing us to visually explore the page by right clicking it and selecting "inspecting element", which provides detailed information about elements within the page. It can quickly allow us to also see what CSS styles may be applied "inline", which is an issue that I will discuss in more detail later in this post.

WebDeveloper Toolbar - https://addons.mozilla.org/en-US/firefox/addon/60
This add-on is a staple for any web development professional and is able to provide some nice, visual, element outlining features. These highlight various tags within the page, in addition to providing image information to see how to quickly update the look and feel of the navigation.

View Source Chart - https://addons.mozilla.org/en-US/firefox/addon/655
View Source Chart is a brilliant tool that will provide an easy visual to understand layout of the page and any information associated with the various elements on the page, especially if elements are nested within each other.

** It is important to note that there is an explicit caution in that whitepaper that points out that any updates made to the compressed CSS may not be upgrade-proof.

Customizing WebCenter Spaces UI
Now let's dig in a bit to some of the key updates that were mentioned at the beginning of this post. For some additional background it is helpful to quickly skim the white paper that details customizing the UI and then keep reading. Toward the end of this post I will showcase some of the CSS code that was used to produce the custom UI highlighted below and the process that was used to discover and create the updates.

WebCenter Administration.png

For my custom skin I selected to keep the Default page template, but to use a custom skin. In order to get started with the custom skin I downloaded and deployed a custom skin that is contained in a download referenced in the white paper at http://download.oracle.com/otndocs/tech/webcenter/files/extendwebcenterspaces.zip. As you start to experiment with the CSS adjustments it is helpful to switch between the Maximized and default SiteTemplate settings. The Maximized setting will remove the sidebar without any coding and provides more of a .com feel.

Upadting the CSS and Uploading Images
Taking a tip from my colleague Paul Anderson I used the CSS deployed from extendwebcenterspaces.zip into my local application server's cache at C:\Oracle\Middleware\user_projects\domains\wc_domain\servers\AdminServer\tmp\_WL_user\webcenter\mks60t\war\custom\siteTemplates (or something similar), instead of injecting the CSS in an HTML part of the WebCenter Spaces page as noted in the whitepaper. This allowed me to keep notepad (gedit) open on my desktop and make changes instantly to the document save and view, all using hot keys (much faster than saving via a web UI).

For the images I did follow the approach outlined in the white paper on page 11 that worked very nicely. Page 11 illustrates how you can upload images into a document library task flow in the WebCenter Spaces UI, then get a nice, relative link to the image. You will now be able to reference the images using a relative path, making migration of the CSS very easy. As a side benefit, all content that is uploaded will be versioned by Universal Content Management, as you upload subsequent versions. Just make sure that the Groupspace's document service is set with the security that you wish those images to have.

Issues with Inline Styles
Pretty early in the process I found myself scratching my head as to why certain CSS updates were not taking. When I examined the page more closely I found various inline styles that had been applied to elements on the page. After a bit of Googling I found a CSS hack to help that allows you to override an inline style (http://www.sitepoint.com/blogs/2009/05/27/override-inline-css/).

CustomSiteTemplate.png

A Close Look at Adjusting CSS for Navigation
For the remainder of this post let's look at how most of the navigation in the above screen shot was updated to reflect a more "web like" look and feel with only a few CSS updates. To get started I examined the top level navigation with the tools mentioned at the top of this post. The tools revealed the following about the navigation

Firebug
Inspecting an Element

Firebug.png

Once you have installed Firebug a new option in the context menu (right-click menu within pages) will allow you to "Inspect Element". This will bring up a very detailed bit of information about the styling, as well as highlight where within the code your selected element resides. It even goes to a level of detail that shows what styles are inline vs CSS driven. This was very helpful. Note that you can also type directly into the style information displayed in Firebug and the UI will update real time on the screen. It is a great way to test what changes would be needed for a certain look very quickly - speeding the trial and error process.

Visual Source Chart
Showing Nested DIVs with Class Information

View source chart.png

Notice the classes above that are assigned to the DIV tags and how they correlate with the sample CSS below. For each top level navigation item the left, center and right DIV tags are easily accessible for modification.


/* Left side of non-selected top level navigation */
.xwe,.xwh {float:left;background-color:transparent;line-height:1.85em;background-repeat:no-repeat;background-position:bottom;/*background-image:url(/webcenter/adf/spaces/skins/white/images/tab_rich_l3_above_start_n.png);*/width:10px;border:none;-moz-box-sizing:border-box}

/* Right side of non-selected top level navigation. This will also hold the amount of space between the menu items @ 20px due to margin */
.xwf,.xwi {float:left;background-color:transparent;line-height:1.85em;background-repeat:no-repeat;background-position:bottom;/*background-image:url(/webcenter/adf/spaces/skins/white/images/tab_rich_l3_above_end_n.png);*/width:20px;border:none;-moz-box-sizing:border-box;margin-right: 20px;}

/* Center of non-selected top level navigation */
.xwg,.xwj {float:left;white-space:nowrap;background-color:transparent;line-height:1.85em;/*background-image:url(/webcenter/adf/spaces/skins/white/images/tab_rich_l3_above_mid_n.png);*/background-repeat:repeat-x;background-position:bottom;border:none;-moz-box-sizing:border-box}

Web Developer Toolbar
Outlining Block Elements

Webdevtoolbar_outline_block.png

This gives a general sense of how the page is broken apart from a markup standpoint.

Web Developer Toolbar
Showing Images (and sources) that are not dictated by CSS

Webdevtoolbar_image1.png

This will tip you off as to which images are not accessible via CSS, but are actually referenced directly within the page markup, along with their respective locations.

Web Developer Toolbar
Complete image listing for page. This is very helpful when trying to see what images you may want to replace within the page.

Webdevtoolbar_image_list.png

This listing will show all images, whether referenced within the page markup or via CSS. I used this list to quickly identify what image files were responsible for driving the page navigation experience and was able to swap them out very quickly.

Based on the analysis from the tools above it is possible to quickly identify which CSS classes and IDs need to be changed within the CSS file, as well as any references that should be added or updated to images needed within the page template.

The sample screen that was shown at the top of this post made use of the following modifications to the CSS. Please see the comments in the code below to understand what they impacted within the page design.


/* Use an image as the header background - note that the body line was added to the CSS file, but another element could be used */
body
{
background: url('/webcenter/content/conn/MyContentServer/path/webcenter/WebOrientedArchitecure/images/bg_header.gif') repeat-x;
}

/* Background for lower navigation item that is selected */
.x40 .x43,.x49 .x4c,.x4f .x4l A,.AFLinkAccessKeyStyle,.x9t,.xa3,.xa8,.xf3.p_AFSelected,.xf4.p_AFSelected,.xf6.p_AFSelected,.x1ki,.x1km,.x1kr {font-weight:bold;/*background-image:url(/webcenter/content/conn/MyContentServer/path/webcenter/WebOrientedArchitecure/images/bottom_nav.png);*/ background-size: 100%;padding:2px 6px 3px 6px;background-position: top left;}

/* Change the font color of the selected top level navigation item */
[theme="dark"],.xy4.p_AFHighlighted .xy2[theme="dark"],.xxw.p_AFDepressed .xy2[theme="dark"],.xwl.p_AFSelected[theme="dark"],.xwl[theme="medium"],.xf7.p_AFSelected .xik[theme="medium"] {color:#ffffff}

/* Remove the underline on hover for hyperlinks in navigation */
.x3u .x3x a:hover,.x3w .x3x a:hover,.x40 .x43 a:hover,.x42 .x43 a:hover,.x49 .x4c a:hover,.x4b .x4c
a:hover,.AFAccessKeyStyle,.x9s,.xfb,.xfc,.xfd,.xfe,.xff,.xfp,.xfq,.xfr,.xfu,.xfw,.xfx,.xgv,.xgw,.xgx,.xgy,.xgz,.xf3:hover,.xf4:hover,.xf6:hover,.xhf,.xey:hover,.xid .xii:hover,.xji,.xko:hover,.xmo,.xmr,.xoa,.xob,.xoc,.xod,.xoe,.xof,.xpi,.xw8,.xwa,.xik:hover,.xwl:hover,.xy5,.xy6,.xy7,.xys,.xyt,.xyu,.xzq,.xzr,.x100,.x10a,.x10b,.x10c,.x12p,.x12v .xii:hover,.x12w,.x139,.x13b,.x16c,.x16d,.x6e.x17c .xxu.p_AFHighlighted .xy0,.RtcPresenceText:hover,.x17t:hover,a.actionObject:hover,a.x17u:hover,.xit.p_AFUnvisited:hover,.xjc.p_AFUnvisited:hover,.xit.p_AFTrainVisited:hover,.xjc.p_AFTrainVisited:hover,.xit.p_AFTrainVisited:active,.xf0:hover,.xfg:hover,.xfh:hover,.xfi:hover,.xfj:hover,.xfk:hover,.xfl:hover,.xfm:hover,.xzo:hover,.xzp:hover {text-decoration:none}

/* Make inactive top level navigation test dark */
.xfn.p_AFToday .xfk,.xfn.p_AFToday.p_AFActiveDay .xfk,.xfn.p_AFActiveDay .xfk,.xfo.p_AFToday .xfm,.xfo.p_AFActiveDay .xfm,.xey.p_AFDisabled[theme="dark"],.xzo:hover[theme="dark"],.xzo:active[theme="dark"],.xzo:focus[theme="dark"],.AFPanelFormLayoutContentCell[theme="dark"],.xph[theme="dark"],.xt0[theme="dark"],.xt6[theme="dark"],.xt7[theme="dark"],.xt8[theme="dark"],.xt9[theme="dark"],.xwl[theme="dark"],.xik[theme="medium"] {color:#000000; size: 12px; font-weight:bold; padding: 8px;}

/* Left side of non-selected top level navigation */
.xwe,.xwh {float:left;background-color:transparent;line-height:1.85em;background-repeat:no-repeat;background-position:bottom;/*background-image:url(/webcenter/adf/spaces/skins/white/images/tab_rich_l3_above_start_n.png);*/width:10px;border:none;-moz-box-sizing:border-box}

/* Right side of non-selected top level navigation. This will also hold the amount of space between the menu items @ 20px due to margin */
.xwf,.xwi {float:left;background-color:transparent;line-height:1.85em;background-repeat:no-repeat;background-position:bottom;/*background-image:url(/webcenter/adf/spaces/skins/white/images/tab_rich_l3_above_end_n.png);*/width:20px;border:none;-moz-box-sizing:border-box;margin-right: 20px;}

/* Center of non-selected top level navigation */
.xwg,.xwj {float:left;white-space:nowrap;background-color:transparent;line-height:1.85em;/*background-image:url(/webcenter/adf/spaces/skins/white/images/tab_rich_l3_above_mid_n.png);*/background-repeat:repeat-x;background-position:bottom;border:none;-moz-box-sizing:border-box}

/* Portlet header background */
.x18w.p_AFMedium {border-top:0px solid #BFC6C9;border-bottom:0px solid #CCD1D4;background-image:url(/webcenter/content/consn/MyContentServer/path/webcenter/WebOrientedArchitecure/images/portlet_bg.png);background-repeat:repeat-x; background: #c4cee0;}

/* Active top level navigation */
.xb7.p_AFSelected .xwj[theme="dark"],.xb7.p_AFSelected.p_AFDisabled .xwj[theme="dark"],.xf7.p_AFSelected .xwg[theme="medium"],.xf7.p_AFSelected.p_AFDisabled .xwg
[theme="medium"] {color:#000000;background:url(/webcenter/content/conn/MyContentServer/path/webcenter/WebOrientedArchitecure/images/bg_mainNavState.gif);}

/* Left side of active top level navigation */
.xb7.p_AFSelected .xwh[theme="dark"],.xb7.p_AFSelected.p_AFDisabled .xwh[theme="dark"],.xf7.p_AFSelected .xwe[theme="medium"],.xf7.p_AFSelected.p_AFDisabled .xwe[theme="medium"] {background-image:url(/webcenter/content/conn/MyContentServer/path/webcenter/WebOrientedArchitecure/images/tab_rich_l1_above_start_a.png);}

/* Right side of active top level navigation */
.xb7.p_AFSelected .xwi[theme="dark"],.xb7.p_AFSelected.p_AFDisabled .xwi[theme="dark"],.xf7.p_AFSelected .xwf[theme="medium"],.xf7.p_AFSelected.p_AFDisabled .xwf[theme="medium"] {margin-left: -5px; background-image:url(/webcenter/content/conn/MyContentServer/path/webcenter/WebOrientedArchitecure/images/tab_rich_l1_above_end_a.png);margin-right: 20px;}

/* Here are some overrides that I used - notice how a few of them call out CSS IDs that are directly related to controls from the ADF template */

/* Move down area that just contains the nav */
.xna[style]{
top: 20px !important;
}

/* Move sidebar down on left side */
#T\:wc_sid
{
top: 120px !important;
}

/* Make most of the controls and content on the page more web-like by adding left, right and top margins */
#T\:globalContainer\:\:c
{
margin-left: 40px;
margin-right: 40px;
margin-top: 10px;
}

/* Remove logo provided OOTB */
#T\:wc_glb\:gtbppgl1
{
display: none;
}

/* Remove portlet minimize button */
.x19b
{
display: none;
}

Next Steps
If you are interested in customizing the WebCenter Spaces UI download the tools highlighted above and start to explore the code. Hopefully the sample code will help you to quickly customize common items like the menu layout and have you well on your way to implementing a nice custom look for your Spaces instance!

Comments:

Some of those styles differ from a browser to another! How to solve this problem, or should I try it in all browser to know which is which and make a single CSS for all of them. Thats for the argument sake, I did the same as you did before, but I frankly don't recommend not using Selectors!!

Posted by Amr Gawish on April 17, 2010 at 10:09 PM CDT #

That is a good point Amr. You are correct that the above is just a glance at how to adjust the WebCenter UI and CSS standards / approaches for compatibility should definitely be respected for actual implementation to work well in all browsers.

Posted by john.brunswick on April 19, 2010 at 02:30 AM CDT #

For those of us new to WebCenter and looking for the documents posted as links from OTN, they have been moved. Nothing stays the same at Oracle :) Fear not, click one of the links and it should take you to the new or latest WebCenter page on OTN: From Products go Middleware > WebCenter. Hopefully you will land on the Overview tab, and several other tabs are available to you. I have some of the documents under the Demonstartion and Samples link and the others on the Learn More tab. Here the content is broken out by component or product functionality, however you want to term it. From here try the Whitepapers link and you will find the Custom Skinning Document and supporting files.

Posted by Sydney Nurse on September 26, 2010 at 07:14 PM CDT #

Thanks for the tips John! I use firbug almost daily for my css but it is the first time I saw Source Chart, very nice add on. Ciao Marco realizzazione siti web

Posted by Marco on October 09, 2010 at 06:25 AM CDT #

Post a Comment:
Comments are closed for this entry.
About

Enterprise 2.0 and Content Management

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