Skins are the graphics, cascading style sheets (CSS), and JavaScript behaviors that define button graphics, text styles, mouseover actions, and other elements in the way a portal looks. Skins, combined with skeletons, make up a portal desktop's Look & Feel. When you select a Look & Feel for a portal desktop, the Look & Feel points to the skins and skeletons to use.
A skin is a unified collection of graphics, CSS files, and JavaScript files stored under a parent skin directory. You can create as many skins as you need. Skins can also contain subdirectories for mobile device-specific skins.
Skins can also contain themes. A skin theme is a subset of graphics, CSS styles, and/or JavaScript behavior that can be used on books, pages, and portlets to give them a different look than the rest of the portal desktop.
This topic contains the following procedures:
Selecting a Look and Feel for a desktop in the Portal Designer gives the portal a default Look and Feel setting. Portal administrators and end users can change the Look and Feel used for a desktop.
A theme is represented by a single .theme file that is shared between skins and skeletons. For example, if you select a theme called "alert" for a portlet, the portal framework looks for skin and skeleton subdirectories called "alert."
name | Required. Tells the portal framework the name of the theme directory to look in to apply theme resources to the book, page, or portlet. |
title | Required. Used to populate the Theme drop-down list where it appears in the book, page, and portlet properties in the Portal Designer and in the WebLogic Administration Portal. |
description | Optional description of the theme. |
markupName | Required. The markupName must be unique among the other themes in the portal Web project. For best practices, markupName should be the same as the name. |
Now create the theme resources.
All available themes (identified by the .theme files) are selectable for books, pages, and portlets regardless of whether or not a skin contains them. If the Look & Feel selected for the desktop references a skin that does not contain the selected theme in its skin.properties file, as outlined in the previous steps, no theme is used.
Creating Your Own Style Sheet Classes
If you want to add your own CSS styles to a skin, do the following:
The icons used in portlet titlebars are stored in a skin or theme /images directory. The portal framework reads the portal Web project's WEB-INF/netuix-config.xml file to determine which of these graphics to use for the portlet's different states and modes (minimize, maximize, help, edit). If you want to change the name of the graphics used for the portlet titlebar icons, change the filenames and the corresponding entries for those graphics in netuix-config.xml.
The WebLogic Workshop Portal Extensions have sample portals that contain skin and theme files you can view in WebLogic Workshop Platform Edition. For instructions on viewing the sample portals, see Portal Samples.
Also, when you create a Portal Web Project, a predefined set of skins and themes is added to your project in <project>\framework\skins and <project>\framework\markup\theme.
How Look and Feel Determines Rendering
Creating Skeletons and Skeleton Themes
Creating Portals for Mobile Devices