Page History
...
Table of Contents | ||
---|---|---|
|
概要
Styleclass | ||
---|---|---|
| ||
変更を行う前に、「ROOT」ディレクトリ全体のバックアップを必ず作成してください。「ROOT」ディレクトリのzipを作成することで、変更したスタイル設定をYellowfinのデフォルト状態に、いつでも復元することができます。これは、CSSの扱いに慣れていない場合に、特に重要です。こちらの手順は必ず実行してください。
...
これらのディレクトリには、Yellowfinのオリジナルイメージの代わりに使用する、カスタマイズされたイメーやCSSが格納されています。これらのファイルは、カスタムディレクトリに保存されるため、オリジナルのファイルが変更されることはありません。カスタムディレクトリは、Yellowfin更新時に変更されないため、更新時にカスタムファイルが変更されることもありません。
イメージ
...
Class | topLink |
---|
...
Yellowfinで使用されるイメージは、imagesディレクトリ(Yellowfin\appserver\webapps\ROOT\images
)に格納されています。Yellowfin全体で非常に多くのイメージを使用しており、様々なメニューや結果のルックアンドフィールを制御しています。これらのイメージをカスタマイズするためには、画像編集ソフトウェアが必要です。画像編集ソフトウェアがない場合は、GIMPやPaint.NETなど、無料のツールをオンラインで入手することができます。
...
Yellowfinで使用されるCSSファイルは、cssディレクトリ(Yellowfin\appserver\webapps\ROOT\css
)に格納されています。Yellowfinでは、様々なスタイルシートを使用して、製品の様々な局面のルックアンドフィールを制御しています。Yellowfinコンテンツのリスタイリングをするために使用する主要なファイルは「ie.css」
です。こちらのファイルは、システム全体を通して最も幅広くスタイルの指定に使用され、その他の比較的小さなファイルが、特定の機能やページの指定に使用されています。です。こちらのファイルは、システム全体を通して最も幅広くスタイルの指定に使用され、その他の比較的小さなファイルが、特定の機能やページの指定に使用されています。しかし、このファイルはYellowfinのコアファイルなので、編集すべきではありません。その代わりに、専用のカスタムCSSフォルダー (Yellowfin\appserver\webapps\ROOT\customcss\) を使用して、デフォルトスタイルの詳細を上書きしてください。
デフォルトカラースタイル
Yellowfin 9.6では、カラー名の使用をコアCSSファイル内に統一したことで、グローバルでの色の変更がより簡単になりました。
カラースキームをカスタマイズするには、\customcssフォルダー内のカスタムファイルを開き、ファイルの先頭に以下を追加します。
Code Block | ||||
---|---|---|---|---|
| ||||
:root {
<variable-overrides-go-here>
} |
<variable-overrides-go-here>を、独自のスタイルに置き換えてください。
例えば、
Code Block | ||||
---|---|---|---|---|
| ||||
: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のスタイルを大幅に変更する場合、ブラウザーの開発者ツールの使用をお勧めします。これらのツールを使用することにより、使用中のスタイルを確認して、スタイルシートを変更する前に可能な変更をテストすることができるため、ひとつのページ上で要素を検討することができます。大部分のブラウザーには、開発者ツールや適切に設計されたプラグインが組み込まれています。以下の表は、一般的に使用されている各種ブラウザーで、開発者ツールにアクセスする方法を説明しています。ただし、こちらの一覧はすべてのブラウザーを網羅しているわけではありません。
...