Versions Compared

    Key

    • This line was added.
    • This line was removed.
    • Formatting was changed.
    Sv translation
    languageen

    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.

    Info

     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

    Note

    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 

    Note

    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.

    Sv translation
    languageja

    下には、選択してカスタマイズできるCSS要素の詳細なリストがあります。そうすれば、Belladatiドメインの完全なビジュアルスタイルを簡単に変更できます。

    Info

    ホワイトラベリングマニュアルをここでご参照してください。

    トップバー 

    ナビゲーショントップバー:.topbar
    トップバーメニューのリンク+アイコン:.topbar ul li a
    入力検索:.topbar form input
    入力テキスト検索:form#quickSearchForm .txt
    アイコン検索:#quickSearchForm .icon-search:before     
    縦線検索:.icon-search-position-fix (border-right 1px solid  #fff; ) 

    本文の内容

    Note

    グローバルCSSスタイルを変更するときは、アプリケーション全体に予期しない視覚的な変更が発生する可能性があるので注意してください。

    本文:body.desktop
    ダッシュボードダッシュレットのタイトルヘッダ.dashletHeader
    その他のリンク:a

    左のサイドバー

    サイドバー本文:.sidebarBlock
    サイドバーのタイトル:.sidebarBlock h3
    サイドバーリンク:.sidebarBlock a

     

    右側のサイドバー・歴史・フィルタ・変数 

     

    サイドバー本文:.setupPanel, .sidePanelPadding
    サイドバー本文の内容: #reportView .setupPanel, #reportView .sharingPanel, #reportView .historyPanel
    アイコンの色:.icon-info:before, .icon-search:before, .icon-calendar:before, .icon-attribute-date:before
    の他のアイコン"i":#reportView .setupPanel i, #reportView .sharingPanel i, #reportView .historyPanel i
    ボタンの色:.btn.primary, .btn
    サイドバーリンク:#reportView .setupPanel a, #reportView .sharingPanel a, #reportView .historyPanel a

     

    報告 

     

    レポートのタイトル(トップバナーなし).top_header_no_topbar h2
    レポートのタイトル(トップバナーがある).topbar_bg_title
    レポートのタイトルのアイコン(トップバナーなし):#contentColumn h2 [class^="icon-"]:before, h2 [class*=" icon-"]:before, #content h2 [class^="icon-"]:before, h2 [class*=" icon-"]:before
    レポートのタイトルのアイコン(トップバナーがある).topbar_bg_out [class^="icon-"]:before, .topbar_bg_out [class*=" icon-"]:before
    トップコントロールボタンのレポート#reportPanelActions .btn
    トップコントロールボタンポップアップメニューのレポート#reportPopupMenu, #reportPopupMenu a
    ビューのコントロールボタンのレポート.editViewMenu a, .viewMenu a
    ビューのタイトルの色のレポート.viewContentInnerLayout
    フローティングボタン ・編集.btn.primary.editModeStart
    フローティングボタン ・ 変更保存.btn.primary.saveAllViews
    フローティングボタン ・完了.btn.primary.editModeEnd
    フローティングボタン ・リセット:.btn.editModeReset

    テーブル

    テーブル本文:table.list, table.t-data-grid
    テーブルのヘッダー:table.t-data-grid thead tr th, table.t-data-grid tr th
    奇数のテーブル行:.oddRow, .oddRow td
    偶数のテーブル行:.evenRow, .evenRow td    

     

    データのインポートテーブル:.dataImportTable

    フォーム要素

    選択select
    テキスト入力
    input[type=text]

    下部のメニュー 

    下部のメニュー:#bottomMenu
    下部のメニューのリンク:#bottomMenu a
    下部のメニューの著作権:#bottomMenu .copyright   
    下部のメニューの行区切り#bottomMenu .support, #bottomMenu .privacyPolicy, #bottomMenu .securityStatement, #bottomMenu .termsOfUse (border-left 1px solid  #7893ac;)

    その他

     

    Note

    ここに記載されない他の要素をカスタマイズするには、ブラウザのインスペクタ機能を使用してcssセレクタを探してください。