|
|
|
|
|
- Overview
- The management of states
- Text tab
- Fonts
- Size
- Decoration
- Other parameters of the font
- Paragraphs
- Background tab
Description of a WEBDEV element style
Controls from a WEBDEV project are associated with WEBDEV styles. This style is made up of several WEBDEV element styles. New in version 2025As of version 2025 Update 1, the term "WEBDEV element style" replaces the term "CSS style". This page takes into account the new vocabulary. WEBDEV element styles allow you to apply a specific characteristic to all the controls that use this element style. For example, you can create a WEBDEV element style to define the characteristics of the font used in all Button controls of a website. Note WEBDEV element styling is based on CSS properties. To create or modify a WEBDEV element style: - Go to the "Style" tab of the control description window.
- In the "Element styles" field, display the context menu for a token (or edit control) and select:
- or the "Edit element style" option.
- or the "Create a new element style" option.
- The WEBDEV element style description window appears.
Remarks: - This window is also displayed:
- from the "Style" tab of the control description window, by clicking on the "+ overrides" link. In this case, changes made in the window are local to the field used. These changes will not be applied to fields using this WEBDEV element style.
- from the WEBDEV element style editing window ("Modify" option in the context menu). For more details, see Editing WEBDEV project element styles.
- WEBDEV element styles from a skin cannot be modified.
This window allows you to: - Modify the characteristics of an existing style. Simply select the report to be modified, change the desired style characteristics and confirm.
Note: By default, changes are local to the. They override the reference style of the current field. The Tab Control "Style" lets you manage style updates. For more details, see WEBDEV styles. - Reset selected state. This button clears all overrides for the selected state..
- All Reset. This button clears all overrides for all states..
- Import CSScode . This button allows you to import CSS code to modify certain CSS characteristics of the style. In the window that opens, the CSS code entered must correspond to the code of a "CSS selector"..
This help page presents the different options available in the "Text" tab and in the "Background" tab. The preview is used to dynamically view the characteristics of the style. It is possible to define a style variation for each state of the element. The <Undefined> properties use the properties of the "Normal" status. In the "Normal" state, if a property is <Non définie>, the corresponding options defined in the user's browser will be taken into account. Note: Some reports are not available for all field types.. The table below presents the possible states according to the controls and to the browsers: | | | | | | | | | Hover | Active | Non-visited link | Visited link | First child | First letter | First row | Caption | | | | | | X | X | HTML static | | | | | X (FireFox only) | X | X | Graphic button | X | X | X | X (Internet Explorer only) | X (FireFox only) | | | Java button | | | | | | | | Text button | X (FireFox only) | X (FireFox only) | | | X (FireFox only) | | | Link | X | X | X | X | X (FireFox only) | X | | Image | X (FireFox only) | X (FireFox only) | | | X (FireFox only) | | | Clickable image | X (FireFox only) | X (FireFox only) | | | X (FireFox only) | | | Thumbnail | X (FireFox only) | X (FireFox only) | | | X (FireFox only) | | | Formatted display control | | | | | | X | X | Edit control | X (FireFox only) | X (FireFox only) | | | X (FireFox only) | | | Radio Button | X (FireFox only) | | | | | | | Check Box | | | | | | | | List | X (FireFox only) | X (FireFox only) | | | X (FireFox only) | | | Combo Box | X (FireFox only) | X (FireFox only) | | | X (FireFox only) | | | Table | | | | | X (FireFox only) | X | X | Pager | | | | | | X | X | TreeView | X | X | X | X (Internet Explorer only) | X (FireFox only) | | | Line | | | | | X (FireFox only) | | | Breadcrumb | X | X | X | X | X (FireFox only) | | |
Fonts Select one of the available font families. A font family is an organized font set. If the first font is not available on the computer of the Web user, the second font is sought. If this font is available, it is used; otherwise, the next font is sought. The [...] button is used to create new font families as well as duplicate and modify the existing families. Size Select the size of the font. The available sizes are: - A defined size, specified in a specific unit (pixels, centimeters, millimeters, inches, point, pica, percentage, ...).
- A size relative to the current font (when the page is displayed):
- xx-small: Extremely small size
- x-small: Very small size
- small: Small size
- medium: Normal size
- x-large: Large size
- xx-large: Very large size
- -1: smallest size
- +1: largest size
Decoration Additional options for formatting the font. These options are used to underline the links or to strike them out for example. - None: no special additional decoration
- StrikeOut: text is strikethrough: a line appears in the middle of the text. Example: a
- Underline: text is underlined. Example: B
- Blinking: text blinks (this option only has an effect if the user is using the Netscape browser)
- Overline: a line is drawn above the text.
Other parameters of the font | | Alignment | Text layout: left-aligned, centered, right-aligned or justified (left- and right-aligned). | Case | Character formatting: 1st letter uppercase, uppercase, lowercase or none (default). | Character spacing | Spacing between the letters. Specify a value that can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, etc. | Color | Select the color of the font. | Hyphenation | Managing word hyphenation. You can use standard hyphenation or cut the words if necessary. | Indentation | Indent for the first line. Specify a value that can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, ... | LineSpacing | Spacing between the lines. Specify a value that can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, etc. | Style | Character style: normal, italic, oblique | Variant | Character display mode: normal or small caps. | Vertical alignment | Alignment of the text in height in relation to the available area. | Weight | Thickness of the character. You have the ability to select:- a preset weight (normal, bold, heavy, light)
- a thickness (from 100 to 900)
|
Paragraphs You have the ability to manage the spacing before and after each paragraph. All you have to do is specify the value of the spacing and the selected unit. The following characteristics can be modified in the "Background" tab: | | Color | Select the background color of the control. | Image | Image displayed in the control background. The selected image must be found in the image directory of the project (<ProjectName>_WEB). | Rows | Repetition of the image in the control. The image can be tiled:- in tiles (repeated option)
- horizontally (repeated X option)
- vertically (repeated Y option)
| Fixed position | If this option is checked, the image will not be scrolled when the scrollbar is used. | Horizontal and vertical position | Position of the image in relation to the control. The value can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, ... |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|