CSS Editor

Description

The CSS Editor allows you to create and edit cascading style sheets. The capbilities of the CSS Editor include:

• Two editing modes - You may edit using the visual builder or directly edit the CSS definition.

• Import CSS from one CSS file into another - This feature allows you to import the definition of a CSS selector into a corresponding selector in the current file. After an import, the number of CSS selectors in the current CSS file is unchanged.

• Merge two CSS files - After merge, the number of CSS selectors in the current file is equal to the number of selectors in the external file plus the number of selectors in the current file (minus duplicate CSS selector names).

• Edit Multiple CSS Selectors at once - Options include: change all attributes, change only attributes that are common to the selected Selectors

• Search and replace any CSS attribute

• Detect and edit Webform Cascading Style Sheets

• Multiple access points - Open the CSS style builder from the Web Projects Control Panel (to edit CSS style files), from the HTML Editor (to edit either style files, or embedded CSS definitions), or from the Code Editor.

Starting the CSS Editor

To create a new cascading style sheet.

1. From the Web Projects Control Panel.

   • Click New to display the New File dialog.

   • Select CSS Style Sheet and click OK to display the Save Style Sheet dialog.

   • Enter the name of the new style sheet into the File name control and click Save to display the CSS Editor.

2. From the Code Editor, select Code > More Genies > CSS Style Sheet Builder... .

3. From the HTML Editor, select Format > Edit Style Sheet(s)... .

Copying an Existing Style Sheet

To base on new style sheet on an existing style sheet.

1. Click Import CSS.

2. Select Append and click OK.

3. Navigate to the folder that contains the style sheet.

4. Select the style sheet and click Open.

Adding a Style

There are many types of styles that you may add to a cascading style sheet.

• Element - select any of the defined set of CSS elements, such as , , , etc.

• Element + Pseudo Class - select any of the defined set of CSS elements and combine it with any of the defined set of pseudo classes

• Class - define the name of a new class

• Class + Pseudo Class - define the name of a new class and combine it with any of the defined set of pseudo classes

• ID - define the name of a new ID

• ID + Pseudo Class - define the name of a new ID and combine it with any of the defined set of pseudo classes

Adding a New Style

To add a new style:

1. Click the green '+' icon to display the New Selector window.

2. If you want the style based on an element:

   • Display the Element tab.

   • Select the base tag from the Element list.

   • Optionally, select a modifier from the Pseudo Class list.

3. If you want the style based on a class:

   • Display the Class tab.

   • Enter the class name into the Name control.

   • Optionally, select a modifier from the Pseudo Class list.

4. If you want the style based on an ID:

   • Display the ID tab.

   • Enter the ID name into the ID control.

   • Optionally, select a modifier from the Pseudo Class list.

5. If you wish to create the new style in a less structured manner:

   • Display the Code tab.

   • Click Insert > Elements and select an element.

   • Click Insert > Pseudo Classes and select an pseudo class.

   • Optionally, add syntax elements by selecting Insert > Special and selecting one of the following:

     • Class

     • Separator

     • Any Tag

     • ID

   • Repeat steps 5a to 5d as necessary.

6. Click Add.

Editing a Style

After a style exists, you may edit it in several different ways.

• By modifying its properties on the Design View tab

• By editing its properties on the Code View tab

• By searching for and replacing style attributes on the Search tab

• By searching for style attributes on the Search tab and editing them in the Style Editor. The Code View Tab of the CSS Editor is shown below.

  

Modifying Properties on the Design View Tab

To modify a style:

1. Display the Design View tab.

2. Select the style from the list.

3. Modify the properties displayed in the right-hand window.

You may filter the contents of the right-hand window with these buttons:

• • Display all styles.

  

• • Display only font styles.

  

• • Display only color and background styles.

  

• • Display only text styles.

  

• • Display only visual formatting, positioning, and size styles.

  

• • Display only border, padding, and margin styles.

  

• • Display only list and generated content styles.

  

• • Display only table styles.

  

• • Display only page media styles.

  

• • Hide all properties.

  

Using the Search Tab

You may use the Search tab to:

• Find and replace attributes of the style sheet

• Find and edit attributes of the style sheet

Finding and Replacing Style Attributes

To find styles that contain an attribute:

1. Display the Search tab.

2. Enter the attribute into the Search control.

3. Click .

   

To replace attributes:

1. Select one or more styles that you wish to change.

2. Enter the replacement text into the Replace control.

3. Click Replace Selected.

4. Optionally, click Replace All to replace this attribute wherever it may be found. The Search Tab of the CSS Editor is shown below.

   

Editing Multiple Styles

To edit attributes:

1. Optionally, click Edit Multiple .

2. Optionally:

   • 1. Display the Search tab.

   • 2. Select one or more styles that you wish to change.

   • 3. Click Edit Selected.

   • 4. Optionally, click Edit All to replace this attribute wherever it may be found.

3. When the Edit Styles Mode dialog appears, select one of the following options:

   • "Make Same As..."

   • "Combine - Override Duplicate Attributes"

   • "Combine - Keep Duplicate Attributes"

4. Make the style changes you want in the Style Editor and click OK.

Understanding the Edit Styles Mode

Assume that you have selected two selectors for editing which are defined as:

.S1 {color:red; font-size:12pt;}
.S2 {color:blue; font-family:Arial;}

Assume that you set the following attributes in the Style Editor:

color:black
border: 1px solid black;

If you choose "MakeSameAs", the results would be:

.S1 {color:black; border: 1px solid black;}
.S2 {color:black; border: 1px solid black;}

The existing style definitions for the selected selectors are discarded and replaced by the new style definition. If you choose "Combine - Overwrite duplicate attributes", the results would be:

.S1 {color:black; font-size:12pt; border: 1px solid black;}
.S2 {color:black; font-family:Arial; border: 1px solid black;}

The attribute(s) found in both the style sheet and set in the Style Editor (in this case "color") are set to the value(s) selected in the Style Editor. All new attributes are added to each of the selected styles. If you choose ''Combine - Keep duplicate attributes", the results would be:

.S1 {color:red; font-size:12pt; border: 1px solid black;}
.S2 {color:blue; font-family:Arial; border: 1px solid black;}

The common attribute(s) (in this case "color") their original values, and the new attributes set in the Style Editor (in this case "border") are added to each of the selected styles.

Previewing Styles

Display the Preview tab to see the font, background, and border attributes of the styles in your style sheet. The Preview Tab of the CSS Editor is shown below.

Using the Web Components Style Editor

If you style sheet has all the required styles for a web component style sheet, when you click Web Components Style Editor, the Webform Style Editor will appear. New CSS Style Builder.

Limitations

Desktop applications only.

See Also

• Webform Style Editor