SystemTheme.css

SystemTheme.css is a system css file that specifies basic appearance parameters of all applications developed, deployed, and run via Lycia.

SystemTheme.css is overwritten by master themes and user themes as well as master and user styles (.css).

LYCIA_SYSTEM_THEME_CSS=C:\Users\my_user\my_lycia\my_system_files\my_system_css.css

By default, SystemTheme.css has the following content (press » to see the default content):

.qx-top-of-hierarchy,

.qx-application {

font-size: 10pt;

font-family: Verdana,Arial,sans-serif;

}

.qx-application.qx-informix4gl,

.ui-widget.qx-o-c-classic:not(.qx-o-c-nativestyle)

{font-family: "Courier New";}

.qx-o-c-classic:not(.qx-o-c-nativestyle) {background-color: #e6e6e6;}

.qx-aum-label.qx-element-role-error .qx-image { height: 14px; width: 14px; }

.qx-aum.qx-aum-calendar,

.qx-aum.qx-aum-time-edit-field,

.qx-aum.qx-aum-combo-box,

.qx-aum.qx-aum-list-box,

.qx-aum.qx-aum-spinner,

.qx-aum.qx-aum-text-area,

.qx-aum.qx-aum-text-field,

.qx-aum.qx-aum-time-edit-field {padding: 0;background-image:none;}

.qx-aum-radio-button,

.qx-aum-label,

.qx-aum-radio-button-list,

.qx-aum-check-box {padding: 0 0;}

.qx-aum.qx-c-attribute_underline,

.qx-aum.qx-c-attribute_underline * { text-decoration: underline; }

.qx-aum.qx-c-attribute_bold,

.qx-aum.qx-c-attribute_bold * { font-weight: bold; }

.qx-aum.qx-c-attribute_blue:not(.qx-c-nativestyle) { color: blue; }

/*.qx-aum-text-area:not(.qx-c-nativestyle),*/

.qx-aum-list-box.qx-active.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle),

.qx-aum-calendar.qx-active.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle),

.qx-aum-spinner.qx-active.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle),

.qx-aum-text-field.qx-active.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle),

.qx-aum-time-edit-field.qx-active.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle),

.qx-aum-combo-box.qx-active.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle),

/*.qx-aum-text-area.qx-active.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle),*/

.qx-aum-abstract-data-table.qx-c-activefield.qx-c-attribute_dim:not(.qx-c-nativestyle) .qx-tbody tbody tr

{ background-color: rgba(175,175,175,0.255); }

/*.qx-aum:not(.qx-c-nativestyle) * {

background-color: inherit;

color: inherit;

}*/

.qx-aum.qx-c-attribute_green:not(.qx-c-nativestyle)

{ color: rgb(0, 97, 0); }

.qx-aum.qx-c-attribute_green.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle)

{ background-color: rgb(190, 240, 200); color: rgb(125, 125, 125); }

.qx-aum.qx-c-attribute_magenta:not(.qx-c-nativestyle)

{color: rgb(197, 28, 90); }

.qx-aum.qx-c-attribute_magenta.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle)

{ background-color: rgb(250, 207, 221); color: rgb(125, 125, 125); }

.qx-aum.qx-c-attribute_black:not(.qx-c-nativestyle)

{color: black; }

.qx-aum.qx-c-attribute_black.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle)

{ background-color: rgb(125, 125, 125); color: white; }

.qx-aum.qx-c-attribute_black.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(175, 175, 175); }

.qx-aum.qx-c-attribute_black.qx-aum.qx-c-attribute_reverse.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(125, 125, 125); color: rgb(230, 230, 230); }

.qx-aum.qx-c-attribute_white:not(.qx-c-nativestyle)

{color: rgb(217, 217, 217); }

.qx-aum.qx-c-attribute_white.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle)

{ background-color: white; color: blue; }

.qx-aum.qx-c-attribute_white.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(175, 175, 175); }

.qx-aum.qx-c-attribute_white.qx-aum.qx-c-attribute_reverse.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: white; color: rgb(125, 125, 125); }

.qx-aum.qx-c-attribute_cyan:not(.qx-c-nativestyle)

{color: rgb(49, 134, 155); }

.qx-aum.qx-c-attribute_cyan.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle)

{ background-color: rgb(205, 235, 235); color: blue; }

.qx-aum.qx-c-attribute_cyan.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(175, 175, 175); }

.qx-aum.qx-c-attribute_cyan.qx-aum.qx-c-attribute_reverse.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(125, 125, 125); color: rgb(205, 235, 235); }

.qx-aum.qx-c-attribute_red:not(.qx-c-nativestyle)

{color: rgb(156, 0, 6); }

.qx-aum.qx-c-attribute_red.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle)

{ background-color: rgb(255, 183, 186); color: blue; }

.qx-aum.qx-c-attribute_red.qx-aum.qx-c-attribute_dim

{ background-color: rgb(175, 175, 175); }

.qx-aum.qx-c-attribute_red.qx-aum.qx-c-attribute_reverse.qx-aum.qx-c-attribute_dim

{ background-color: rgb(125, 125, 125); color: rgb(255, 183, 186); }

.qx-aum.qx-c-attribute_normal:not(.qx-c-nativestyle)

{color: black; }

.qx-aum.qx-c-attribute_normal.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle)

{ background-color: rgb(125, 125, 125); color: rgb(217, 217, 217); }

.qx-aum.qx-c-attribute_normal.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(175, 175, 175); }

.qx-aum.qx-c-attribute_normal.qx-aum.qx-c-attribute_reverse.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(125, 125, 125); color: rgb(230, 230, 230); }

.qx-aum.qx-c-attribute_blue:not(.qx-c-nativestyle)

{ color: rgb(31, 73, 125); }

.qx-aum.qx-c-attribute_blue.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle)

{ background-color: rgb(190, 210, 240); color: black; }

.qx-aum.qx-c-attribute_blue.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(175, 175, 175); }

.qx-aum.qx-c-attribute_blue.qx-aum.qx-c-attribute_reverse.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(190, 210, 240); color: rgb(125, 125, 125); }

.qx-aum.qx-c-attribute_yellow:not(.qx-c-nativestyle)

{color: rgb(156, 101, 0); }

.qx-aum.qx-c-attribute_yellow.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle)

{ background-color: rgb(255, 235, 156); color: black; }

.qx-aum.qx-c-attribute_yellow.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(175, 175, 175); }

.qx-aum.qx-c-attribute_yellow.qx-aum.qx-c-attribute_reverse.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle)

{ background-color: rgb(255, 235, 156); color: rgb(125, 125, 125); }

.qx-tbody tr

{ color: black; background-color: rgb(175,175,175); }

.qx-c-activefield .qx-tbody tr

{ color: black; background-color: white; }

.qx-aum-button,

.qx-aum-check-box,

:not(.ui-widget-content).qx-aum-label,

.qx-aum-radio-button-list,

.qx-aum-radio-button

{ color: black; background-color: transparent; }

.qx-aum-button *,

.qx-aum-check-box *,

.qx-aum-label *,

.qx-aum-radio-button-list *,

.qx-aum-radio-button *

{ color: inherit; background-color: transparent; }

.qx-aum.qx-c-attribute_reverse:not(.qx-c-nativestyle) { background-color: black; color: rgb(230, 230, 230); background-image: none;}

.qx-aum.qx-c-attribute_dim:not(.qx-c-nativestyle) {color: black; background-color: rgb(175,175,175); background-image: none;}

.qx-o-c-classic .qx-aum-status-bar:not(.qx-c-nativestyle) { border-width: 1px 0 0 0; border-color: rgba(192,192,192,1); border-style: solid; }

.qx-o-c-classic .qx-aum-status-bar .qx-aum-label:not(.qx-c-nativestyle) { background-color: rgba(230,230,230,1); }

.qx-o-c-classic .qx-aum-status-bar .qx-aum-label.qx-element-role-error:not(.qx-c-nativestyle) { background-color: rgba(192,192,192,1); }

.qx-aum-popup-menu { background-color: rgba(230,230,230,1); }

.qx-aum-window.qx-c-full-screen.qx-flat-window:not(.qx-c-nativestyle) { background-color: rgba(230,230,230,1); }

.qx-aum-window.qx-c-no-full-screen.qx-flat-window:not(.qx-c-nativestyle) { background-color: rgba(230,230,230,1); }

.qx-aum-window.qx-flat-window:not(.qx-c-nativestyle) { background-color: rgba(230,230,230,1); }

.qx-aum-window.qx-identifier-screen.qx-flat-window:not(.qx-c-nativestyle) { background-color: rgba(230,230,230,1); }

.qx-o-c-classic.qx-o-aum-window:not(.qx-o-c-nativestyle) { background-color: rgba(230,230,230,1); }

.qx-o-c-classic.qx-o-aum-window.qx-o-c-full-screen:not(.qx-o-c-nativestyle) { background-color: rgba(230,230,230,1); }

.qx-o-c-classic.qx-o-aum-window.qx-o-c-no-full-screen:not(.qx-o-c-nativestyle) { background-color: rgba(230,230,230,1); }

/*.qx-c-classic.qx-aum-window:not(.qx-c-nativestyle),*/

.qx-flat-window:not(.qx-c-nativestyle) {

background-color: #e6e6e6;

}

.qx-aum-application {padding: 3px 0;}

.qx-right-toolbar-cell .qx-aum-toolbar { width: 130px; }

.qx-top-toolbar-cell .qx-aum-toolbar,

#qx-container-toolbars .qx-aum-toolbar

{ height: 34px; }

.qx-top-toolbar-cell .qx-aum-toolbar-group {

padding-top: 2px;

padding-bottom: 2px;

}

.qx-aum-status-bar > .qx-aum-template-instance {

height: 24px;

}

.qx-menu-bar .qx-aum-menu-bar.qx-has-buttons {

height: 18px;

}

.qx-single-row {

align-self: stretch;

}

.qx-single-row .qx-text {

padding: 1px;

}

.qx-aum-toolbar-button {

padding: 0 2px;

}

.qx-aum-combo-box {

border: 1px solid #AAA;

min-width: 3em;

}

.qx-aum-function-field-abs {

border: 1px solid #AAA;

}

.qx-ff-button .qx-image {

width: 1.2em;

height: 1.2em;

}

.qx-aum-abstract-range-field.qx-aum-abstract-field.qx-horizontal,

.qx-aum.qx-aum-abstract-bool-field,

.qx-aum.qx-aum-abstract-string-field,

.qx-aum.qx-single-row {

min-height: 1.4em;

}

.qx-aum-time-edit-field,

.qx-aum-abstract-range-field.qx-aum-abstract-field.qx-horizontal {

height: 1.4em;

}

.qx-aum-abstract-range-field.qx-aum-abstract-field.qx-vertical {

width: 1.4em;

}

.qx-flat-window.ui-widget-content:not(.qx-c-nativestyle) {

border: none;

}

body,

.ui-widget input,

.ui-widget select,

.ui-widget textarea,

.ui-widget button,

.ui-widget {

font-size: inherit;

line-height: inherit;

font-family: inherit;

}

As SystemTheme.css is one of the basic configuration files for Lycia, we do not recommend you to change this file unless you have a considerable experience of such modifications.

Otherwise, we cannot ensure proper runtime look and behavior of your applications.

If you need or wish to change the system css file, you can follow this algorithm:

In this case, you will be able to use the new system css file according to your development and production needs AND will still keep the original SystemTheme.css file as a backup (and will be able to easily return to it if necessary).

If you have several projects and want them to have a certain look or if you want your applications look different when run with different AppServer instances, you can follow this algorithm:

To get more details, you can go here to read about using styles (.css) in Lycia.

element	property
qx-application	font-size, font-family
.qx-aum.qx-aum-<widget>	padding, background-image, color
qx-aum.qx-c-attribute_<>	text-decoration, font-weight, color, background-color
qx-<>-bar	height
qx-aum-<>-bar	padding-top, padding-bottom
qx-aum-<widget>	border, height
etc.

1	Create a new application server instance, e.g., eu_secure
2	Create a new inet.env file and specify this new inet.env file in the new application instance in listener.xml: <name>eu_secure</name> ... <envfile>C:\ProgramData\Querix\Lycia\eu\etc\eu_inet.env</envfile>
3	Copy the SystemTheme.css file with a new name, e.g., eu_system_css.css
4	Change and save this new system css file - eu_system_css.css
5	Specify the new system theme file and its location as the value for LYCIA_SYSTEM_THEME_QX in the new inet.env file: LYCIA_SYSTEM_THEME_CSS=C:\Users\my_user\lycia\eu\system_files\eu_system_css.css