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.

    Icon

     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

    Icon

    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 

    Icon

    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