Disclaimer

©2024 Deutsche Boerse AG - All rights reserved. The information contained in this document is confidential or protected by law. Any unauthorized copying of this document or part of it or unauthorized distribution of the information contained herein is prohibited. All materials provided by DB in this context are and remain the intellectual property of DB and all rights therein are reserved.

Abbreviations

1 Introduction

1.1 About this Document

This document contains a description of the process to change the colour theme used in ComTrader which is provided by Deutsche Börse AG (DBAG). It is intended as a manual for customers who are interested in modifying the resource file. Together with this document, DBAG also provides a resource CSS file which can be modified to the desired appearance and subsequently sent back to DBAG, who will integrate it into the standard ComTrader configuration.

2 Resource file

To change the ComTrader colour theme the provided resource file needs to be modified. The resource file is a Cascading Style Sheets (CSS) document encoded in UTF-8 (the presence of a byte order mark (BOM) is not supported) with only two columns separated by an equals sign (i.e. =) separator. The first column contains the resource keys used in ComTrader (these resource keys must remain unchanged). The second column contains resource values which relate to the corresponding resource keys in the first column (these resource values can be changed). The resource keys are also separated into groups according to their general expression (e.g. table-view, diagram, contractTreeContainer, buy, sell, etc.), which influence the specific area in ComTrader. Unique resource keys are included in “Other expressions”, see section Other Expressions.

The mark sign /* denotes the start of an informative note text block which only has an informative purpose. The end of this text block is determined by the */ mark sign. Notes can be arbitrarily added to the resource file. Blank lines in the file have no meaning. Notes and blank lines are skipped by the resource parser.

Note that:

• New resource keys and resource values shouldn’t be created, and existing ones must not be deleted.

• Pictures are provided only for illustrative purposes of the possible impact that resource keys can have on ComTrader.

The following picture describes the content of provided resource style file. The resource values in the second column can be changed.

The following sections describe the functionality of the resource keys contained in the particular general expression group as well as unique resource keys.

2.1 General expressions

Several resource keys which are related to the particular area are grouped according to their general expression. For example, the general expression modal-dialog contains three modal-dialog resource keys (modal-dialog-background-color, modal-dialog-text-color and modal-dialog-background-color-abnormal-order). Specific colours or images can be assigned to the resource key. The assigned colour can be written in several formats which are treated similarly by the resource parser:

• Colour name: modal-dialog-background-color: yellow

• Hex code: modal-dialog-background-color: #ffff00

• RGB: modal-dialog-background-color: rgb(255,255,0)

• For more formats please refer to the paint section of the JavaFX CSS Reference Guide¹.

The impact of the changes in the assigned resource values are described in the following sections.

2.1.1 base

The visual appearance of the Settings window can be modified using the base resource values.

• base-background-color defines the background colour of Market Overview, Market Details panels. Background changes the colour behind tabs in the Settings and Trading windows, as well as the pane split colour in the Trading window.

The colour of highlighted area in the picture above can be changed using the listed resource key with the same highlighted colour.

2.1.2 secondary-window

The visual appearance of the Settings window can be modified using the secondary-window resource values.

• secondary-window-background-color defines the background colour of the Settings window. In addition, the background colour of the trade detail popup windows (e.g. Process and Trade Cancellation Confirmation) is defined.

The following picture portrays the original appearance of the Settings window with the possible changes using secondary-window resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource key with the same highlighted colour.

2.1.3 flash-effect

A blinking effect which is based on market changes can be performed whenever ComTrader receives an update of some data from the back-end. This action can trigger the blinking behaviour if it is supported by the corresponding panel which receives the updated data. The blinking behaviour is supported for the Market Overview, Market Details, Order Book Details and Message panels for example. The colour of the blinking behaviour can be modified using flash-effect resource value.

• flash-color defines the background colour of a highlighted cell or row when new information is received (e.g. if the new order is created, the new row is added and highlighted in the Message panel). The colour of the highlight is defined in the General tab of the Settings window.

2.1.4 table-view

The visual appearance of all tables can be modified using the table-view resource values.

• table-view-cell-text-color defines the text colour in all panels (except for the own orders (for more details please refer to the section Orderbook), except for the On Behalf panel, Order Entry panels, Settings and About windows. This resource key also defines the text colour of the Order Validations in the Settings window, text colour in the trade detail popup windows, text colour in the Panel List and the text colour in the Description column of the Bottom Toolbar Settings window.
  
• table-view-cell-hibernate-text-color defines the colour of hibernated (deactivated) orders in the OTC and Own Order panels.
  
• table-view-header-text-color defines the text colour of the table headers in all panels including Order Validations and Order Preferences headers in the Settings window, Panel list, but excluding the About window’s header.
  
• table-view-header-background-color defines the background colour of the table headers as mentioned in the table-view-header-text-color. In addition, the About window’s header is filled.
  
• table-view-odd-cell-background-color defines the background colour of odd rows in the same occurrences as defined by table-view-cell-text-color.
  
• table-view-even-cell-background-color defines the background colour of even rows in the same occurrences as defined by table-view-cell-text-color.
  
• table-view-row-selected-background-color defines the background colour of selected and hovered rows in all tables, as well as in the Order Validations table in the Settings window. The Panel List and About window are also affected. Note that hovered row or cell is lighter if compared to the selected one.
  
• table-view-background-color defines the background colour for all panels (behind the panel content, if any included) including Chart, Own Order panels, etc.

The following picture describes the original appearance of the Trading window along with the possible changes using table-view resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.5 diagram

The visual appearance of the Chart panel can be modified using the diagram resource values.

• diagram-background-color defines the background colour behind the chart area (behind the axis labels and values) in the Chart panel.

• diagram-column-even-background-color defines the background colour of the even rows in the chart.

• diagram-column-odd-background-color defines the background colour of the odd rows in the chart.

• diagram-axis-label-color defines the colour of the x and y labels and names.

• diagram-grid-color defines the colour of the chart’s grid.

• diagram-line-color defines the colour of the series line and opening price points.

• diagram-bar-color defines the colour of the bars.

The following picture describes the original appearance of the Chart panel with possible changes using the diagram resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.6 dark-panel

The visual appearance of the Slide in toolbars, footers, and buttons can be modified using the dark-panel resource values.

• toolbar-background-color defines the background colour of the Slide in toolbars providing the import and export functionality.
  
• dark-panel-text-color defines the text colour in the Settings window, as well as the text colour of the menu’s labels (in the Trading and Login windows). This resource key also defines the text colour as well as the border colour of the panic buttons and the exchange selector. The text colour and borders in all footers are also defined including the buttons in the modal windows. The text colour in the slide-in toolbars is also defined. The colour of the triangle (extend), crosses (remove contract), plus - column picker are defined. The instruments panel header text colour is also affected. The plus and mail icons in the Trading window footer are coloured. The components in the Bottom Toolbar Settings window are coloured as well as the corresponding footer with the buttons. All text in the Settings and About panel, and On Behalf panel text.
  
• In addition, the colour of the following icons is defined: buy and sell arrow right, sell arrow left, arrow down, info circle, question circle (included in modal windows), lock sign (deactivate, hibernate), modify button (pencil), trash icon, accept button, plus and minus buttons, cart icon, export and import buttons, left/right triangles in left side of panels, check button (OK), play button (sound), search button, filter button, buttons step up/down, narrow/widen buttons, expand/collapse buttons, bull horn icon, pause icon, check button, select all/none icons.
  
• dark-panel-validation-error-field-background-color defines the background colour of any validation error for Contract, Quantity and Price fields in Order entry panel. Also, Product, Contract, Quantity, Price, Member, Trader, Trading Account. In addition, exclamation mark button colour in order entry panel is affected.
  
• dark-panel-validation-warning-field-background-color defines the background colour of the Contract field if an inactive contract is selected in (Floating) Order Entry Panel.
  
• dark-panel-value-active-field-background-color defines the background colour of the on behalf member as well as the trader fields included in the On Behalf panel when set button is clicked. The colour of the check icon in the Login panel is also defined.
  
• dark-panel-button-border-color defines the border colour of checkboxes, selection fields, text boxes in all panels (excluding Order Entry panel).
  
• dark-panel-button-background-color defines the background colour of menus in the Trading and Login windows (including drop down items). The background colour of tables’ headers, The background colour of text in modal windows including the Trade Cancellation Confirmation window.
  
• Background color of labels (environment in the Login window, right down status in the Trading window, hint in Design Mode and Column Selection panels, About Panel, also labels of fields in Order Entry panel), check boxes, text fields, selection boxes and buttons (including extend all, magnifier, etc.) is defined.
  
• dark-panel-button-hover-color defines the background colour of buttons (footers, slide in, etc.) when hovering with mouse in the Trading and Settings windows except for the Order Entry panel buttons.
  
• dark-panel-button-pressed-color defines the background colour of buttons (footers, slide in, etc.) when they are clicked with a mouse in the Trading and Settings windows except for the Except Order Entry panel buttons.
  

The following picture describes the original appearance of the Trading window with possible changes using the dark-panel resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.7 contractTreeContainer

The visual appearance of the Instrument selection panel can be modified using the contractTreeContainer resource values.

• contractTreeContainer-button defines the background colour of the instrument navigator slider of the left part of each relevant panel (e.g. Market Overview).
  
• contractTreeContainer-button-hover defines the background colour of the instrument navigator slider of the left part of each relevant panel when mouse hovered (e.g. Market Overview).
  
• contractTreeContainer-text-color defines the text colour of products and contracts in the instrument selection rollout panels. In addition, the search field is coloured as well as the product/contract switcher.
  
• contract-tree-pane-background-color defines the background colour in the instrument selection rollout panels.

The following picture describes the original appearance of the Trading window along with the possible changes using contractTreeContainer resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.8 buy

The visual appearance of the Order Entry panel’s buy side can be modified using the buy resource values.

• buy-background-color defines the background colour of the (floating) Order Entry, Trade Cancellation ' buy side. In addition, the background colour of the Side switcher in the Order Entry panel which is shown whilst being hovered over by mouse is also defined. In addition, the background colour of the buy cells in the B/S column of the Own Order, Own Trade, Basket and OTC panels are defined.
  
• buy-button-hover-background defines the background colour of buttons in the buy side of the (Floating) Order entry panel whilst being hovered over with the mouse.

The following picture describes the original appearance of the Floating Order Entry panel (Buy side) along with the possible changes using the buy resource values.

The colour of highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.9 sell

The visual appearance of the Order Entry panel’s sell side can be modified using the sell resource values.

• sell-background-color defines the background colour of the (floating) Order entry, Trade Cancellation ' sell side. In addition, the background colour of the Side switcher in the Order Entry panel when it is hovered over by mouse can also be defined. In addition, the background colour of the sell cells in the B/S column of the Own Order, Own Trade, Basket and OTC panels can be defined.
  
• sell-button-hover-background defines the background colour of buttons in sell side of the (Floating) Order entry panel whilst hovering over it with the mouse.

The following picture describes the original appearance of the Floating Order Entry (Sell side) panel along with the possible changes using the sell resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.10 extended-orderbook

The visual appearance of the (Floating) Order Book Details and Market Details panels can be modified using extended-orderbook resource values.

• extended-orderbook-header-background-color defines the background colour of the contract header in the (Floating) Order Book and Market Details panels.
  
• extended-orderbook-header-text-color defines the text colour of the contract header in the (Floating) Order Book and Market Details panel.
  
• extended-orderbook-table-buy-odd-cell-background-color defines the odd rows background colour for the buy side of the (Floating) Order Book Details and Market Details panels.
  
• extended-orderbook-contract-tomorrow-text-color defines the text colour of tomorrow’s contract in the Market Details and Market Overview panels.
  
• extended-orderbook-table-buy-even-cell-background-color defines the even rows background colour for the buy side of the (Floating) Order Book Details and Market Details panels.
  
• extended-orderbook-table-buy-cell-text-color defines the text colour of the buy side tables for the (Floating) Order Book Details and Market Details panels.
  
• extended-orderbook-table-sell-odd-cell-background-color defines the odd rows background colour of the buy side tables for the (Floating) Order Book Details and Market Details panels.
  
• extended-orderbook-table-sell-even-cell-background-color defines the even rows background colour of the buy side tables for the (Floating) Order Book Details and Market Details panels.
  
• extended-orderbook-table-sell-cell-text-color defines the text colour of the sell side tables for the (Floating) Order Book Details and Market Details panels.
  
• extended-orderbook-tables-container-background-color defines the background colour of the Market Details panel's pane split. In addition, the resource key defines the background colour behind the table in the Order Book Details panel.

The following picture describes the original appearance of the Floating Order Book Details and Market Details panels with the possible changes using the extended-orderbook resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.11 orderbook

The visual appearance of the (Floating) Order Book Details, Market Details and Market Overview panels can be modified using the orderbook resource keys.

• orderbook-table-own-usr-order-text-color defines the text colour of the trader's own orders in the Market Overview, Market Details and (Floating) Order Book Details panels.
  
• orderbook-table-own-mbr-order-text-color defines the text colour of the member's own orders in the Market Overview, Market Details and (Floating) Order Book Details panels.
  
• orderbook-table-icb-order-background-color defines the background colour of the rows related to iceberg orders in the Admin Market Details panel (note that even the rows are lighter).
  
• orderbook-table-bal-order-text-color defines the text colour of the balancing orders in the Market Overview, Market Details and (Floating) Order Book Details panels.
  
• orderbook-table-last-price-equal-text-color defines the colour of the arrow when the last price is equal in the LPrc column, which is included in the Market Overview Panel. The text colour when the last price is equal to the LPrc information is included in the headers of (Floating) the Order Book Details and Market Details panel.
  
• orderbook-table-last-price-down-text-color defines the text colour when the last price is “lower” in the LPrc column included in the Market Overview Panel. The text colour of the LPrc when lower is included in the headers of (Floating) Order Book Details and the Market Details panel is also defined.
  
• orderbook-table-last-price-up-text-color defines the text colour when the last price is higher in the LPrc column which is included on the Market Overview Panel. The text colour of LPrc when higher is included in the headers of the (Floating) Order Book Details and Market Details panel.
  
• orderbook-table-light-cell defines the background colour of cells in the Market Overview panel related to a particular order (e.g. BTQTY, BAcc, OIBid, BIQty, BCHs, OBid, BQty, BVWA, Bid, or Ask, AVWA, AQty, OAsk, ACHs, AIQty, OIAsk, AAcc, ATQty) except LPrc, LQty, TQty, TOBQty, TOSQty, AOBPrc, AOSPrc, CPrc, AucPrc and Surplus columns.

2.1.12 main-panel

The visual appearance of the Status-bar can be modified using main-panel resource values.

• main-panel-status-bar-color defines the background colour of the Trading window bottom bar.
  
• main-panel-status-bar-text-color defines the text colour of the Trading window bottom bar information except for the "Market" label.

The following picture describes the original appearance of the Status-bar with the possible changes using the main-panel resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.13 menu-bar

The visual appearance of the panels’ headers in the trading window can be modified using the menu-bar resource values.

• menu-bar-background-color defines the background colour of all of the panels’ headers in the Trading window.
  
• menu-bar-text-color defines the text colour of all of the panels’ headers in the Trading window

The following picture describes the original appearance of the Trading window with the possible changes using the menu-bar resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.14 modal-dialog

The visual appearance of the modal windows can be modified using the modal-dialog resource values.

• modal-dialog-background-color defines the background colour of all modal windows (including the high visibility popup windows which can be coloured independently).
  
• modal-dialog-text-color defines the colour of the text in all of the modal windows including the text colours of related buttons.
  
• modal-dialog-background-color-abnormal-order defines the background colour of the high visibility popup window - i.e. the "Order validation Warning!" window which is shown if the created order doesn't meet the Order Validations criteria.

The following picture describes the original appearance of the “Deactivate All” Modal window with all of the possible changes using the modal-dialog resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.15 slide-down-pane

The visual appearance of the Slider in the toolbars can be modified using the slide-down-pane resource values.

• slide-down-pane-section-border-color defines the colour of the line separators of the slider in the toolbars.

The following picture describes the original appearance of the Slider in the toolbars, along with the possible changes using the slide-down-pane resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource key with the same highlighted colour.

2.1.16 order-entry

The visual appearance of the (Floating) Order Entry panel can be modified using the order-entry resource values.

• order-entry-label-color defines the text colour of the labels included in the (Floating) Order Entry panel. In addition, the background colours of all of the text fields, selection boxes for these panels are coloured.
  
• order-entry-button-hover-color The colour of the text, text boxes and selection boxes defines the text colour of the labels included in the (Floating) Order Entry panel.

The following picture describes the original appearance of the floating Order Entry panel along with the possible changes using the order-entry resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.17 panel

The visual appearance of the bottom bars related to all of the panels can be modified using the panel resource values.

• panel-bottom-control-background-color defines the background colour of all of the panel’s bottom bars, including the panel list and the Settings and About windows.
  
• panel-top-control-background-color defines the background colour of the Top Menu (General, Profile, etc.) included in the Trading and Login windows.

The following picture describes the original appearance of the Trading window along with the possible changes using the panel resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.1.18 login

The visual appearance of the Login window can be modified using the login resource values.

• login-background-color defines the background colour of the Login window except the User and Password area.
  
• login-text-background-color defines the background colour of the User and Password area in the Login window.

The following picture describes the original appearance of the Login window along with the possible changes using the login resource values.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

2.2 Other expressions

The visual appearance of ComTrader can be modified by the following resource keys which are dedicated for only one purpose.

• base-text-color defines the text colour of the dropdown menus in the Trading and Login windows. The text colour of the trading boards in Trading Window and text in the Login window is also defined using the same attribute. It also defines the text colour of the exchange tab in the Instruments panel, as well as the text colour of the tabs in the Settings window. The text colour of the Trading phases, Messages priority and types, Contract states icons are also affected.
  
• error-label-text-color defines the colour of orders containing errors in the Basket panel.
  
• clockpanel-market-halt-background-color defines the background colour of the bottom bar information section if the market is halted.

The following picture describes the original appearance of the Trading window along with the possible changes using the above-mentioned resource keys.

The colour of the highlighted area in the picture above can be changed using the listed resource keys with the same highlighted colour.

3 Loading the resource file to ComTrader

The colour theme used in ComTrader can be chosen in the ComTrader settings menu. The settings menu can be opened by selecting the option “Settings” from the “General” menu of the Trading or Login windows (after a user is logged in). All settings are stored on a profile server.

The following picture describes the first tab of the ComTrader Settings window.

The first “General” tab contains several options including the field “Colour theme”, which allows you to change the colour theme in the GUI. If the required colour theme is not included in this field, the user can click on the “Load Custom Theme” label. This action opens a file selection window for selecting the desired modified resource file with the suffix *.css. This underlying resource file has to be the UTF-8 text document (presence of BOM is not supported).

After the modified resource file (see Resource file chapter) is loaded, the “Colour theme” field is automatically changed to the filename of the corresponding loaded resource file. When the “Ok” button is clicked, the custom theme is used, and the user profile is saved. When the “Apply” button is clicked, the change is applied without closing the settings window.

Note that the presence of Load Custom Theme option is limited to testing/development purposes and depends on the specific environment.