Document revision: 2024-10-28
Refers to WEBDLG2 version: B0840 2409-1
WEBDLG2 uses CSS to define the visual appearance of the user
interface.
The HTML document loads the
eq-webdlg.css file which contains the WEBDLG2 client CSS rules
in minified form to reduce page load times.
The commented CSS source file eq-webdlg.src.css is installed
for reference in the htdocs subdirectory below the Eloquence
share/webdlg2 directory:
- HP-UX, Linux
- /opt/eloquence/8.4/share/webdlg2/htdocs/eq-webdlg.src.css
- Windows
- C:\Program Files\Eloquence\8.4\share\webdlg2\htdocs\eq-webdlg.src.css
To allow overriding the default WEBDLG2 color scheme, a CSS template is
available for download:
theme-colors.css
All rules in this template are prefixed with html.theme, where
the .theme CSS class name should be replaced with a name for
the customized color scheme.
For example:
- Copy the template to a file named: theme-colors-dark.css
- Replace all html.theme occurrences in the file with:
html.colors-dark
- Modify the color values as desired
(1).
It is possible to selectively copy a subset of the template rules into
a custom color scheme, for example only those related to the ListBox
(CSS class name: eq-listbox). In such a case it is important
to cover all related rules (background, foreground, border,
focus, selection, disabled, drag-over), otherwise the color scheme
might be inconsistent, e.g., a disabled state might not be visually
displayed as expected.
To use a customized color scheme in your WEBDLG2 applications,
configure an URI in the
eloqwebd2.uri file for the
directory containing the colors theme file, for example:
[/plugin]
Path = /directory/in/web/server/document/hierarchy
This configuration associates the /plugin URI with the directory
containing the colors theme in the file system. Now the
application can be configured to
load the colors theme by setting
PluginURL,
and to set the
colors-dark CSS class name when the application is active,
as shown below:
PluginURL = /plugin/theme-colors-dark.css
CssClass = colors-dark
The CssClass
configuration above sets the colors-dark class name on the
<html> document element when the application is active,
which in turn activates all custom CSS rules prefixed with
html.colors-dark.
Alternatively, the colors theme may be integrated into the
HTML documents. This is necessary
when using an external web server.
For example:
<link href="/path/to/theme-colors-dark.css"
rel="stylesheet" type="text/css">
In addition, CssClass
needs to be configured to activate the custom CSS rules, as shown above.
|
