NotDocumented

• CSS styles,
• WEBDEV styles.

A control: several elements

• the caption.
• the input area.
• an additional area containing the caption and the input area.
  

• The CSS styles are applied to the control elements.
  For the Edit control, a specific CSS style can be applied to the caption of the edit control or to the input area.
• The WEBDEV styles are applied to the entire control.
  A WEBDEV style includes several CSS styles.
  For example, for the Edit control, the WEBDEV style contains:
  • The CSS style for the caption,
  • The CSS style for the input area,
  • The different style options for the control global area.

Discovering the styles via an example

1. Go to the WEBDEV home page (Ctrl + <).
2. On the home page, click "Tutorial", then in "Part 7 - Lesson 7.1 - Styles", double-click "Styles - Answers".
3. Open the "PAGE_Styles" page in the editor.
4. Open the description window of the "Last name" Edit control (select "Description" in the context menu).
5. Select the "Style" tab. This tab allows you to define the control style characteristics.
6. The following window appears:
   

Select control CSS styles

1. In the "Style" tab of the control description window, in the "Element" combo box, select an element and set the desired style.
   
   Remark: All elements followed by "(CSS)" can use a CSS style directly: simply select its name.
2. The "CSS style" combo box allows you to choose the CSS style of the element: this style will be applied to the element.

Editing the CSS style of a control

1. In the "Style" tab of the control description window, click next to the "CSS Style" combo box.
   
2. In the context menu that appears, select "Edit".
3. The CSS style edit window opens.
   
4. This window allows you to create or modify all the CSS styles of the project.

• Zone 1. The control state to which the style will be applied: normal, hover, active, etc.
• Zone 2. The CSS properties associated with the selected state. Each CSS property can be modified for each state.

1. Select the "MyCustomStyle_InputArea" style in the combo box of section 1 if necessary.
2. Select "default" (first state in section 1).
3. Go to the "Background" tab: the background color is white.
4. Select "focus" (fourth state in section 1).
5. In the "Background" tab, the background color of the input area is pastel yellow. The CSS style contains the style for each one of the states.
6. Close the CSS style description window.

The "Style" tab of the control description window appears again. In the bottom section of the window, you can define the most frequently used style options:

• Font,
• Size,
• Bold, Italic, Underline, Strikethrough,
• Vertical and horizontal alignment,
• Background color.

	Caution	These options are used to quickly override the CSS style of the current control. In this case, changing these options will not affect the other controls that use the CSS style. You can override all the other properties of the CSS style via "+ overrides".

WEBDEV styles

• The CSS style for the caption,
• The CSS style for the input area,
• The different style options for the control global area.

To define the WEBDEV styles, use the panel displayed on the right of the control "Style" tab:

The name of the WEBDEV style appears at the top of this window. It is possible to:

• Choose an existing style.
• Add the style of the current control to the project style sheet.
  This option allows you to reuse the style in other controls of the project.
• Dissociate the control.
  This option prevents future style modifications from being applied to the control. This option is not recommended: we advise you to use style overrides.

• Select the "Caption (CSS)" element in the bottom section of the "Style" tab.
• Select "Bold" in the bottom section.

To see the overridden elements, simply click the link that indicates the number of overrides applied to the control, at the top of the WEBDEV style panel.

1. On the "Creation" tab, in the "Usual controls" group, click .
2. Click where you want to create the control in the page.

• Via the "Style" tab in the control description window (as seen previously).
• Via the "Modification" tab of the ribbon: a preview shows the different WEBDEV styles available for the control.
  
• By selecting "Choose a WEBDEV style" in the context menu of the control.
  

1. Select the control you have just created.
2. Open the context menu of the control and select "Choose a WEBDEV style".
3. In the window that appears, select the "Custom" style.
4. Validate the style selection window. The color of the control caption changes: the style has been applied.

Save (Ctrl + S) and test the page (click in the quick access buttons).

1. The page is displayed in the browser.
2. Click the input area of the new Edit control: the input area changes to yellow.
3. Close the browser.

Overriding the CSS style of a control

1. Open the description window of the previously created control.
2. In the "Style" tab, choose the "Input area (CSS)" element.
3. Click "+ overrides" to override the CSS options of this element.
4. Select the "focus" state.
   
5. In the "Background" tab, change the background color. Choose a pale purple color, for example.
6. Validate. In the WEBDEV styles pane, the link (top right) indicates "1 override".
7. By clicking it, you can see that the background color of the inside area was overridden.
8. Validate the control description window.

Save (Ctrl + S) and test the page (click in the quick access buttons).

1. The page is displayed in the browser.
2. Move the cursor from one control to another: the background color is yellow for all controls except for the control that was just created.
3. Close the browser.

Modifying a CSS style for all controls

1. Open the description window of the control you created (Alt + Enter).
2. In the "Style" tab, choose the "Input area (CSS)" element.
3. Click to the right of the CSS style name. In the menu that opens, select Edit". The CSS style editing window appears.
4. Select the "default" state.
5. In the "Text" tab, change the color. Choose a green color, for example.
6. Validate and then validate the control description window.

Save (Ctrl + S) and test the page (click in the quick access buttons).

1. The page is displayed in the browser.
2. Type text in the different Edit controls of the page: the text is displayed with the new selected color. This change was applied even to the previously created control with the style that was overridden.
3. Close the browser.

1. Select the edit control "Name".
2. Press SPACE or ENTER.
3. The text becomes editable.
   
4. Add an asterisk at the end of the text.
5. Select this star.
6. On the "Text" tab, in the "Font" group:
   
   • Click to apply superscript formatting.
   • Change the text color to red with the button.
7. Exit the edit mode (Esc).
8. The red asterisk appears in the control caption.