Creating Skins and Skin Themes

• To create a skin
• To create a skin theme

1. With your portal application open in WebLogic Workshop platform edition, duplicate an existing skin directory in your Portal Web Project. For example, right-click <project>\framework\skins\default and choose Duplicate.
   
   The new skin directory appears with a number appended to the end of the name.
2. Rename the new skin directory.
3. Delete any skin subdirectories you do not plan to use.
4. In the images subdirectories, modify the button icons as desired. Do not modify filenames without also modifying the names where they appear in your JSPs or skeleton JSPs.
5. In the css subdirectories, add any new CSS files you have created. Do not rename any of the default styles or CSS files provided by BEA. The styles are used in places like skeleton JSPs and layout files to render the styles.
   
   To support Multi Level Menus in mobile devices, delete the line display: none; in the book.css file.
6. In the js subdirectories, modify the JavaScript as desired.
   
   Do not put business logic in skins. Create separate JSPs for business logic and surface those JSPs either in the portal shells (for the desktop headers or footers) or in portlets.
7. Modify the skin.properties file for the root skin and any sub skins.
   
   The skin.properties file contains references to images, themes, style sheet links, JavaScript script entries, skeleton dependencies, and other information. The is self-documented to guide you through the file modification process.
   
   Entering all references in skin.properties is important because these references are inserted into the HTML head when the portal is rendered. Missing references will cause the skin to render incorrectly.
   
   Note: You can also create a file called skin_custom.properties in the same directory as skin.properties. Use skin_custom.properties to list custom CSS and JavaScript files you create or to override the settings in skin.properties. Creating a skin_custom.properties file is useful for custom entries, because you can replace skin.properties with new product releases without overwriting your customizations.
8. Open or create a Look & Feel file and associate the skin with the Look & Feel. See Creating Look & Feel Files.
9. To use the skin for a portal, open the portal in WebLogic Workshop Platform Edition, select the Desktop icon in the Document Structure window, and select the Look & Feel in the Property Editor Look and Feel field.
10. To modify the CSS files referenced by a skin, use the Look & Feel Editor. See Using the Look & Feel Editor.

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.

To create a skin theme

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."

1. With your portal application open in WebLogic Workshop platform edition, duplicate an existing theme file in your Portal Web Project. For example, right-click <project>\framework\markup\theme\alert.theme and choose Duplicate.
   
   The new theme file appears with a number appended to the end of the name.
2. Rename the new theme file. Be sure to retain the .theme extension.
3. With the new theme file open, modify the following attributes in the <netuix:theme> element:
   
   

   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.

   
   Note: The markupType attribute for themes must always be "Theme".
4. Save the theme file.

Now create the theme resources.

5. In a skin directory, create a subdirectory with the same name as the theme.
6. Determine which (if any) files from the skin you want to modify for the theme, and copy them into the new theme directory, retaining any subdirectory structure.
7. Make the necessary modifications to the theme resources. (Do not modify filenames without also modifying the names where they appear in either skin.properties or in your JSPs or skeleton JSPs.)
8. In the skin.properties file for all skins that will use the theme, reference the theme in the "THEME IMAGES DIRECTORIES" section of the file with the following type of entry:
   
   theme.alert.search.path: alert/images, images
   
   Note that the name of the theme is the second item in the property name.
9. Save all modified files.
10. If you want other skins to be able to use the theme, copy the theme directory into those skin directories and add appropriate entries in each skin.properties "THEME IMAGES DIRECTORIES" section.

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:

1. Instead of adding your own styles to the BEA-provided CSS files, where the files are subject to possibly being overwritten by product updates, create your own CSS files, even if you want to add only a few classes.
2. Add your CSS paths and filenames to the "Link Entries" section of the skin_custom.properties files of any skins in which you want to use your styles. You may need to create the skin_custom.properties file, in the same directory as skin.properties. Doing this lets you use CSS styles in any JSP or HTML that will be used in the portal, because the CSS reference is automatically inserted into the rendered HTML from the skin.properties file.
   
   Note: You could also add your custom CSS entries to skin.properties, but future product releases could overwrite the skin.properties files.
3. If you want to use your styles in any skeleton JSP files to render portal components, be sure to add those styles inline in the JSPs where appropriate. Open an existing skeleton JSP for guidance to see how it implements styles.