Using the Look & Feel Editor

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 Editor

Editing Style Properties

Saving Your Changes

Adding a New Property to a Style

Working with Inherited Properties

Displaying HTML in the View Area

Using the Property Editor

Editing the .laf File Properties

Other Options

Example: Modifying Properties of Selected Text

Tip: For additional information on the Look & Feel Editor and CSS, see also The Look & Feel Editor.

Opening the Look & Feel Editor

    You need to do the following to open 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.

  1. Determine the name of the look & feel (.laf) file used by the portal you wish to edit. The best way to do this is to open the portal in WebLogic Workshop and click on the portal's desktop border (the outermost border of the portal). In the Property Editor panel, locate the the Look and Feel property. In the following figure, the name of the look & feel file is avitek.

  2. Locate the look & feel (.laf) file for the portal you wish to edit in the file tree of the Application panel. A portal's look & feel files are located in the portal project folder under framework\markup\lookandfeel. For example, to edit the avitek look & feel file for the sampleportal portal, navigate to:

    portalApp\sampleportal\framework\markup\lookandfeel\avitek.laf

    as shown in the following figure:

  3. Double-click on the portal's .laf file (for example, avitek.laf) to open the Look & Feel Editor.


    When the Look & Feel Editor opens, the default HTML file appears in the View Area, and the Style Hierarchy, Style Description, Document Structure, and Property Editor panels are active, as shown in the following figure.

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.

Closing the Look & Feel Editor

To close the Look & Feel Editor, click the close button in 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.

 

Editing Style Properties

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:

Saving Your Changes

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.

 

Adding a New Property to a Style

To add a new CSS property, such as color or border style, to an existing style, do the following:
  1. Expose the style properties in the Property Editor using one of the methods described previously in Editing CSS Style Properties.

    Tip: A complete description of the selected style appears in the Description part of the Property Editor, as shown in the following figure.


  2. Click the CSS properties icon to bring up the CSS Style Wizard, as shown in the following figure:

  3. Select the property you wish to add from the Available properties list and click Add property.
  4. In the Current style properties table, click the value of the new property. Depending on the property, you can select or enter an appropriate default value. See also Using the Property Editor for tips on entering values.
  5. Click Accept to add the new property to the style.

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.

Working with Inherited Properties

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:

Viewing Inherited Properties
Modifying an Inherited Value
Adding a New Inherited Property

Viewing Inherited Properties

To view the inherited properties of a style, do the following:

  1. Click on the text in the View Area whose style you wish to investigate, or select a style in the Style Hierarchy panel. For example, the following figure shows the portlet-section-header style selected in the Style Hierarchy panel:


  2. View the style's inherited properties in the Inherited Styles section of the Style Description panel.

    In the following figure, the inherited styles for the portlet-section-header style are shown. For example, from the Inherited Styles section, you can see that the font-family property for the portlet-section-header style is inherited from the bea-portal-body style, that the border-style property is inherited from bea-portal-window, and so on.

    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.

 

Modifying an 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.

  1. Select a style and view its inherited properties by following the procedure in the previous section, Viewing Inherited Properties.
  2. Double-click the inherited style name you wish to edit in the Inherited Styles section of the Style Description panel.




    The CSS Style Wizard appears, as shown in the following figure:


  3. Edit the property in the Current style properties list by clicking on the Value you wish to change and entering or selecting a new value. For tips on entering style property values, see Using the Property Editor.
  4. Click Accept to add the new property value to the style.

Adding a New Inherited Property

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.

  1. Bring up the CSS Style Wizard, by following the procedure in the previous section, Viewing Inherited Properties.
  2. In the CSS Style Wizard, select the property you wish to add from the Available properties list and click Add property.
  3. In the Current style properties table, click the value of the new property. Depending on the property, you can select or enter an appropriate default value. For tips on entering style property values, see Using the Property Editor.
  4. Click Accept to add the new property to the style.

 

Displaying HTML in the View Area

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.

  1. Open the Look & Feel Editor, as described in Opening the Look & Feel Editor.
  2. Select Portal > Look And Feel > Render Default Text from the Main menu.

    The default HTML page is loaded into the Editor.

 

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.

  1. Open the Look & Feel Editor, as described in Opening the Look & Feel Editor.
  2. Select Portal=>Look And Feel=>Render Custom URL... from the Main menu. The following dialog appears:

  3. Enter a URL to the HTML page you wish to edit, or click Browse... to bring up a file chooser.
  4. Click Accept to open the HTML in the Look & Feel Editor.

    Entering Custom HTML

    You can also enter HTML directly into the editor using the Render custom HTML block dialog. The best way to use this feature is to open the portal you wish to edit and copy the HTML source directly from the browser to this dialog box. To access this dialog, do the following:
  1. Open the Look & Feel Editor, as described in Opening the Look & Feel Editor.
  2. Select Portal > Look And Feel > Render Custom Text... from the Main menu. The following dialog appears:




    Note: The Render custom HTML block dialog displays the default HTML block text by default.
  3. Cut the default text from the dialog's text area and paste your HTML in its place.
  4. Click Accept to edit the HTML's text styles in the Look & Feel Editor.


Using the Property Editor

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>
inherit

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

 

Editing the .laf File Properties

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.

  1. In the Document Structure panel, select the look & feel file node. The look & feel file is the top node in the document structure tree. For example, in the following figure, avitek is the name of the current portal's look & feel file. When selected, the editable properties of this file appear in the Property Editor.



    Tip: When you click on a field in the Property Editor, a Description of the field is shown just below the editor.
  2. In the Property Editor, change the properties you wish to modify and press Return.
  3. Press <Ctrl>-s to save your changes.

    Changing the Skeleton File

    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.

    Changing the Skin File

    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.

 

Other Options

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:

Show/Hide HTML Tags Button

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:



Enable Mouse-over Button

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.

 

Example: Modifying Properties of Selected Text

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.
  1. In the View Area, click on the text you wish to modify, for example, the heading that uses the style portlet-section-header.



    Notice that the style is displayed and highlighted in the Style Hierarchy panel, as shown in the following figure.





    Notice, too, that the style’s description is listed in the Style Info section of the Style Description panel. The style information is taken directly from the CSS file in which the style is defined. Furthermore, the inherited styles are also listed in this panel, as shown in the following figure. See Understanding CSS Inheritance for a brief introduction to this topic.


  2. In the Property Editor panel, shown in the following figure, find the style property that you wish to change, click its value (in the right column), and edit it. For example, to edit the color property, click in the value (right-hand) column to access a color chooser dialog. (For more information on editing values in the Property Editor, see Using the Property Editor.)

  3. Press Enter to see the change automatically reflected in the HTML page in the View Area.
  4. Select File > Save or press <Ctrl>-s over the View Area to save the changes.