Page History

...

CSS

Yellowfinで使用されるCSSファイルは、cssディレクトリ（Yellowfin\appserver\webapps\ROOT\css）に格納されています。Yellowfinでは、様々なスタイルシートを使用して、製品の様々な局面のルックアンドフィールを制御しています。Yellowfinコンテンツのリスタイリングをするために使用する主要なファイルは「ie.css」です。こちらのファイルは、システム全体を通して最も幅広くスタイルの指定に使用され、その他の比較的小さなファイルが、特定の機能やページの指定に使用されています。です。こちらのファイルは、システム全体を通して最も幅広くスタイルの指定に使用され、その他の比較的小さなファイルが、特定の機能やページの指定に使用されています。しかし、このファイルはYellowfinのコアファイルなので、編集すべきではありません。その代わりに、専用のカスタムCSSフォルダー (Yellowfin\appserver\webapps\ROOT\customcss\) を使用して、デフォルトスタイルの詳細を上書きしてください。

デフォルトカラースタイル

Yellowfin 9.6では、カラー名の使用をコアCSSファイル内に統一したことで、グローバルでの色の変更がより簡単になりました。

カラースキームをカスタマイズするには、\customcssフォルダー内のカスタムファイルを開き、ファイルの先頭に以下を追加します。

:root {
 
<variable-overrides-go-here>
 
}

<variable-overrides-go-here>を、独自のスタイルに置き換えてください。

例えば、

:root {
 
-primary-color: red;
 
--loader-color: green;
 
}

次の表は、色の使用に関連するすべてのスタイル名の現在の一覧です。古いバージョンのYellowfinを使用している場合は、機能しないものもあるかもしれません。

--primary-color

#009EEC

--loader-color: #009EEC 

#009EEC

--leftnav-hover-color

#008CD7

--primary-button-color 

#009EEC

--primary-button-hover-color 

#008ED4

--grey

#CCCCCC

--background-grey

var(--grey)

--border-grey

var(--grey) 

--signal-positive-color 

#009EEC

--signal-negative-color

#FF8F00

--dark-grey

#666

--black 

#000

--background-black

var(--black)

--white

#fff

--background-white

var(--white)

--primary-text-color

#333740

--light-grey

#F8F6F4

--light-grey-background

var(--light-grey)

ブラウザーの開発者ツール

一般的に、スタイルの指定などYellowfinのスタイルを大幅に変更する場合、ブラウザーの開発者ツールの使用をお勧めします。これらのツールを使用することにより、使用中のスタイルを確認して、スタイルシートを変更する前に可能な変更をテストすることができるため、ひとつのページ上で要素を検討することができます。大部分のブラウザーには、開発者ツールや適切に設計されたプラグインが組み込まれています。以下の表は、一般的に使用されている各種ブラウザーで、開発者ツールにアクセスする方法を説明しています。ただし、こちらの一覧はすべてのブラウザーを網羅しているわけではありません。

...