Page tree

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セレクタを探してください。