1. Developing for Oracle WebCenter Portal
  2. Working with WebCenter Portal Assets
  3. Developing Skins

8 Developing Skins

Use JDeveloper to create and edit skins for use in WebCenter Portal.

Topics:

Introduction to Developing Skins

Skins help you define the colors, fonts, images, and some dimensional details like the height and width of your application components to represent your company's preferred look and feel.

This section includes the following topics:

About Skins

Skins are based on the Cascading Style Sheet (CSS) specification. A skin is a CSS file containing various skin selectors that define the styles of your application components. You can adjust the look and feel of any component by changing its style-related properties. Use of a skin in an application helps you to avoid specifying styles for each component individually or inserting a style sheet on each page. Every component automatically uses the styles defined in the skin. Skins help you to change an application's appearance without changing the portal pages themselves.

About Runtime Management of Skins

WebCenter Portal supports the runtime administration of skins to help users continue developing a portal even after it has been deployed. With runtime administration, authorized users can manage an application's skins, and create new ones, in a browser-based environment, with no requirement to install or understand JDeveloper. For more information, see Working with Skins in Building Portals with Oracle WebCenter Portal.

Best Practices for Developing Skins

You can approach creating or modifying a skin to be used in WebCenter Portal as two somewhat separate tasks. The first task is to apply basic styling elements to the larger elements on the page, such as the background and the center of the page, to provide the look and feel for your corporate brand. This is probably the first thing you will want to do. Secondarily, you may also want to apply styling to some of the smaller page elements to fine tune the look and feel.

In many cases a hybrid approach may also work well. Taking the larger elements (page background, main portion of the body, and so on) and applying traditional CSS styling with those, but then getting specific using ADF skinning to generate the overall appearance for WebCenter Portal.

When using CSS-based styling and other techniques in addition to ADF styling, it is often helpful to store the styling assets outside of WebCenter Portal. To do this you can use Content Server to manage all of the unstructured assets for WebCenter Portal. They can include things like CSS and images that you want manage within your environment and provides revision control and workflow. This best practice lets design teams access and work with WebCenter Portal without involving the development team for each and every change.

Creating a Skin

By default, WebCenter Portal uses the portal skin, which is defined in the portal-skin.css file. After creating a WebCenter Portal asset application, you can easily copy and paste this skin into JDeveloper to alter it to meet your specific requirements, or create a new skin from scratch. For more information about how to copy an asset in WebCenter Portal, see Copying an Asset in Building Portals with Oracle WebCenter Portal.

This section includes the following topics:

How to Create a Skin

This section describes how to create a WebCenter Portal asset application for a new skin. Once the asset application with its associated artifacts has been created, you can continue by modifying the skin's CSS file as described in Editing a Skin.

Note:

Oracle recommends that you store asset-related artifacts, such as images and icons, on Content Server, and that you create a folder structure on your content server specifically for asset artifacts so that content is easy to identify and move, if required. This also allows other users to alter those types of content without involving a developer.

To create a WebCenter Portal asset application for a skin:

  1. Create an asset application for the asset specifying Skin as the Asset Type.

    See Creating a WebCenter Portal Asset Application for more information about creating WebCenter Portal asset applications. For information about the artifacts that are created when you create an asset application for a skin, see What You May Need to Know About Skin Artifacts.

  2. In the Application Navigator, right-click the newly created skin's CSS file, and choose Open (Figure 8-1).
  3. Continue by editing the skin as described in Editing a Skin.

What You May Need to Know About Skin Artifacts

Creating a skin asset application produces a default skin, with the following artifacts:

  • the CSS skin selector file (for example, Skin1.css)

  • trinidad-skins.xml, the skin definition file

Both of these files appear in the Navigation bar as shown in Figure 8-2.

Figure 8-2 Skin Asset Application Artifacts

Description of Figure 8-2 follows
Description of "Figure 8-2 Skin Asset Application Artifacts"

Editing a Skin

You can edit a skin after its initial creation by editing the CSS file to edit or add style selectors.

Note:

Oracle recommends that you copy an existing or built-in skin in WebCenter Portal and paste it into the page style CSS file in JDeveloper. You can then use this skin as the starting point for your new skin and publish it back to WebCenter Portal once you've modified it. For more information about how to copy an asset in WebCenter Portal, see Copying an Asset in Building Portals with Oracle WebCenter Portal.

To edit a skin:

  1. In the Application Navigator, right-click the skin's CSS file and choose Open (Figure 8-3).
  2. If you are using an existing WebCenter Portal skin (that is, other than the one created by default when you create the asset application) as a starting point (for example, the portal skin), copy and paste it into the CSS file (see Copying an Asset in Building Portals with Oracle WebCenter Portal).
  3. In the source code for the skin, define the required ADF Faces skin selectors for the components in your application. For example, to define the font family for your application content, you can use the .AFDefaultFont:alias skin selector as shown here: 
    .AFDefaultFontFamily:alias {
font-family: Tahoma, Verdana, Helvetica, sans-serif;
}

    For information about:

  4. Save the CSS file.
  5. Publish and test the skin as shown in Publishing a Skin.

Publishing a Skin

After creating a WebCenter Portal asset application and editing the CSS file for the skin, the next step is to publish it and test it in WebCenter Portal. For instructions on how to publish an asset to WebCenter Portal as a shared asset, or to a specific portal as a portal asset, see Publishing WebCenter Portal Assets.

Conditionally Changing Skins for Users

You can assign different skins per user, page, application, and so on, without impacting the actual application logic. To conditionally set a skin, you use the <skin-family> entry in the trinidad-config.xml file.

You can use EL expressions that can be evaluated dynamically to determine the skin to display. For example, if you want to use the German skin when the user's browser is set to the German locale, and to use the English skin otherwise, use the following <skin-family> entry in the trinidad-config.xml file:

<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>

For more information, see Enabling End Users to Change an Application's ADF Skin in Developing Web User Interfaces with Oracle ADF Faces.

Note:

The default value of <skin-family> is the name of the skin asset you created with the asset application (for example, Skin1) minus any spaces or special characters. If you change the default value, your application users cannot set skins at runtime in the Resource Manager.

You can also use the SkinSetting API to set the skin for a user conditionally. For more information, refer to WebCenter Portal Javadoc API Java API Reference for Oracle WebCenter Portal.