Template CSS Reference

You can use Cascading Style Sheets (CSS) to customize the look and feel of your application.

Topics

CSS Syntax

CSS uses a specific syntax to define the style of HTML elements. This section presents the various syntax options.

Genero CSS Selectors

This section lists Genero CSS selectors by category (Containers, FormFields, Dialogs, and more). Not all selectors are valid for each of the three modes (AJAX, PAGE, PDA); you must view the generated HTML to see which selectors are valid for the mode (template and snippet sets) being used to display your application.

CSS Syntax

CSS uses a specific syntax to define the style of HTML elements.

Syntax

selector {
    style [...]
}

Notes

selector is a path defining on which HTML tags the styles have to be applied
style is a CSS style property as defined in the W3C site

Here is an excerpt of the selector syntax used with the Genero Web Client default theme:

Selector	Description
`BODY`	This selector applies to any `BODY` tag.
`#gWorkspace`	This selector applies to any tag having gWorkspace for id.
`.gGrid`	This selector applies to any tag having gGrid for class.
`.gMenu SPAN`	This selector applies to any `SPAN` tag which is a descendant of a tag having gMenu for class.
`INPUT.queryZone`	This selector applies to any `INPUT` tag having queryZone for class.
`.gToolBar .hover *`	This selector applies to any tag which is a descendant of a tag having hover for class and which is a descendant of a tag having gToolBar for class.

You can merge common styles configurations by grouping selectors in a comma separated list:

selector1 , selector2 , selector3 {
    styles [...]
}

For a complete reference for selector syntax, refer to the W3C site.

Back to the top

Template CSS

This section provides a list of selectors recognized by the Genero Web Client. It is divided into the following sections:

Containers CSS: GRID, TABLE, SCROLLGRID, GROUP, FOLDER, PAGE, HBOX, VBOX
FormFields CSS: FormField Box, EDIT, TEXTEDIT, BUTTON, BUTTONEDIT, DATEEDIT, CHECKBOX, COMBOBOX, RADIOGROUP, LABEL, Construct
Dialog CSS: MENU, DIALOG, TOPMENU, TOOLBAR, MESSAGE, ERROR
Other CSS

Notes

Not all selectors are valid for each of the three modes (AJAX, PAGE, PDA); you must view the generated HTML to see which selectors are valid for the mode (template and snippet sets) being used to display your application.
You can create your own selectors by adding classes to your snippet files.

GRID

Selector	Description
`.gGrid`	The `SPAN` tag containing the grid
`.gGridLine`	A line of the grid

Back to the top

TABLE

Selector	Description
`.gTableBox`	The `SPAN` tag containing the table
`.gTable`	The `TABLE` tag
`.gTable col.gHidden`	A hidden table column
`.gTable TH` `.gTable THEAD TR TH`	A table header cell
`.gTable TR`	A table row
`.gTable TD`	A table cell
`.gTable TD *`	Any table cell descendant
`.gTable TD .gCurrentField`	The field having the focus in the table
`.gTable INPUT.gTableHeader`	A column input header; used to sort the table
`.gTable .disabledTableHeader`	A disabled table column header
`.gTable .disabled`	A disabled field of the table
`.gTable .gSortAsc`	An ascending sorted table column
`.gTable .gSortDesc`	A descending sorted table column
`.gTable .gCurrentRow *`	Any descendant of the currently selected row
`.gTable .gButtonEdit`	A ButtonEdit widget in the table
`.gTable .gAction`	An action item (ex: the button of a ButtonEdit widget) in the table
`.gTable .activeButtonEdit .gAction`	The action item of the currently active ButtonEdit widget in the table
`.gTable .activeButtonEdit .gButtonEdit`	The input part of the currently active ButtonEdit widget in the table
`.gFill .gTable`	A Grid Table once the JavaScript layout function has finished its processing

Back to the top

SCROLLGRID

Selector	Description
`.gScrollGridBox`	The `SPAN` tag containing the scrollgrid
`.gScrollGrid`	The scrollgrid itself
`.gHLineBox HR`	A horizontal line in the scrollgrid

Back to the top

GROUP

Selector	Description
`.gGroupBox`	The `SPAN` tag containing the group
`.gGroup .gGroupBox .gGroup`	The container box of a group
`.gGroupTitle .gGroupBox .gGroupTitle`	The title of a group

Back to the top

FOLDER

Selector	Description
`.gFolder`	The `DIV` tag containing the folder pages

Back to the top

PAGE

Selector	Description
`.gFolder .gPageHeader`	A page header
`.gFolder .gPage`	A folder header
`.gFolder .selectedPageHeader`	The currently selected page header
`.gFolder .selectedPage`	The currently selected page

Back to the top

HBOX

Selector	Description
`.gHBox`	A HBOX container
`.gHBox TD`	A HBOX column

Back to the top

VBOX

Selector	Description
`.gVBox`	A VBOX container
`.gVBoxLine .gVBox TD`	A VBOX line

Back to the top

FormFields CSS

FormField Box
EDIT
TEXTEDIT
BUTTON
BUTTONEDIT
DATEEDIT
CHECKBOX
COMBOBOX
RADIOGROUP
LABEL
Construct

FormField Box

Selector	Description
`.gFormFieldBox`	The `SPAN` tag containing the formfield
`.gCurrentField`	The FormField having the input
`.gJustifyCenter`	A FormField having the `JUSTIFY` attribute set to center
`.gJustifyLeft`	A FormField having the `JUSTIFY` attribute set to left
`.gJustifyRight`	A FormField having the `JUSTIFY` attribute set to right
`.gShiftDown`	A FormField having the `DOWNSHIFT` attribute set
`.gShiftUp`	A FormField having the `UPSHIFT` attribute set
`.gNoEntry`	A FormField having the `NOENTRY` attribute set
`.gNotNull`	A FormField having the `NOT NULL` attribute set
`.gRequired`	A FormField having the `REQUIRED` attribute set
`.gTypeByte`	A FormField having the `BYTE` target type
`.gTypeChar`	A FormField having the `CHAR` target type
`.gTypeDate`	A FormField having the `DATE` target type
`.gTypeDatetime`	A FormField having the `DATETIME` target type
`.gTypeDecimal`	A FormField having the `DECIMAL` target type
`.gTypeFloat`	A FormField having the `FLOAT` target type
`.gTypeInteger`	A FormField having the `INTEGER` target type
`.gTypeInterval`	A FormField having the `NTERVAL` target type
`.gTypeMoney`	A FormField having the `MONEY` target type
`.gTypeSmallfloat`	A FormField having the `SMALLFLOAT` target type
`.gTypeSmallint`	A FormField having the `SMALLINT` target type
`.gTypeString`	A FormField having the `STRING` target type
`.gTypeText`	A FormField having the `TEXT` target type
`.gTypeVarchar`	A FormField having the `VARCHAR` target type
`.gVerify`	A FormField having the `VERIFY` attribute set

Back to the top

EDIT

Selector	Description
`.gEdit`	An Edit widget
`.gFill .gEdit`	An Edit widget once the Javascript layout function has finished its processing

Back to the top

TEXTEDIT

Selector	Description
`.gTextEdit`	A TextEdit widget
`.gScrollbarHorizontal`	A TextEdit widget having the `SCROLLBARS` attribute set to horizontal
`.gScrollbarVertical`	A TextEdit widget having the `SCROLLBARS` attribute set to vertical
`.gFill .gTextEdit`	An TextEdit widget once the Javascript layout function has finished its processing

Back to the top

BUTTON

Selector	Description
`.gButtonBox`	The `SPAN` tag containing the button
`.gButtonBox .gAction`	The image or text for this button
`.pressedButtonBox`	A pressed button
`.gFill .gButtonBox`	A Button once the Javascript layout function has finished its processing
`.gFill .gHBoxTag .gButtonBox`	A Button in a Grid HBox tag once the Javascript layout function has finished its processing

Back to the top

BUTTONEDIT

Selector	Description
`.gButtonEdit`	A ButtonEdit widget
`.gFill .gButtonEdit`	An ButtonEdit widget once the JavaScript layout function has finished its processing

Back to the top

DATEEDIT

Selector	Description
`.gDateEdit`	A DateEdit widget
`.gFill .gDateEdit`	A DateEdit widget once the JavaScript layout function has finished its processing
`.calendar`	The calendar widget
`.calendar THEAD .nav`	The calendar widget's navigation bar
`.calendar TD`	A calendar widget cell
`.calendar THEAD .nav .info`	The calendar widget's date
`.calendar THEAD .days TD`	The calendar widget's days bar
`.calendar THEAD .days .we`	Weekend days in the calendar widget's days bar
`.calendar TBODY TD`	A calendar widget's day number cell
`.calendar TBODY .hover`	A calendar widget's day number cell having the mouse over it
`.calendar TBODY .today`	Today's cell in the calendar widget
`.calendarIcon`	The DateEdit widget's calendar icon

Back to the top

CHECKBOX

Selector	Description
`.gCheckBox` `.gFormFieldBox .gCheckBox`	A CheckBox widget
`.gTable TD .gCheckBox`	A CheckBox widget in a table
`.nullState`	A CheckBox widget having no state
`.checkedState`	A checked CheckBox widget
`.uncheckedState`	An unchecked CheckBox widget

Back to the top

COMBOBOX

Selector	Description
`.gComboBox`	A ComboBox widget
`.comboboxEdit`	The ComboBox input field
`.comboboxButton`	The ComboBox button
`.comboboxList`	The ComboBox list of values
`.comboboxList DIV`	A ComboBox list item
`.comboboxList DIV.over`	The ComboBox list item having the focus
`.comboboxList DIV.selected`	The currently selected ComboBox list item
`.gCurrentField .comboboxEdit`	The ComboBox having the input
`.disabled .comboboxEdit`	A disabled ComboBox input field
`.disabled .comboboxButton`	A disabled ComboBox button
`.gQuery .comboboxEdit`	A ComboBox input in construct mode
`.gFill .comboboxEdit`	A ComboBox input once the JavaScript layout function has finished its processing
`.gFill .gHBoxTag .comboboxEdit`	A ComboBox input in a Grid HBox tag once the JavaScript layout function has finished its processing

Back to the top

RADIOGROUP

Selector	Description
`.gRadioGroup`	A RadioGroup widget
`.gOrientationHorizontal DIV`	An option of a RadioGroup widget having its `ORIENTATION` attribute set to horizontal

Back to the top

LABEL

Selector	Description
`.gLabel`	A form label
`.gFill .gLabelBox LABEL`	A static Label once the JavaScript layout function has finished its processing
`.gFill .gHBoxTag .gLabelBox LABEL`	A static Label in a Grid HBox tag once the JavaScript layout function has finished its processing

Back to the top

Construct

Selector	Description
`INPUT.queryZone`	A formfield in construct mode
`INPUT.currentQueryZone`	The formfield in construct mode having the focus

Back to the top

Dialog CSS

MENU
DIALOG
TOPMENU
TOOLBAR
MESSAGE
ERROR

Selector	Description
`.gMenu`	The `DIV` tag containing the menu
`.gMenu SPAN`	The menu title
`.gMenu UL`	The menu actions container
`.gMenu LI`	A menu action
`.gMenu LI.hover`	A menu action having the mouse cursor over it
`.gMenu INPUT`	The image or text associated to the menu action
`.gMenu LI.gCurrentAction INPUT`	The image or text for the current menu action
`.gMenu LI.gHidden`	A hidden menu action
`.gStyleDialog IMG`	The image associated to a menu having the `STYLE` attribute set to Dialog

Back to the top

DIALOG

Selector	Description
`.gDialog`	The `DIV` tag containing the action panel
`.gDialog UL`	The action panel container
`.gDialog LI`	An action
`.gDialog LI.hover`	An action having the mouse cursor over it
`.gDialog LI.gHidden`	A hidden action
`.gDialog INPUT`	The text associated to the action

Back to the top

TOPMENU

Selector	Description
`.gTopMenu`	The `DIV` tag containing the TopMenu
`.gTopMenu UL`	The container for the TopMenu list of top groups
`.gTopMenu LI`	A TopMenu top group
`.gTopMenu UL UL`	A TopMenu group's items lis
`.gTopMenu LI LI`	A TopMenu group item
`.gTopMenu UL UL UL`	A sub-group's items list
`.gTopMenu label`	The TopMenu text
`.gTopMenu .gAction`	The image or text for a TopMenu command
`.gTopMenu .hover`	The TopMenu item having the mouse cursor over it
`.gTopMenu HR`	A TopMenu separator
`.gTopMenu LI.gHidden`	A hidden TopMenu item

Back to the top

TOOLBAR

Selector	Description
`.gToolBar`	The `DIV` tag containing the ToolBar
`.gToolBar UL`	The container for the ToolBar items
`.gToolBar LI`	A ToolBar item
`.gToolBar HR`	A ToolBar separator
`.gToolBar INPUT`	The image or text for a ToolBar item
`.gToolBar .hover`	The ToolBar item having the mouse cursor over it
`.gToolBar .hover *`	The image or text for a ToolBar item having the mouse cursor over it
`.gToolBar .pressed`	A pressed ToolBar item
`.gToolBar LI.gHidden`	A hidden ToolBar item

Back to the top

MESSAGE

Selector	Description
`#gMessage`	The `P` tag containing the message

Back to the top

ERROR

Selector	Description
`#gError`	The `P` tag containing the error message

Back to the top

Other CSS

Selector	Description
`#gDialogForm`	The HTML form containing the workspace
`#gForm`	The container of the application's current form
`#gForm .gHidden`	Any hidden elements in the form
`#gFormTable`	The `TABLE` tag containing the form
`#gForm-div`	The `DIV` tag containing the form
`#gPanel`	The `TD` tag containing the action panel
`BODY`	The `BODY` tag of the page
`.defaultButton`	An image for which the resource has not been found
`.disabled` `.disabled OPTION`	A disabled element of the application
`.gCurrentCell .disabled`	A disabled element of a screen array
`SELECT.gCurrentField`	The ComboBox widget having the focus
`.gStretchX`	An Image widget having the `STRETCH` attribute set to X
`.gStretchY`	An Image widget having the `STRETCH` attribute set to Y
`.gAutoScale`	An Image widget having the `AUTOSCALE` attribute set\
`.gHLineBox HR`	A horizontal line
`.gFill .gHLineBox HR`	A horizontal line once the JavaScript layout function has finished its processing
`.gFill .gHBoxTag .gHLineBox HR`	A horizontal line in a Grid HBox tag once the JavaScript layout function has finished its processing

Back to the top