The Look & Feel Editor lets you modify the HTML text styles in a portal. This convenient tool makes it easy to modify a portal's text styles and see your changes reflected immediately. For example, using the Look & Feel Editor, you can change the size of a heading, the color of a list element, or the padding around table cells for a portal. You can also change the skin, skeleton, and other elements specified in the portal’s look & feel file.
Technically, the Look & Feel Editor modifies the Cascading Style Sheet (CSS) files that underlie a portal's skin. The Editor's point and click interface lets you edit selected CSS style properties by entering values in a Property Editor. The new text properties are immediately applied to the portal text shown in the Editor's View Area and saved in the appropriate Cascading Style sheet (CSS) file.
In addition, the Editor shows you, at a glance:
Using the Editor's CSS Style Wizard, you can also add, remove, and modify properties for any CSS style referenced by a portal.
This help topic discusses:
Opening the Look & Feel Editor Closing the Look & Feel EditorAdding a New Property to a Style
Working with Inherited Properties
Displaying HTML in the View Area
Tip: For additional information on the Look & Feel Editor and CSS, see also The Look & Feel Editor.
Alternatively, the Look & Feel Editor starts automatically when you create a new Look & Feel file (.laf file) using the Look & Feel Wizard.
The panels are described in the following table:
Style Hierarchy Panel | Shows the CSS cascade for the currently open HTML page. The style associated with the currently selected text in the View Area is automatically highlighted. |
Style Description Panel | This panel contains two parts: The Style Info panel shows the CSS style class definition for the currently selected style. This definition appears exactly as it appears in the CSS file in which it is defined. The name of this file also appears under Style Info. The Inherited Styles panel displays the CSS style where each inherited style of the currently selected property is defined. This convenient feature lets you see, at a glance, where in the style hierarchy a given style property is defined. You can double-click an inherited style to modify its properties. See Understanding CSS Inheritance for more information on this topic. |
View Window | Displays the HTML page whose look & feel you are editing. Click on any text in this area to view and edit the text's style properties. Remember that when you modify the HTML's text styles, the underlying CSS files are actually being modified. Any HTML that references the portal's CSS files can be used by the Editor. See Displaying HTML in the View Area for more information. |
Document Structure Panel | Lets you view and edit the properties of all CSS files referenced by the portal's skin file. See Editing CSS Style Properties for information on using this panel. |
Property Editor Panel | An interactive panel that lets you modify the values of a selected CSS property by directly entering or selecting values. See Using the Property Editor for more information. |
To close the Look & Feel Editor, click the close buttonin the upper right corner of the View Area, or select File > Close <file>.laf, where <file> is the name of the look & feel file, for example: avitek.laf.
Typically, you edit style properties using the Property Editor panel. The Property Editor panel displays the properties that are defined for a selected style and provides appropriate controls for editing the properties' values. For instance, you might enter a value for font size in a text field, or, you might select the foreground color with a color chooser tool.
There are three ways to display editable style properties in the Property Editor:
When you modify a style property, you must save the change for it to take effect permanently. You can save your changes by selecting File > Save or by pressing <Ctrl>-S over the View Area.
To add a new CSS property, such as color or border style, to an existing style, do the following:
Tip: Another way to access the CSS Style Wizard is to locate and double-click the style you wish to edit in the Document Structure panel.
When you add or modify CSS properties, you need to be aware that most properties can be inherited by styles lower in the document hierarchy than the style you are editing. Therefore, if you change the font property of a style, it is possible that other styles lower in the document hierarchy will inherit the same font property setting. See also Understanding CSS Inheritance for a brief introduction to this topic.
The Look & Feel Editor lets you easily view and modify the inherited properties for a selected style.
This section contains the following parts:
To view the inherited properties of a style, do the following:
Note that the font-size property, although it is inherited from bea-portal-book-primary, has been modified directly in portlet-section-header, thus overriding the inherited value.
If you wish to modify an inherited property for a selected style, do the following:
Caution: Modifying a property in style that is "up" the document hierarchy can result in that property being inherited by all styles further "down" the hierarchy. It is important to be aware of the potential side-effects that can result from CSS style inheritance. See Understanding CSS Inheritance for more information on this topic.
If you wish to add a new property to an inherited style, do the following:
Caution: Modifying a property in a style that is "up" the document hierarchy can result in that property being inherited by all styles further "down" the hierarchy. It is important to be aware of the potential side-effects that can result from CSS style inheritance. See Understanding CSS Inheritance for more information on this topic.
In addition to editing the default HTML page that is supplied with WebLogic Workshop, you can load HTML directly into the editor by specifying a URL, load an HTML file from the filesystem, or paste HTML code on the fly.
Note: Remember that the Look & Feel Editor operates on the CSS styles associated with a portal project. The Editor can only recognize and modify CSS files that are associated with the currently open portal project's skin. Typically, the .css files associated with a portal project are located in the framework\skins\<lookandfeelName>\css folder of the portal project. For example, the following figure shows the location of the css folder within the sampleportal project: framework\skins\avitek\css, where avitek is a skin name:
Loading the Default HTML Page in the Editor
Weblogic Workshop provides a default HTML block that can be loaded directly into the Editor. This page contains a representative sampling of commonly used CSS styles that are also provided with WebLogic Workshop.
Loading an HTML Page with a URL or Filesystem Path
This section explains how to load an HTML page using a URL or filesystem path. Typically, you use this feature to load a portal page that you are developing. For example, you can display your portal in a browser and copy/paste the portal's URL in the Render custom URL dialog. Remember, the key to using the editor is to load HTML into it that uses the same skin as the look & feel file you are editing (i.e., the look & feel file you double-clicked to start the editor, such as avitek.laf).
Tip: You can open a portal you wish to edit, then save the portal page as HTML (using the browser's Save Page As feature, or an equivalent feature). Then, you can load that page to edit its look & feel by entering the path to the file in the Render custom URL dialog.
The Property Editor lets you modify the values of a style's properties. Depending on the value, you might need to type a new value, select a value from a drop-down list, or use a color tool to pick a new color. For example, in the following figure, the font-size property's value displays a drop-down list.
To edit a property's value, click on it and edit it appropriately. For instance, if you click font-size, a drop-down list appears with these options:
<absolute-size>
<relative-size>
<length>
<percentage>
inheritThe options enclosed in angle brackets are simply placeholders that indicate the type of value to enter. Therefore, if you want to enter an absolute font size of 20 pixels, enter 20px in the <absolute-size> field. If you select inherit, then the style will use its inherited font-size value.
Note: If you do not enter a value in the fields enclosed in angle brackets, default values will be used. You must enter an appropriate value if you want to change these fields.
Tip: The types of values available for a specific style are determined by the CSS standard. For detailed information on the properties that are available for a given style, please consult a CSS reference. You can also find information about CSS on the Website of the World Wide Web Consortium:
To apply a new value, press Return. Press <Ctrl>-s to save your changes.
The look & feel (.laf) file contains several properties that you can edit using the Look & Feel Editor. For instance, you can change the skin or skeleton files associated with a look & feel.
To change the skeleton file associated with a look & feel file, click in the Skeleton property in the Property Editor to bring up the file chooser. Navigate to the skeleton folder for the skeleton you wish to use and select the skeleton.properties file. For example, to change to the classic skeleton in the sampleportal portal, select:
sampleportal\framework\skeletons\classic\skeleton.properties
Note: If no skeleton.properties file exists, you can simply select a skeleton directory, such as the classic directory in the above example.
To change the skin file associated with a look & feel file, click in the Skin property in the Property Editor to bring up the file chooser. Navigate to the skin folder you wish to use and select the skin.properties file. For example, to change to the classic skin in the sampleportal portal, navigate to:
sampleportal\framework\skins\classic\skin.properties
You will be prompted with the following dialog:
Click Yes to apply the new skin.
This section describes the following two features of the Look & Feel Editor:
The following figure shows the buttons that control these two features, in the upper left corner of the Style Hierarchy panel:
When you select this button, and then select text in the View Area, the Style Hierarchy panel displays an expanded view of the document hierarchy that includes the HTML tags as well as their associated style selectors, as shown in the following figure:
When the Enable Mouse-over button is selected, you can view a style's properties and information simply by moving the mouse over text in the View Area. When this button is not selected, you must click on text in the View Area to view the text's properties.
This example shows you how to modify the style properties of text that you select in the View Area. For this example, it is assumed that the default HTML page is displayed in the View Area.