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 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 defining:
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!
Comments