PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WEBDEV 28 feature!
  • In this lesson you will learn the following concepts
  • Overview
  • Discovering styles
  • A control: several elements
  • Discovering the styles via an example
  • Selecting the CSS style of a control
  • Editing the CSS style of a control
  • WEBDEV styles
  • Implementing styles: a practical example
  • Overriding a CSS style for a control
  • Modifying a CSS style for all controls
  • Styles and rich text
Lesson 7.1. Styles
In this lesson you will learn the following concepts
  • CSS styles.
  • WEBDEV styles.
Lesson duration

Estimated time: 1 h
Previous LessonTable of contentsNext Lesson
Overview
WEBDEV allows you to "design" your sites. To help you with this task, WEBDEV proposes to use two types of styles:
  • CSS styles,
  • WEBDEV styles.
Using styles for your controls creates a significant advantage: a modification performed in a WEBDEV or CSS style is automatically applied to all controls that use this style.
Discovering styles
Before using the styles, let's see where they will be applied: the controls.

A control: several elements

Each WEBDEV control includes several elements.

  • Let's take the edit control as an example. This control includes three elements:
    • the caption.
    • the input area.
    • an additional area containing the caption and the input area.
      Style elements of an edit control
  • How are the styles applied to the edit control? Depending on the type of style (WEBDEV or CSS), it may be applied differently.
    • The CSS styles in WEBDEV will be 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 will be applied to the entire control.
      A WEBDEV style includes several CSS styles.
      For example, on 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

  • To discover the styles in WEBDEV, we will use a simple 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 (open the context menu of the control and select "Description").
    5. Select the "Style" tab. This tab allows you to define the control style characteristics.
    6. The following window appears:
      'Style' tab of an edit control
This window allows you to manage the CSS styles (section 1 of the window) and the WEBDEV styles (section 2 of the window) of the control. Let's take a look at the features of this window.

Selecting the CSS style of a control

  • To select the CSS styles of a control:
    1. In the "Style" tab of the control description window, in the "Element" combo box, select the element with the desired style.
      Elements managed by the style
      Remark: All elements flagged "(CSS)" can use a CSS style directly: all you have to do is select its name.
    2. The "CSS style" combo box allows you to choose the element CSS style: this style will be applied to the element.

Editing the CSS style of a control

  • To create or edit a CSS style:
    1. In the "Style" tab of the control description window, click next to the "CSS Style" combo box.
      Create or edit a CSS style
    2. In the context menu that appears, select "Edit".
    3. The CSS style edit window appears.
      CSS style edit window
    4. This window allows you to create or modify all the CSS styles of the project.
  • Let's analyze this window. It has 2 sections:
    • Section 1. The control state to which the style will be applied: normal, hover, active, etc.
    • Section 2. The CSS properties associated with the selected state. Each CSS property can be modified for each state.
  • Let's check the characteristics of the CSS style named "MyCustomStyle_InputArea":
    1. Select the "MyCustomStyle_InputArea" style in the combo box of section 1 if necessary.
    2. Select the "Normal" state (the first state of section 1).
    3. Click the "Background" tab: the background color is white.
    4. Select the "Edit" state (the 4th state of 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 have the ability to quickly access the style elements that are frequently modified:
    Quick access to options
    • Font,
    • Size,
    • Bold, Italic, Underlined, Strikeout,
    • Vertical and horizontal alignment,
    • Background color.

Caution

These options are used to quickly override the CSS style of the current control. In this case, the modifications performed in these options will not be applied to the other controls that use this CSS style.
The "More options" link is used to override all the other CSS style properties.
Let's now discover the WEBDEV styles.

WEBDEV styles

A WEBDEV style includes several CSS styles. For example, on 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.
  • To manage the WEBDEV styles, use the panel displayed on the right of the control "Style" tab:
    WEBDEV styles
    The name of the WEBDEV style appears at the top of this window. You can:
    • Choose an existing style,
    • Add the style of the current control to the project style sheet.
      This option allows you to re-use this style in other project controls.
    • Dissociate this control.
      This option prevents future style modifications from being applied to this control. This option is not recommended: we advise you to use style overrides.
The project skin defines a WEBDEV style for each type of control. This WEBDEV style can be used "as it is" or it can be modified on some control elements. For example, to make the caption of a specific edit control bold, you must:
  • Select the "Caption (CSS)" element in the bottom section of the "Style" tab.
  • Select "Bold" in the bottom section.
This modification will not dissociate the WEBDEV style from the control: the Bold property will be overridden in relation to the initial style.
Therefore, if the initial style is modified (to change the background color for example), this modification will be applied to this control while keeping the override.

Note

To see the overridden elements, simply click the link that indicates the number of overrides performed for the control, at the top of the WEBDEV style management panel.
Implementing styles: a practical example
Enough theory, let's get down to work. We will create an edit control and modify its styles in "PAGE_Styles" of the "Styles" project.
Remark: We will use an edit control but the principle for handling styles can be applied to all controls available in WEBDEV.

  • To create the edit control:
    1. On the "Creation" tab, in the "Usual controls" group, click Create an edit control.
    2. Click where you want to create the control in the page.
This control is associated with a WEBDEV style (it is the default WEBDEV style defined in the skin chosen when creating the project).

  • Three methods can be used to select the WEBDEV style of a control:
    • Via the "Style" tab in the control description window (as seen previously).
    • Via the "Modification" pane of the ribbon: a preview of different WEBDEV styles available for the control is displayed.
      Ribbon 'Modification' tab
    • By selecting "Choose a WEBDEV style" in the context menu of the control.
      Editing the style sheet
  • This last method will be used to associate the control that was just created with the "EDT_Custom" style. This style is used by all other page controls.
    1. Select the control that was 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 is applied.
  • Save (Ctrl + S) and test the page (click Test page in the quick access buttons).
    1. The page is displayed in the browser.
    2. Enter in the new edit control: the input area is colored in yellow.
    3. Close the browser.

Overriding a CSS style for a control

  • We will modify the style of the control input area:
    1. Open the description window of the 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 "Edit" state.
      Style - States of an element
    5. In the "Background" tab, change the background color. Choose a 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 editable inside area was overridden.
    8. Validate the control description window.
  • Save (Ctrl + S) and test the page (click Test page in the quick access buttons).
    1. The page is displayed in the browser.
    2. Move the cursor from a control to another one: 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

  • We are now going to modify the CSS style of the input area in order to change the text color. This modification will be performed for all edit controls of the page.
    1. Open the description window of the control we 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 context menu that appears, select "Edit". The window for editing the CSS style is displayed.
    4. Select the "Normal" 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 Test page 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 modification was taken into account even on the control that was created beforehand and whose style was overridden.
    3. Close the browser.
Styles and rich text
As for the appearance, you can also define rich text in the elements!
The rich text allows you to use different styles for the different words in the control caption. Therefore, for the caption of an edit control, you can define that part of the caption will use the default color while another part will use a different color.
Let's take a simple example: add a red asterisk to specify that a control is a required field.

  • In our example:
    1. Select the "Last name" edit control.
    2. Press SPACE or ENTER.
    3. The caption text can be edited.
      Caption of the control in edit mode
    4. Add an asterisk at the end of the caption.
    5. Select this asterisk.
    6. On the "Text" tab, in the "Font" group:
      Font options
      • Click Superscript to apply superscript formatting.
      • Change the text color to red with the Change the color button.
    7. Exit from the edit mode (Esc key).
    8. The red asterisk appears in the control caption.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 28
Comments
Click [Add] to post a comment