Skin Analysis on WebCenter Spaces Page Template

Oracle WebCenter Spaces provides framework and resources that ready for business users to use after installation and configurations. But we all know the default look and feel of the site is really not appealing. I’ve seen prospective customers direct eyes on the WebCenter great features but step back because of the look and feel. I will have to confirm them that the site can be skinned and customized to whatever you want the site to look like. And that’s true, there are indeed great looking sites out there using sophisticated CSS and JavaScript (e.g. JQuery). Those sites are mostly designed from a HTML markup perspective and mixed with ADF components, which could make the source codes of the pages hard to read and maintain. Hard to read? Who cares, as long as it works for what the customer wants. But one of the drawbacks I’ve seen and it’s worthy to mention is it breaks the partial page rendering because of the mix of html and ADF components. Most of the pretty WebCenter public sites so far don't have the PPR feature - every navigation is a full page refresh - which doesn't surprise me (If anyone knows any public sites with PPR enabled, please let me know). Therefore, I will do a few analyses on the standard WebCenter Space page template and make a few changes on the CSS file to improve the look and feel of the WebCenter Spaces site. It might not be good enough for your needs, but should be a good start to begin with.

The default page template widely used in WebCenter Spaces is the one called “Top Navigation”. Please note there is another version of top navigation but stretchable. I will take the non-stretchable one to present as it is the default one being used. Here is the screenshot of it using the default top navigation page template. 

Page Structure

I’ve marked four regions which will represent on the page definition later on. To grab the source codes for the page template, just go to the administration section -> resources, from the ‘page template’ group, make a copy of the top navigation template and rename it whatever you like, from the edit link, you will be able to see the ‘Edit Source’ link enabled and that’s how you can grab the source code easy and quick. You can paste the source codes into JDeveloper which will help us to understand the page template structure. Here is the screenshot of the page structure:

As you can see, the page template starts with a panelGroupLayout in a scroll layout, and this is how this template is a flow layout template (fixed width of the page). For a stretchable layout, you will see it starts with the ‘panel stretch layout’.

Next you will find two Spaces tags <wcdc> and we will skip that.

Next is a decorative box component and it’s the template header part and the A region in the first image. This region contains site logo, a search inputbox region and several command/go links. You are definitely free to customize those components if you like. One thing you may consider to do is to upload your site logo to content server and put the image url to an ADF image component for the site logo. Decorative box comes with two facets: center and top. By default, the top facet doesn’t have any background (white color), but the center has some light gray background on the top edge of it. See the following:

Besides, decorative box provides an additional property for styling call “theme”.

Tips: About Theme

The purpose of themes is to provide a consistent look and feel across multiple components for a portion of a page. A common usage for themes is in a page template where certain areas have a distinct look. For example, a page may have a branding area at the top with a dark background and light text, a navigation component with a lighter background, and a main content area with a light background.

A component that sets a theme exposes that theme to its child components and therefore the theme is inherited. Themes can be set (started or changed) by the following components:

·         af:document

·         af:decorativeBox

·         af:panelStretchLayout

·         af:panelGroupLayout

By definition, themes are cascaded down through all child components. All HTML elements that are rendered by a rich component within a themed component will have the theme added to its list of style classes. Themes are not compatible with tonal styles and therefore only one method can be used per page (themes or tonal styles). A blank theme will remove the current theme, and a value of "inherit", null or not setting a theme will use the current theme. Skins are the sources of the themes. Some skins may have no themed definitions. Suggested theme names include "dark", "medium", "light", and "default".

Besides decorative box, Spaces have additional theme styling, such as “webcenter” is applied to the decorative box by default. If you want to have your own background and styling, I suggest avoiding using the decorative box simply by dragging its direct child out of the decorative box. In this case it’s ‘panel border layout’. Just drag the panel border layout out of the decorative box and comment it. You can apply your styling directly on the panel border layout.

Next component is the navigation panel region which is marked as ‘B’. The region is referring a build-in navigation task flow. To examine the source codes of it, please refer to another blog I posted here.

Next part is the content which is just a facet in a page template. It’s marked as ‘C’.

The last part is the ‘panel border layout’ component again wrapping the footer of the page template. It’s marked as ‘D’.

Styling

Spaces template uses style class for styling purpose, which comes with “WC” as its prefix. Now I will list all the style class that are used in the top navigation template by what effect it could take for styling in the page.

Here I am going to change the background to white:

/*override the background*/

.WCSiteTemplateBackground{

    background: #FFFFFF !important;

}

Change the navigation background to dark gray color:

/*change the styling of the page template top navigation*/

.WCSiteTemplateTopNavPanel {

    background: #666666 !important;

}

To change the navigation links text color to white:

af|commandMenuItem.WCSiteTemplateTopNavPanel::bar-item-text {

    color: #FFFFFF !important;

}

You can add hover effect if you want by defining:

af|commandMenuItem.WCSiteTemplateTopNavPanel::bar-item-text:hover {}

Define the background of the navigation link when it’s selected:

/*the styling when tab is selected*/

.WCSiteTemplateTopNavPanelSelected {

    background: #FF8000 !important;

}

You can define the text color to change when it’s selected by:

af|commandMenuItem.WCSiteTemplateTopNavPanelSelected::bar-item-text {}

Define the navigation link to change color when hovering:

/*the styling when mouse hover*/

.WCSiteTemplateTopNavPanel:highlighted {

    background: #7A7A7A !important;

}

Change the footer background:

/*change the background of the page template footer*/

.WCSiteTemplateFooter {

    background: #666666 !important;

}

Change the header and footer font color:

/*change the font color on the template header*/

.x106, .x107 {

    color: #FFFFFF !important;

    font-weight: bold !important;

}

By the above few CSS changes and some minor change on the template, you will find your pages could look like this:

Is it nice and neat? Besides, you won’t have your ppr navigation broken. Enjoy!