Working with Skins

17 Working with Skins

A skin defines colors, fonts, and other aspects of components in a portal. Use skins to give portals a distinct personality or to apply specific branding. WebCenter Portal provides several built-in skins, and you can create new custom skins to meet specific requirements.

Permissions:

To perform the tasks in this chapter on shared skins, you must have the application-level Create, Edit, and Delete Skins permission. Users with the Application Specialist role have this permission by default. For more information about application-level permissions, see About Application Roles and Permissions in Administering Oracle WebCenter Portal.

To perform the tasks in this chapter, you need one of the following portal-level permissions:

Assets: Create, Edit, and Delete Assets or Create Assets and Edit Assets (standard permissions)
Skins: Create, Edit, and Delete Skins or Create Skins and Edit Skins (advanced permissions)

See About Roles and Permissions for a Portal.

See Also:

For information about defining a portal's look and feel how using skins in conjunction with other assets, see Creating a Look and Feel for Portals.

Topics:

About Skins

A skin is a resource that defines colors, fonts, and other aspects of various components used on the pages of a portal. A skin changes the way the user interface appears, and not how the application functions. You can use skins to give individual portals a distinct personality or to apply specific branding, achieving the appearance that suits your organization.

On the Assets and Shared Assets pages, WebCenter Portal provides several built-in skins, and you can create new custom skins. Alternatively, portal designers can develop custom skins to reflect a personality, or to incorporate specific branding. If a skin is a shared asset (available to all portals), it is shown on the Assets page of all portals along with portal-specific skins. Within a portal, you can copy an existing skin.

Note:

Creating and editing a skin is a complex task, requiring knowledge of CSS and how the skin is used in page templates. As such, skins should be developed by an experienced Web Developer. Oracle recommends that developers use JDeveloper to develop skins for portals. When fully developed, the developer can publish skins directly to WebCenter Portal (the portal server) or to a specific portal for immediate use or for testing. Alternatively, the developer can export the skin to a file and upload the skin to WebCenter Portal later.

For more information, see Developing Skins in Developing for Oracle WebCenter Portal.

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.

Each skin works together with a page template to determine the overall look and feel of the pages in your portal. While the page template controls the location and behavior of components on the page, the skin controls the visual appearance of those components. The skin selectors in the skin correspond to the style classes in the page template, so when designing a skin, you must ensure that it is usable with the intended page template.

See Also:

Working with Page Templates

By default, a portal inherits its skin from the default specified for all portals by the system administrator.

Each page template can define a preferred skin to identify the skin that works best with that page template. When a page template is selected as the new default page template for a portal or as the system default, the default skin automatically updates to the page template's preferred skin.

You can optionally select a different skin for an individual portal, overriding the default skin setting. When you change the skin for a portal, the skin is applied to all the pages of the portal. However, the portal administration pages are not affected. They always appear with the default skin, Alta.

WARNING:

Changing the default skin to something other than the preferred skin for the selected default page template may produce unexpected results.

About the Built-In Skins

WebCenter Portal provides the following built-in skins to get you started.

Alta
Skyros
WebCenter Portal

Note:

Beginning with Release 12c (12.2.1.4.0), Oracle WebCenter Portal has deprecated the support for the built-in skins Mosaic and Unicorn. However, if you have upgraded from a prior release, these skins remain available in your upgraded instance.

You can change the appearance of a specific portal or the entire application by using one of these built-in skins. These built-in skins are designed to work with specific built-in page templates. For more information, see About the Built-In Page Templates.

You cannot directly edit any of the built-in skins. If you want to alter one of these skins to make it match your requirements, you must create a new skin, selecting the built-in skin from the Copy From list, and then make the required adjustments in the new skin.

See Also:

Creating a Skin

Setting the Default Skin

When a user creates a page, the default skin is used to determine the appearance of the page and its components. This helps to ensure that all pages in a portal have a consistent appearance.

Skins work in combination with page templates to determine the look and feel of the pages in a portal. When you set the default page template, the default skin is automatically set to the preferred skin for that page template, if it has one.

Note:

If you change the default skin to something other than the page template's preferred skin, the pages in your portal may not look as expected. For more information, see Setting the Preferred Skin for a Page Template.

This section includes the following subsections:

Setting the Default Skin for a Portal

Note:

To perform this task, you must be a portal manager or member with Administration: Manage Security and Configuration or Administration: Manage Configuration permission in the portal.

For more information about permissions, see About Roles and Permissions for a Portal.

Every portal has a set of default assets, including a default skin. A portal's default skin is applied to all the pages of the portal except the administration pages. Administration pages always use the Alta skin. When you create a portal, by default, the portal inherits the preferred skin of the page template defined for the portal template used when the portal was created. If the portal template does not define a default page template, the preferred skin of the system default page template is used instead.

To set a different default skin for the pages in your portal, see Changing the Skin for a Portal.

Setting the Default Skin for All Portals

Note:

To perform this task, you must be a system administrator (have the Administrator role, or the Portal Server: Manage All or Portal Server: Manage Configuration permission).

System administrators can select a skin to use as the system, or application-level, default skin. The system default skin is applied to pages in the Home portal and to pages in portals where the portal template used to create the portal did not define a default skin.

The system default skin is not applied to existing portals for which a specific skin has already been set. Also, the system default skin is not applied to the administration pages. Administration pages always use the Alta skin.

For information about how to set the system default skin, see Choosing a Default Skin in Administering Oracle WebCenter Portal.

Setting the Default Skin for the Home Portal

By default, the appearance of the Home portal is determined by the system default skin. However, users can change the skin applied to their view of the Home portal through user preference settings. For more information, see Changing the Look and Feel of Your View in Using Portals in Oracle WebCenter Portal.

Creating a Skin

If none of the available skins meet your requirements, you can create your own. When you create a skin, you use an existing skin as the starting point for the new skin.

Note:

Creating and editing a skin is a complex task, requiring knowledge of CSS and how the skin is used in page templates. While you can develop skins in WebCenter Portal as described here, the editing capabilities are limited. Oracle recommends that developers use JDeveloper to develop skins for portals. New skins can also be developed from scratch using JDeveloper. When fully developed, the developer can upload skins directly to WebCenter Portal (the portal server) for immediate use or for testing. Alternatively, the developer can export the skin to a file and upload the skin to WebCenter Portal later.

For more information, see Developing Skins in Developing for Oracle WebCenter Portal.

If you choose to create a skin in WebCenter Portal, giving you the option to later refine it in JDeveloper, you can do so at the application level or at the portal level. Application-level skins are available for use in all portals, unless the portal has been specifically excluded. Portal-level skins are available to use only in the portal in which they are created.

To create a skin:

Navigate to one of the following:
- To create an application-level skin, go to the Shared Assets page. For more information, see Accessing Shared Assets.
- To create a portal-level skin, go to the Assets page for the portal in which you want to create it. For more information, see Accessing Portal Assets.
In the left panel, under Look and Layout, click Skins.
In the toolbar, click Create (Figure 17-1).

Figure 17-1 Creating a Skin

Description of "Figure 17-1 Creating a Skin"
In the Create New Skin dialog (Figure 17-2), in the Name field, enter a name for the skin.

The name is displayed in the Assets or Shared Assets page and in lists when selecting a skin. You should make the name as descriptive as possible.

Figure 17-2 Create New Skin Dialog

Description of "Figure 17-2 Create New Skin Dialog"
In the Description field, enter a description for the skin.

The description is displayed below the skin name in the Assets or Shared Assets 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.
From the Copy From list, select an existing skin to use as the starting point for your new skin.

Tip:

You can also create a copy of an existing skin as described in Copying an Asset.
Click Create.

The newly created skin is listed on the Assets or Shared Assets page. The empty check box next to the skin indicates that it is not yet published and hence is not available to other users. For information about publishing a skin, see Showing and Hiding Assets.

After initial creation, the new skin is identical to the skin selected in the Copy From list. The next step in creating a skin is to edit it to meet your requirements. For more information, see Editing a Skin.

Editing a Skin

In a portal, you can edit a skin to meet your requirements. Note that you can not edit built-in skins; you can copy a built-in skin to create a new custom skin for a portal, then edit that copy.

Note:

Creating and editing a skin is a complex task, requiring knowledge of CSS and how the skin is used in page templates. Therefore, skins should be developed by an experienced Web Developer. Oracle recommends that developers use JDeveloper to modify skins for portals. New skins can also be developed from scratch using JDeveloper. When fully developed, the developer can upload skins directly to WebCenter Portal (the portal server) for immediate use or for testing. Alternatively, the developer can export the skin to a file and upload the skin to WebCenter Portal later.

For more information, see Developing Skins in Developing for Oracle WebCenter Portal.

A skin must define the required ADF Faces skin selectors for the components in your portal. For example, you can use the .ADFDefaultFontFamily:alias selector to specify the font family for your portal as follows:

.AFDefaultFontFamily:alias {
font-family: Tahoma, Verdana, Helvetica, sans-serif;
}

For information about:

ADF Faces skin selectors in general, see Working with ADF Skin Selectors in Developing ADF Skins. Also refer to JDeveloper's online help for information about the selectors that you can use in a skin. These are documented in the "Skin Selectors for Fusion's ADF Faces Components" and "Skin Selectors for Fusion's Data Visualization Tools Components" topics in JDeveloper's online help.
Defining ADF Faces component style selectors, see Properties in the ADF Skinning Framework in Developing ADF Skins and Changing the Style Properties of a Component in Developing Web User Interfaces with Oracle ADF Faces.

In addition to ADF skin selectors, a skin's CSS file contains three WebCenter Portal-specific selectors. These are:

.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;
}

WebCenter Portal provides an Edit dialog to edit a skin's basic appearance settings by mapping target areas to the WebCenter Portal-specific skin selectors available in the CSS file.

To edit other skin selectors in the CSS file, you must edit the source code of the skin. While editing the source code of a 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, as follows:

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

When you edit the source code of a skin 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.

See Also:

Editing the Source Code of an Asset

Note:

You must have a thorough understanding of CSS specification about selectors if you plan to edit skin selectors in the source code of your skin. You might get into a situation where your style is not getting picked up because the skin you are extending has a selector that is more specific than your selector.

To edit the basic appearance settings of a skin:

Navigate to one of the following:
- To edit an application-level skin, go to the Shared Assets page. For more information, see Accessing Shared Assets.
- To edit a portal-level skin, go to the Assets page for the portal that owns it. For more information, see Accessing Portal Assets.
In the left panel, under Look and Layout, click Skins.
Click the Edit quick link in the row for the skin that you want to edit to open the Edit dialog.
From the Item list, select the target area for which you want to update skin properties:
- Page Template if you want to choose the background color, background image, and font for the template used on a page.
- Page if you want to choose the color and image of the page background.
- Task Flow/Portlet if you want to choose the background color and image of task flows and portlets on a page.
Figure 17-3 Editing Skin Properties

Description of "Figure 17-3 Editing Skin Properties"
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 text box, and the selected target area changes to that color in the Preview panel on the right.
In the Background 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 WebCenter Portal. To store an image in WebCenter Portal, you must upload the required file, then obtain the image's URL using the Get Link action.

For more information, see Working with Folders and Files in Using Portals in Oracle WebCenter Portal.
You can choose to repeat the background image horizontally, vertically, or both. Depending on your requirement, select:
- Repeat Horizontally—Displays the background image aligned horizontally at the top of the page, with the image repeated across the horizontal bar.
  
  Figure 17-4 Repeating an Image Horizontally Across a Target Area
  
  Description of "Figure 17-4 Repeating an Image Horizontally Across a Target Area"
- Repeat Vertically—Displays the background image aligned vertically on the left side of the page, with the image repeated across the vertical bar.
  
  Figure 17-5 Repeating an Image Vertically Across a Target Area
  
  Description of "Figure 17-5 Repeating an Image Vertically Across a Target Area"
Select Repeat Horizontally and Repeat Vertically to repeat the selected image across the entire target area.

Figure 17-6 Repeating an Image Across the Entire Target Area

Description of "Figure 17-6 Repeating an Image Across the Entire Target Area"
From the Font Family list, select the font you want to use for the Page Template area.

The Font Family list is displayed only when Page Template is selected in the Item list.
Click Save and Close.

Managing a Skin

The following options are available on the Assets or Shared Assets page to enable you to manage skins:

Create—For more information, see Creating a Skin.
Delete—You can delete a skin when it is no longer required.

For more information, see Deleting an Asset.
Upload—You can upload an archive file that contains a skin that has been developed using JDeveloper.

For more information, see Uploading an Asset.
Download—You can download a skin into an archive file for further development in JDeveloper.

For more information, see Downloading an Asset.
Actions
- Copy—You can create a copy of a skin.
  
  For more information, see Copying an Asset.
- Security Settings—You can control whether all users or only specific users or groups can access a skin.
  
  For more information, see Setting Security for an Asset.
- Show Properties—Each skin has an associated Show Properties dialog that summarizes useful information about it.
  
  For more information, see Viewing Information About an Asset.
- Edit Source—You can directly edit the source code of a skin.
  
  For more information, see Editing the Source Code of an Asset.
- Edit Properties—Each skin has certain properties associated with it that control how it is displayed in the portal. You can edit these properties through the Edit Properties dialog.
  
  For more information, see Setting Properties on an Asset.
  
  Skins also define three default attributes:
  - 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 render kits. 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.
  You can add, edit, or delete these attributes. For more information, see Setting Asset Attributes.
Available—You can control whether or not a skin is available for use in a portal by selecting or deselecting this check box.

For more information, see Showing and Hiding Assets.

Tip:

In addition to showing or hiding a skin, you can also control whether a shared skin is available to any, all, or selected portals in WebCenter Portal. For more information, see Setting Properties on an Asset.
Edit—For more information, see Editing a Skin.