Cascading Style Sheet Syntax

Bitmap

DOM structure

<div id="img_cnt_851" class="ui-control" style="...">
    <div id="img_851" class="ui-bitmap" style="">
        <img src="/media/image?img=...">
    </div>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-bitmap	The image element

CSS selector samples

.ui-bitmap img:hover {
	/* changing mouse cursor shape on mouse over */
	cursor: zoom-in;
}

Check-Box

Back to list

DOM structure

<div id="check_cnt_757" class="ui-control" style="..." tabindex="0">
    <div id="check_757" class="ui-control-checkbox" style="...">
        <div class="ui-control-check"><div></div></div>
        <legend style="...">...</legend>
    </div>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-checkbox	The radio-button element
ui-control-check	The radio-button bullseye
ui-control-left-text	Applied to the main element when left-text style is set
ui-control-checkbox-win32native	Applied to the check-box when WIN32_NATIVECTLS is set to true
ui-control-checkbox-flat	Applied to the radio-button element when flat style is set
checked	Applied to the div.ui-control-check when the check-box is checked

CSS selector samples

.ui-control-checkbox legend {
	/* adds a simple shadow to the check-box text */
	text-shadow: 2px 2px #ccc;
}

.ui-control-checkbox .checked {
	/* change the check mark border when is selected */
	border-color: #ff0000 !important;
	border-style: solid !important;
}

Combo-Box

Back to list

DOM structure

<div id="combo_cnt_754" class="ui-control" style="...">
    <div id="combo_754" class="dom-combobox" style="...">
        <div class="dom-combobox-container" style="...">
            <input type="text" class="dom-selector" readonly="readonly">
            <a class="dom-combobox-button">
                <span class="ui-icon"></span>
            </a>
        </div>
    </div>
</div>
...
<div class="dom-combobox dom-elems-container" style="...">...</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-combobox-win32native	Applied to the element when WIN32_NATIVECTLS is set to true
ui-combobox-flat	Applied to the main element when the flat style is set
dom-combobox	The combo-box element (main container)
dom-combobox-container	A div wrapping the input field and the combo-box button
dom-selector	The combo-box input field
dom-combobox-button	The combo-box button
dom-elems-container	The combo-box list (created on open)

CSS selector samples

.dom-combobox-container input {
    /* changing default foreground color */
    color: red;
}

.dom-combobox-button span {
    /* changing button icon */
    background-image: url(...);
}

.dom-elems-container {
    /* changing the border and the background color of the combobox items list */
    background-color: #fafafa;
    border: 1px solid #ccc;
}

Date-Entry

Back to list

DOM structure

<div id="dateentry_cnt_752" class="ui-control" style="...">
    <input id="dateentry_752_tvs" type="text" class="is-calendarsPicker">
    <input id="dateentry_752_noneCheck" type="checkbox" checked="">
    <select id="dateentry_752_cal" class="ui-control-staticselect"></select>
</div>

CSS class list

ui-control	Parent div wrapping the component
is-calendarsPicker	The date-entry input element
select	Used as date-entry button

CSS selector samples

.ui-control .is-calendarsPicker {
    color: #333;
    border: 0;
    border-bottom: 5px solid #444;
    padding-bottom: 3px;
    box-sizing: content-box !important;
}

Entry-Field

Back to list

DOM structure

<div id="txt_cnt_843" class="ui-control" style="...">
    <input id="txt_843" class="ui-control-textfield" type="..." >
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-textfield	The input element

CSS selector samples

.ui-control-textfield[type=password] {
    /* cool password field */
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAPCAQAAACCCB01AAAAV0lEQVQIW2NgYDg74ex/MJzAAOU0nHUA0xMYIOJA7gIQC8KFQwzuASTuAoazAmc/QDkXzgqAzBaAKoQBoDgKF2IJlCNwtgCVi1/xAyD3AUI2AGh3AYgFAImLeCPFitxPAAAAAElFTkSuQmCC) 12px 50% no-repeat, linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);
    border-radius: 3px;
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
    transition: all 0.2s linear;
    color: #222222;
}
.ui-control-textfield[type=password]:focus {
    /* on focus effect */
    box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
    outline: none;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAPCAQAAACCCB01AAAAV0lEQVQIW2NgYDg74ex/MJzAAOU0nHUA0xMYIOJA7gIQC8KFQwzuASTuAoazAmc/QDkXzgqAzBaAKoQBoDgKF2IJlCNwtgCVi1/xAyD3AUI2AGh3AYgFAImLeCPFitxPAAAAAElFTkSuQmCC) 12px 50% no-repeat, #FFF;
}

Frame

Back to list

DOM structure

<div id="frame_cnt_761" class="ui-control" style="...">
    <div class="ui-control-frame" style="...">
        <div class="ui-control-frame-legend">...</div>
    </div>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-frame	The frame element (the box)
ui-control-frame-legend	The frame title element

CSS selector samples

.ui-control-frame {
	/* forcing a global frame border */
	border: 1px dashed red !important;
}

.ui-control-frame-legend {
	/* adds a simple shadow to the frame title */
	text-shadow: 2px 2px #ccc;
}

Grid

Back to list

DOM structure

<div id="grid_cnt_754" class="ui-control">
    <div id="grid_754_container" class="ui-grid-container">
        <table id="grid_754" class="ui-grid">
            <colgroup>...</colgroup>
            <tbody>
                <tr>
                    <td style="..." class="ui-grid-headers ui-grid-row-headers">
                        <div class="ui-grid-celltext">...</div>
                        <span class="ui-grid-bitmap"></span>
                    </td>
                    ...
                </tr>
                ...
            </tbody>
        </table>
        <div class="ui-grid-cursor" style="..."></div>
        ...
        scrollbars (vertical + horizontal)
        ...
        <div id="grid_754_pager" class="ui-grid-pager">
          <div><input class="ui-control-button ui-paged-prev" type="button"></div>
          <div><input class="ui-control-button ui-paged-pgprev" type="button"></div>
          <div><input class="ui-control-button ui-paged-pgnext" type="button"></div>
          <div><input class="ui-control-button ui-paged-next" type="button"></div>
        </div>
    </div>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-grid-container	Grid component container
ui-grid	Grid component
ui-grid-headers	Applied to the headers cells
ui-grid-row-headers	Applied to the row headings cells
ui-grid-col-headers	Applied to the column headings cells
ui-grid-celltext	Wraps the cell text
ui-grid-bitmap	Cell bitmap (if any)
ui-grid-cursor	Grid cursor frame
ui-grid-cursor-color	Applied to the selected cell
ui-grid-pager	Grid pager (paged style)
ui-paged-first ui-paged-last ui-paged-prev ui-paged-next	Grid pager buttons

CSS selector samples

.ui-grid-cursor {
    /* changes cursor frame color */
    background-color: green;
}

.ui-grid-headers {
    /* adds a simple shadow to the headers */
    text-shadow: 2px 2px #ccc;
}

.ui-grid-pager .ui-paged-next {
    /* changes the icon of the next button */
    background-image: url(...);
}

Label

Back to list

DOM structure

<div id="label_cnt_849" class="ui-control" style="...">
    <div id="label_849" class="ui-control-label" style="...">...</div>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-label	The label element

CSS selector samples

.ui-control-label {
	/* adds a simple shadow to the text */
	text-shadow: 2px 2px #ccc;
}

List-Box

DOM structure

<div id="list_cnt_749" class="ui-control">
    <div id="list_749" class="ui-control-listbox">
        <table>
            <colgroup>...</colgroup>
            <tbody>
                <tr>
                  <td>...</td>
                </tr>
                <tr class="listbox-selected">
                  <td>...</td>
                </tr>
                ...
            </tbody>
        </table>
    </div>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-listbox	List-box component
ui-control-listbox tr	List-box rows
ui-control-listbox tr.listbox-selected	Selected row
ui-control-listbox-win32native	Applied to the element when WIN32_NATIVECTLS is set to true
ui-paged-first ui-paged-last ui-paged-prev ui-paged-next	Paged list-box buttons

CSS selector samples

.ui-control-listbox tr.listbox-selected {
    /* changes selection color */
    background-color: red;
}

.ui-paged-next {
    /* changes the icon of the next button */
    background-image: url(...);
}

ui-winbase	Generic container used for the windows
ui-control-menubar	Menu-bar component
ui-control-context-menu	Popup menu component
ui-control-menuitem	Generic menu-item
ui-control-menuarrow	Sub-menu arrow
ui-control-menucheck	Menu item check mark
separator	Menu separator item
ui-control-context-menu-li-hovered	Class applied on mouse over
ui-control-context-menu-li-pressed	Class applied on item click
ui-control-main-menu-li-hovered	Class applied on mouse over

CSS selector samples

.ui-control-menubar,
.ui-control-menuitem {
    /* forcing white background */
    background-color: white !important;
    border-color: white !important;
}

Push-Button

Back to list

DOM structure

<div id="button_cnt_822" class="ui-control" style="...">
    <button id="button_822" type="button" class="ui-control-button">...</button>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-button	The button element
ui-control-button-default	Applied to the button element when default-button style is set
ui-control-button-disabled	Applied to the button element when disabled
ui-button-win32native	Applied to the button when WIN32_NATIVECTLS is set to true
ui-button-link	Applied to the button element when islink style is set
ui-button-flat	Applied to the button element when flat style is set

CSS selector samples

.ui-control-button {
	/* buttons with rounded corners */
	border-radius: 5px;
}

button.ui-control-button-disabled {
	/* nearly transparent button when disabled */
	opacity: 0.3;
}

Radio-Button

Back to list

DOM structure

<div id="radio_cnt_937" class="ui-control" style="..." tabindex="0">
    <div id="radio_937" class="ui-control-radiobutton" data-group="..." style="...">
        <div class="ui-control-bull"><div></div></div>
        <legend style="...">...</legend>
    </div>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-radiobutton	The radio-button element
ui-control-bull	The radio-button bullseye
ui-control-left-text	Applied to the main element when left-text style is set
ui-control-radiobutton-win32native	Applied to the radio-button when WIN32_NATIVECTLS is set to true
ui-button-flat	Applied to the radio-button element when flat style is set
checked	Applied to the div.ui-control-bull when the radio-button is checked

CSS selector samples

.ui-control-radiobutton legend {
	/* adds a simple shadow to the radio-button text */
	text-shadow: 2px 2px #ccc;
}

.ui-control-radiobutton .checked {
	/* change the radio bullseye border when is selected */
	border-color: #ff0000 !important;
	border-style: solid !important;
}

Scroll-Bar

Back to list

DOM structure

<div class="dom-scrollbar ui-widget-content v-scrollbar s-hasButtons">
    <button class="dom-scrollbar-button dom-scrollbar-up_btn" href="#"></button>
    <div class="dom-scrollbar-cnt">
        <div class="dom-scrollbar-header">
            <div class="dom-scrollbar-pager" style="..."></div>
        </div>
    </div>
    <button class="dom-scrollbar-button dom-scrollbar-down_btn" href="#"></button>
</div>

CSS class list

dom-scrollbar	Parent div wrapping the component
dom-scrollbar-button	Scroll-bar buttons
dom-scrollbar-cnt	Scroll-bar pager container
dom-scrollbar-pager	Scroll-bar pager

CSS selector samples

/* modern scrollbar */

.dom-scrollbar-header {
    padding: 3px;
    background-color: transparent;
}

.dom-scrollbar-pager {
    border-radius: 5px;
}

.dom-scrollbar-cnt {
    background-color: #555;
}

Status-Bar

Back to list

DOM structure

<div id="sbar_cnt_878" class="ui-control">
    <ul id="sbar_878" class="ui-control-statusbar">
        <li style="..."></li>
        <li style="..."></li>
        ...
    </ul>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-statusbar	The statusbar component
ui-control-statusbar-win32native	Applied to the element when WIN32_NATIVECTLS is set to true
ui-control-statusbar > li	Statusbar panels

CSS selector samples

.ui-control-statusbar > li {
    /* removing border from panels */
    border: 0 !important;
    color: #333;
}

.ui-control-statusbar {
    /* adding a gradient and a border to the statusbar*/
    background: linear-gradient(#ddd, #fff);
    border-top: 1px solid #bbb;
}

Tab-Control

Back to list

DOM structure

<div id="tab_cnt_950" class="ui-control">
    <div id="tab_950" class="ui-control-tabs">
        <ul>
            <li class="tab-selected">...</li>
            <li>...</li>
            ...
        </ul>
    </div>
    <div class="ui-tab-scroller">
        <div class="ui-tab-scroller-prev"></div>
        <div class="ui-tab-scroller-next"></div>
    </div>
    <div id="tab_950_page" class="ui-control-tab-page"></div>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-tabs	Tabs container
ui-control-tabs-win32native	Applied to the element when WIN32_NATIVECTLS is set to true
ui-control-tabs li	Tabs
ui-control-tabs li.tab-selected	Current Tab
ui-tab-scroller	Tabs pager (scroll facility)
ui-control-tab-page	Tab page/body
ui-control-tabs-bottom	Applied to the main element when bottom style is set
ui-control-tabs-vertical	Applied to the main element when vertical style is set
tabs-rounded-label	Applied to the tabs when rounded style is set

CSS selector samples

.ui-control-tabs li.tab-selected {
    /* change foreground color of the selected tab */
    color: red;
}

Tree-View

Back to list

DOM structure

 <div id="tree_cnt_880" class="ui-control">
    <div id="tree_880" class="ui-treeview">
        <div class="ui-treeview-root ui-treeview-item-expanded">
            <div class="ui-treeview-children">
                <div class="ui-treeview-item ui-treeview-item-expanded">
                    <div class="ui-treeview-item-text">...</div>
                    <div class="ui-treeview-children">
                       ...
                    </div>
                </div>
                ...
            </div>
        </div>
    </div>
</div>

DIV.UI-TREEVIEW-ITEM-TEXT structure

<div class="ui-treeview-item-text">
    <span class="ui-treeview-button"></span>
    <span class="ui-treeview-text">
        <span class="ui-treeview-icon">...</span>
        <span class="ui-treeview-txt">...</span>
    </span>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-treeview	Tree-view component
ui-treeview-root	Hidden root node
ui-treeview-children	Children container
ui-treeview-item	Tree-view node container (node + children)
ui-treeview-item-text	Tree-view node
ui-treeview-item-expanded	Added when the tree-view node is expanded
ui-treeview-styles-buttons	Applied to the tree-view when buttons style is set
ui-treeview-styles-showlines	Applied to the tree-view when show-lines style is set
ui-treeview-styles-linesatroot	Applied to the tree-view when lines-at-root style is set
ui-treeview-button	Expand/collapse button
ui-treeview-text	Tree-view node label (icon + text)
ui-treeview-icon	Tree-view node icon
ui-treeview-txt	Tree-view node text

CSS selector samples

.ui-treeview-styles-buttons .ui-treeview-button {
    /* changes image strip used for the treeview items button */
    background-image: url(...);
}

.ui-treeview-item-text {
    /* removes items indentation */
    padding-left: 25px !important;
}

Web-Browser

Back to list

DOM structure

<div id="web_cnt_752" class="ui-control">
    <iframe id="web_752" class="ui-control-browser" style="..." src="..."></iframe>
</div>

CSS class list

ui-control	Parent div wrapping the component
ui-control-browser	The iframe element

CSS selector samples

.ui-control-browser {
	/* removing the border */
	border: 0;
}

Window

Back to list

DOM structure

<div id="window_818_cnt" class="ui-cblwindow">
    <div id="window_818_title" class="ui-wintitle">
        <span class="ui-wintitle-text">...</span>
        <span class="ui-winbtn ui-winbtn-close"></span>
    </div>
    <div id="window_818_menu" class="ui-winbase">
    ...
    </div>
    <div id="window_818_tool" class="ui-winbase">
    ...
    </div>
    <div id="window_818" class="ui-winbase">
       <table id="window_818_term_layer" class="ui-terminal-layer" style="...">
          <tbody>
              <tr>
                  <td style="...">&nbsp;</td>
              </tr>
          </tbody>
       </table>
       ...
    </div>
</div>

CSS class list

ui-winbase	Generic container used for the windows
ui-cblwindow	Window component
ui-wintitle	Window title bar
ui-wintitle-text	Wraps title bar text
ui-winbtn	Window title bar buttons
ui-cblwindow-active	Applied on the active window
ui-terminal-layer	Terminal layer

CSS selector samples

.ui-cblwindow .ui-wintitle {
    /* gradient on title bar */
    background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
    color: #04509C;
}

.ui-cblwindow {
    /* window with rounded corner */
    border-radius: 5px; 
}
table.ui-terminal-layer td{
    /* background transparent on all terminal*/
    background-color: transparent !important;
}

Cascading Style Sheet Syntax

Bitmap

Check-Box

Combo-Box

Date-Entry

Entry-Field

Frame

Grid

Label

List-Box

Menu

Push-Button

Radio-Button

Scroll-Bar

Status-Bar

Tab-Control

Tree-View

Web-Browser

Window