Below you can see a detailed list of css elements you can select and customize. That way you can very easily change a complete visual style of your Belladati domain.
See the whitelabeling tutorial here.
TOPBAR
| Navigation topbar: | .topbar |
|---|---|
| Topbar menu links + icons: | .topbar ul li a |
| Search input: | .topbar form input |
| Search input typed text: | form#quickSearchForm .txt |
| Search icon: | #quickSearchForm .icon-search:before |
| Search vertical line: | .icon-search-position-fix (border-right: 1px solid #fff; ) |
BODY CONTENT
Be careful when modifying the global css styles, it could result in unexpected visual modifications throughout the entire application.
| Body: | body.desktop |
|---|---|
| Dashboard dashlets title header: | .dashletHeader |
| Other links: | a |
LEFT SIDEBAR
| Sidebar body: | .sidebarBlock |
|---|---|
| Sidebar title: | .sidebarBlock h3 |
| Sidebar link: | .sidebarBlock a |
RIGHT SIDEBAR - HISTORY, FILTERS & VARIABLES
| Sidebar body: | .setupPanel, .sidePanelPadding |
|---|---|
| Sidebar body content: | #reportView .setupPanel, #reportView .sharingPanel, #reportView .historyPanel |
| Icon colors: | .icon-info:before, .icon-search:before, .icon-calendar:before, .icon-attribute-date:before |
| Other icons “i”: | #reportView .setupPanel i, #reportView .sharingPanel i, #reportView .historyPanel i |
| Button colors: | .btn.primary, .btn |
| Sidebar links: | #reportView .setupPanel a, #reportView .sharingPanel a, #reportView .historyPanel a |
REPORTS
| Report title (without top banner): | .top_header_no_topbar h2 |
|---|---|
| Report title (with top banner): | .topbar_bg_title |
| Report title icon (without top banner): | #contentColumn h2 [class^="icon-"]:before, h2 [class*=" icon-"]:before, #content h2 [class^="icon-"]:before, h2 [class*=" icon-"]:before |
| Report title icon (with top banner) | .topbar_bg_out [class^="icon-"]:before, .topbar_bg_out [class*=" icon-"]:before |
| Report top control buttons: | #reportPanelActions .btn |
| Report top control buttons pop-up menu: | #reportPopupMenu, #reportPopupMenu a |
| Report view control buttons: | .editViewMenu a, .viewMenu a |
| Report view title color: | .viewContentInnerLayout |
| Floating button - Edit: | .btn.primary.editModeStart |
| Floating button - Save changes: | .btn.primary.saveAllViews |
| Floating button - Finish: | .btn.primary.editModeEnd |
| Floating button - Reset: | .btn.editModeReset |
TABLES
| Table body: | table.list, table.t-data-grid |
|---|---|
| Table header: | table.t-data-grid thead tr th, table.t-data-grid tr th |
| Odd table row: | .oddRow, .oddRow td |
| Even table row: | .evenRow, .evenRow td |
| Data import table: | .dataImportTable |
|---|
FORM ELEMENTS
| Select | select |
|---|---|
| Text input | |
BOTTOM MENU
| Bottom menu: | #bottomMenu |
|---|---|
| Bottom menu links: | #bottomMenu a |
| Bottom menu copyright: | #bottomMenu .copyright |
| Bottom menu line separators | #bottomMenu .support, #bottomMenu .privacyPolicy, #bottomMenu .securityStatement, #bottomMenu .termsOfUse (border-left: 1px solid #7893ac;) |
OTHER
To customize the other elements not listed here, please use the inspector feature in your browser in order to find the css selector.
PAGE IDENTIFICATION
Each page has its own unique identifier stored in the attribute "data-page-name" of the body element.
POP-UP WINDOW IDENTIFICATION
Each pop-up window has its own unique identifier stored in the attribute "data-id" of the div element.
MULTI-SELECT ELEMENTS
All multi-select elements have an attribute "data-label" containing the actual value of the element.
Overview
Content Tools