Page tree
Skip to end of metadata
Go to start of metadata

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

Selectselect
Text input
input[type=text]

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.

  • No labels