ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Styles / WEBDEV element styles
  • Overview
  • The management of states
  • Text tab
  • Fonts
  • Size
  • Decoration
  • Other parameters of the font
  • Paragraphs
  • Background tab
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview
Controls from a WEBDEV project are associated with WEBDEV styles. This style is made up of several WEBDEV element styles.
New in version 2025
As 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:
  1. Go to the "Style" tab of the control description window.
  2. 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.
  3. 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.
The management of states
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:
HoverActiveNon-visited linkVisited linkFirst childFirst letterFirst row
CaptionXX
HTML staticX (FireFox only)XX
Graphic buttonXXXX (Internet Explorer only)X (FireFox only)
Java button
Text buttonX (FireFox only)X (FireFox only)X (FireFox only)
LinkXXXXX (FireFox only)X
ImageX (FireFox only)X (FireFox only)X (FireFox only)
Clickable imageX (FireFox only)X (FireFox only)X (FireFox only)
ThumbnailX (FireFox only)X (FireFox only)X (FireFox only)
Formatted display controlXX
Edit controlX (FireFox only)X (FireFox only)X (FireFox only)
Radio ButtonX (FireFox only)
Check Box
ListX (FireFox only)X (FireFox only)X (FireFox only)
Combo BoxX (FireFox only)X (FireFox only)X (FireFox only)
TableX (FireFox only)XX
PagerXX
TreeViewXXXX (Internet Explorer only)X (FireFox only)
LineX (FireFox only)
BreadcrumbXXXXX (FireFox only)
Text tab

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.
For more details, see Font family.

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

AlignmentText layout: left-aligned, centered, right-aligned or justified (left- and right-aligned).
CaseCharacter formatting: 1st letter uppercase, uppercase, lowercase or none (default).
Character spacingSpacing between the letters. Specify a value that can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, etc.
ColorSelect the color of the font.
HyphenationManaging word hyphenation. You can use standard hyphenation or cut the words if necessary.
IndentationIndent for the first line. Specify a value that can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, ...
LineSpacingSpacing between the lines. Specify a value that can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, etc.
StyleCharacter style: normal, italic, oblique
VariantCharacter display mode: normal or small caps.
Vertical alignmentAlignment of the text in height in relation to the available area.
WeightThickness 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.
Background tab
The following characteristics can be modified in the "Background" tab:
ColorSelect the background color of the control.
ImageImage displayed in the control background. The selected image must be found in the image directory of the project (<ProjectName>_WEB).
RowsRepetition of the image in the control. The image can be tiled:
  • in tiles (repeated option)
  • horizontally (repeated X option)
  • vertically (repeated Y option)
Fixed positionIf this option is checked, the image will not be scrolled when the scrollbar is used.
Horizontal and vertical positionPosition of the image in relation to the control. The value can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, ...
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 02/01/2025

Send a report | Local help