Skip Headers
Oracle® Fusion Middleware User's Guide for Oracle WebCenter Portal: Spaces
11g Release 1 (11.1.1.6.0)

Part Number E10149-10
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

14 Working with Skins

To give individual spaces or the entire Spaces application a distinct personality or to associate with specific branding, portal designers can use skins to achieve the appearance and look and feel that suits their organization.

This chapter describes how to create and manage skins in Spaces. It includes the following sections:

For generic information about adding and editing different types of resources, see Chapter 10, "Working with the Resources that Compose a Portal or Community."

Audience

This chapter is intended for users who want to create and manage skins in their Spaces application.

Portal designers with the application permission Application-Skins-Create, Edit, and Delete Skins can manage application-level skins. Space moderators with the permission Space-Resources-Create, Edit, and Delete Resources (standard permission model) or Space-Skin-Create, Edit, and Delete Skins (advanced permission model) can manage space-level skins. For information about roles and permissions, see Chapter 20, "Understanding Security."

14.1 What You Should Know About Skins

A skin is a resource that defines colors, fonts, and other aspects of various components used on the pages of a space. A skin changes the way the user interface appears, and not how the application functions.

Skins are based on the Cascading Style Sheet (CSS) specification. A skin is made up of various selectors that define the CSS styles or properties of different parts of a component. You can adjust the look and feel of any component by changing its style-related properties. Some selectors, like a background or foreground color or a font style, may be global and affect all components.

Out-of-the-box, Spaces provides certain built-in skins (Figure 14-1). Authorized users can change the appearance of a specific space or the entire application by using built-in skins.

Figure 14-1 Built-in Skins

Built-in default skins
Description of "Figure 14-1 Built-in Skins"

If built-in skins do not quite match your requirements, you can create custom skins of your own within Spaces to brand your application or specific spaces as desired.

Spaces also gives you the flexibility to use an IDE like Oracle JDeveloper to create new skins or edit custom Spaces skins. You can then upload these skins back into the Spaces application.

14.2 Creating a Skin

If you have specific branding requirements for the way your application looks, you may want to create a custom skin of your own instead of using built-in skins. In Spaces, you can create skins at two levels—application level and space level.

To create a custom skin:

  1. Navigate to the Resources page of your Spaces application or the space in which you want to create the custom skin, as described in Section 10.1.4, "Accessing Resources."

  2. In the left navigation panel, under Look and Layout, select Skins.

  3. On the menu bar, click Create.

  4. In the Create New Skin dialog, in the Name field, enter a name for the custom skin (Figure 14-2).

    Figure 14-2 The Create New Skin Dialog

    Create New Skin Dialog
    Description of "Figure 14-2 The Create New Skin Dialog"

  5. In the Description field, enter a description for the custom skin.

    The description is displayed below the skin name on the Resources page and as a tool tip when selecting a skin. You should ensure that the description helps users determine if they want to use this particular skin.

  6. From the Copy from list, select an existing skin to use as the starting point for your new custom skin.

    Tip:

    You can also create a new custom skin by making a copy of an existing skin, as described in Section 14.4.4, "Copying a Skin."
  7. Click OK.

    The newly created custom skin is listed on the Resources page. The gray circle icon next to the custom skin indicates that it is not yet published and hence is not available to other users. For information about publishing a skin, see Section 14.4.1, "Showing and Hiding a Skin."

Note:

You can also create skins in tools like Oracle JDeveloper that provide you more control and flexibility in skin creation. For information, see Section 14.6, "Using JDeveloper to Build Your Skins."

14.3 Editing a Custom Skin

This section describes how to edit custom skins. It includes the following subsections:

14.3.1 What You Should Know About Skin Editing

Spaces supports two types of skin editing, source code editing and simple editing.

This section includes the following subsections:

14.3.1.1 About Source Code Editing

Source editing enables you to edit the source code of a custom skin in a text editor. This provides a powerful means of editing all the skin selectors available in a skin's CSS file.

Use the Edit Source dialog to edit a custom skin's source code. In this dialog, the source code is presented on the CSS tab (Figure 14-3).

Figure 14-3 Editing Skin Selectors

Editing a skin selector
Description of "Figure 14-3 Editing Skin Selectors"

A skin's CSS file supports and contains ADF skin selectors and the skin selectors associated with Composer components. For information about ADF skin selectors, refer to Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors. For information about Composer components skin-specific selectors, refer to the section "Style Selectors for Composer Components" in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

In addition to ADF and Composer skin selectors, a skin's CSS file contains three Spaces-specific selectors. These include:

  • .WCPageTemplate:alias - Defines the background color and the image and its position for the main area of the page template below the top banner, as shown in the example below:

    .WCPageTemplate:alias
    {
      background-image:url(/afr/fusion/dbd_centerGradient.png);
      background-repeat:repeat-y;
      background-position:top center;
      background-color: #024296;
      color: white;
    }
    
  • .WCContent - Defines the background color of the area of the page template containing the actual page content.

    .WCContent
    {
      background-color:#EEF3F8;
      border-top:1px solid #BECFE2;
    }
    
  • .WCPortletContentMedium:alias - Defines the background color and image of task flows and portlets in showDetailFrame components.

    .WCPortletContentMedium:alias
    {
      background-image:url(/adf/images/gradient-275x275-fcfcfc.png);
      background-repeat:no-repeat;
    }
    

While editing the source code of a custom skin, you can add, edit, or delete any skin selector to suit your requirements. For example, if you want to override the default font size, then in your skin's CSS file, you can specify the required size in the skin selector shown in Example 14-1.

Example 14-1 Overriding the Default Font Size in a Skin's CSS File

.AFDefaultFont:alias
{
font-size:12px;
}

When you edit the code using the Edit Source dialog, the format of the code is validated and an error message is displayed if you miss any tags or add them incorrectly.

For information about how to edit the source code of a skin, see Section 14.3.2, "Editing the Source Code of a Custom Skin."

14.3.1.2 About Simple Editing

Simple editing provides a simple means of editing a skin's basic appearance settings: font, background color, and background image. To perform simple editing, you use the Edit dialog (Figure 14-4).

Figure 14-4 The Edit Dialog

The Edit Dialog used for editing a skin
Description of "Figure 14-4 The Edit Dialog"

In the Edit dialog, you can define settings for the target areas listed below. Each target area maps to a WebCenter Portal-specific skin selector available in a skin's CSS file (described in Section 14.3.1.1, "About Source Code Editing.")

  • Page Template - Enables you to define the background color, background image, and font for the template used on a page. In a Skin's CSS file, this target area maps to the .WCPageTemplate:alias selector, which is used by all page templates.

  • Page - Enables you to choose the color and image of the page background. This target area sets the .WCContent style selector in the CSS file.

  • Task Flow/Portlet - Enables you to define the background color and image of task flows and portlets on a page. In the CSS file, this sets the .WCPortletContentMedium:alias selector, which defines the background color of Show Detail Frames that use medium background.

For information about how to edit the source code of a skin, see Section 14.3.3, "Editing a Custom Skin Using the Edit Dialog."

14.3.2 Editing the Source Code of a Custom Skin

Use the Edit Source dialog to expose the underlying code of a custom skin and make adjustments to the skin selectors that make up the skin.

Caution:

You must have a thorough understanding of CSS specification about selectors if you plan to edit skin selectors. You might get into a situation where you are not sure why your style is not getting picked up, whereas it could very well be that the skin you are extending has a selector that is more specific than your selector.

To edit the source code of a custom skin:

  1. Navigate to the Resources page of your application or the desired space, as described in Section 10.1.4, "Accessing Resources."

  2. In the left navigation panel, under Look and Layout, click Skins.

  3. From the list of skins displayed on the right, select the skin whose source code you want to edit.

  4. From the Edit menu, choose Edit Source.

  5. In the Edit Source dialog, change the required settings (Figure 14-5).

    Figure 14-5 Editing Skin Selectors

    Editing a skin selector
    Description of "Figure 14-5 Editing Skin Selectors"

  6. Click OK.

14.3.3 Editing a Custom Skin Using the Edit Dialog

To perform simple editing of a custom skin using the Edit dialog:

  1. Navigate to the Resources page of your application or the desired space, as described in Section 10.1.4, "Accessing Resources."

  2. In the left navigation panel, under Look and Layout, click Skins.

  3. From the list of skins displayed on the right, select the skin that you want to edit.

  4. From the Edit menu, choose Edit.

    Figure 14-6 Editing Skin Properties

    Editing skin appearance properties
    Description of "Figure 14-6 Editing Skin Properties"

  5. In the Edit dialog, from the Item list, select the target area for which you want to update skin properties.

    Select any one of the following options:

    • Page Template - Select to choose the background color, background image, and font for the template used on a page.

    • Page - Select to choose the color and image of the page background.

    • Task Flow/Portlet - Select to choose the background color and image of task flows and portlets on a page.

  6. From the Background Color list, select the background color you want to use for the target area.

    When you select a background color, its RGB value appears in the Color field, and the selected target area is highlighted with that color in the Preview panel on the right.

  7. In the Image field, enter the URI path of the image you want to use as a background image.

    Note:

    You can either specify an absolute URL (where the URL should also work if entered in a browser address field), or a relative URL that points to an image located somewhere in Spaces. To store an image in Spaces, you must upload the required file using the Documents service, as described in Section 41.8.1, "Uploading Files." You can then obtain the image's URL as described in Section 41.26.1, "Retrieving the URL for a Folder or File."
  8. You can choose to repeat the background image horizontally and/or vertically. Depending on your requirement, select the following checkboxes:

    If you select both these checkboxes, copies of the selected image are repeated across the entire target area (Figure 14-9).

    Figure 14-9 Repeating an Image Across the Entire Target Area

    Repeating an image across the entire target area
    Description of "Figure 14-9 Repeating an Image Across the Entire Target Area"

  9. From the Font Family list, select the font you want to use for the Page Template area.

    The Font list is displayed only when Page Template is selected as the target area.

  10. Click OK.

14.4 Managing a Skin

This section describes the tasks involved in managing skins. It includes the following subsections:

14.4.1 Showing and Hiding a Skin

When you create a custom skin, by default it is marked as hidden. A hidden skin is not available for use in the application, Home space, or any other space. To make a skin available, you must publish it. Further, for a custom skin created at the application level, you can control whether it is available to all or only selected spaces in the application.

Showing or hiding a skin follows the same procedure as any other resource. For information, see Section 10.4.3, "Showing and Hiding Resources."

For generic information about resource availability in Spaces, see Section 10.4.2, "Setting Properties on a Resource."

14.4.2 Setting Properties on a Skin

A range of properties is associated with custom skins that authorized users can access through the Edit Properties dialog.

This section includes the following subsections:

14.4.2.1 What You Should Know About Skin Properties

Use custom skin properties to:

  • Enter a display name and description

  • Provide an icon for use

  • Apply a category to classify a skin

  • Specify availability (for application-level skins only)

  • Associate attribute name/value pairs, for example, to control whether a page based on a selected page style opens in view or edit mode once it is created

Figure 14-10 shows the Edit Properties dialog of a custom skin. You specify the various properties in the General, Exclude Resource Usage, and Attributes sections.

Figure 14-10 Setting Skin Properties

Setting skin properties
Description of "Figure 14-10 Setting Skin Properties"

With each custom skin, three default attributes are associated: skinId, skinFamily, and skinExtends. Table 14-1 provides a description of these attributes.

Note:

As an authorized user, you can add, modify, or delete the attributes of a custom skin. However, you must have a thorough understanding of these attributes if you want to manage them.

Table 14-1 Default Attributes of a Skin

Attribute Description

skinId

Specifies the unique identifier of a skin. Typically, it is a combination of the skin family and the render kit, for example BrightBlue.desktop.

skinFamily

Specifies the family to which a skin belongs. It is an identifier that can be used by a number of skins with different renderkits. For example, you could have a family named BrightBlue. It can be used with renderkit desktop or mobile.

skinExtends

Specifies the ID of the skin being extended. For example, suppose you like the midnight skin, but want a different font size in that skin. You can configure your skin to extend the midnight.desktop skin and then you can edit the source code of your skin to override the font size.


14.4.2.2 Naming, Describing, and Categorizing a Custom Skin

Setting the name, description, and category of a custom skin follows the same procedure as any other resource. For information, see Section 10.4.2.3, "Renaming, Describing, and Categorizing a Resource."

14.4.2.3 Associating an Icon with a Custom Skin

Associating an icon with a custom skin follows the same procedure as any other resource. For information, see Section 10.4.2.4, "Associating an Icon with a Resource."

14.4.2.4 Setting the Availability of an Application-Level Custom Skin

Setting the availability of an application-level custom skin in a space follows the same procedure as any other resource. For information, see Section 10.4.2.5, "Setting the Availability of an Application-Level Resource in Other Spaces."

14.4.2.5 Working with a Custom Skin's Attributes

Setting the attributes of a custom skin follows the same procedure as any other resource. For information, see Section 10.4.2.6, "Working with the Attributes of a Resource."

For information about default skin attributes, see Table 14-1.

14.4.3 Setting Security on a Skin

You can control whether all users or only specific users or groups can access the custom skin that you created in your application or a space. Setting access to a custom skin follows the same procedure as any other resource. For more information, see Section 10.4.4, "Setting Security for a Resource."

14.4.4 Copying a Skin

Spaces enables you to create copies of a skin. You can use this feature when you want to back up a skin or update a skin while keeping the original in use.

Copying a skin follows the same procedure as any other resource. For the generic procedure, see Section 10.4.1, "Copying a Resource."

14.4.5 Deleting a Skin

Provided you are assigned the required permissions, you can delete any custom skin. Deleting a skin follows the same procedure as deleting any other resource. For information, see Section 10.4.5, "Deleting a Resource."

14.4.6 Viewing Information About a Skin

Each skin has an associated About page that summarizes useful information about it (Figure 14-11).

Accessing information about a skin follows the same procedure as any other resource. For information about how to access the About dialog, and for a description of the properties displayed in the dialog, see Section 10.1.5, "Viewing Information About a Resource."

For information about skin-specific default attributes, see Table 14-1.

Figure 14-11 About Dialog of a Skin

About dialog of a skin
Description of "Figure 14-11 About Dialog of a Skin"

14.5 Applying a Skin

As a Spaces administrator, you may customize the default appearance of the application for all users by changing its skin. As a space moderator, you may customize the appearance of your space for all members by changing its skin. Individual users can change the skin applied to their Home space through user preference settings.

This section includes the following subsections:

14.5.1 Applying a Skin to the Spaces Application

When you set a skin for the Spaces application, the skin is applied to the Home space and all spaces that use the application-level skin setting. The skin is also applied to any new spaces that are created. However, the skin is not applied to existing spaces for which a specific skin has already been set. Also, the skin is not applied to the administration pages. By default, these pages use the Fusion FX skin.

To apply a skin to the Spaces application:

  1. Open the Spaces Administration page. See Section 4.1, "Accessing the Spaces Administration Page."

  2. Click the Configuration tab.

  3. In the Global section of the General tab, select the desired skin from the Application Skin list (Figure 14-12).

    Figure 14-12 Applying a Skin to the Spaces Application

    Applying a Skin to WebCenter Spaces
    Description of "Figure 14-12 Applying a Skin to the Spaces Application"

    Note:

    If the desired skin does not appear in the Application Skin list, it may be because it is marked as hidden. A skin must be marked as Available to be available for selection. For information, see Section 14.4.1, "Showing and Hiding a Skin."
  4. Click Apply.

    The skin you select is applied to Home space, any new spaces that are created, and all spaces that use the application-level skin setting. The skin is not applied to the spaces that override the application-level skin setting.

14.5.2 Applying a Skin to a Space

When you apply a skin to a space, the skin is applied to all the pages of the space. However, the administration pages are not affected; they always appear in the default skin. For information about applying a skin to a space, see Section 51.4.10, "Changing the Skin for a Space."

14.5.3 Applying a Skin to the Home Space

For information about applying a skin to your personal view of the Home space, see Section 35.5, "Changing the Home Space Look and Feel in Your View."

14.6 Using JDeveloper to Build Your Skins

You may want to create a skin that is beyond the editing capabilities of Spaces, or you may prefer working in JDeveloper. To do this, you have several options:

The steps to upload and download skins from Spaces are described in Section 10.5.2, "Downloading a Resource" and Section 10.5.3, "Uploading a Resource."

Oracle provides a special JDeveloper workspace (DesignWebCenterSpaces.jws) for developing Spaces resources, including skins. The workspace offers a design environment in which to create and edit your skins, and also enables you to upload your skins to Spaces for testing. For more information and to download the JDeveloper workspace, see "Developing Resources for the Spaces Application" in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.

For information about specific considerations for creating skins for use in Spaces, see the chapter "Creating and Managing Skins" in Oracle Fusion Middleware Developer's Guide for Oracle WebCenter Portal.