| Anchor | ||||
|---|---|---|---|---|
|
| Table of Contents | ||
|---|---|---|
|
Overview
Yellowfin can be integrated into existing or new applications by removing or replacing the Header and Footer panels. This also allows you to build in your own navigation into customised panels.
Much like the Login Page, customisation of the standard Yellowfin Header & Footer can be performed two ways:
- Simple - this involves the replacement of images, and changes to the CSS files used by the header and/or footer, without having to write a panel. Generally this option is used for quick 'mock ups' but not the final restyled product.
- Complete - this involves writing a custom file to replace the header and/or footer panel. This method requires more technical knowledge, and more time.
Header
The Yellowfin header sits at the top of each page in the system:
Footer
The footer is located at the bottom of the page, and is centred on the Dashboard if the dashboard position is set to Centre:
Simple
...
概要
Yellowfinは、ヘッダーおよびフッターパネルを削除または置き換えることで、既存または新しいアプリケーションとの統合が可能です。また、この操作によって独自のナビゲーションをカスタマイズしたパネル内に組み込むことができます。
ログインページと同様に、標準のYellowfinヘッダーおよびフッターのカスタマイズは次の2つの方法で実行できます。
- シンプル - イメージの置き換えおよびヘッダーおよびフッターに使用されているCSSファイルの変更を伴います。パネルを記述する必要はありません。一般的に、このオプションは簡易的なモックアップに使用され、スタイルが変更された最終版としては使用されません。
- 完全 - カスタムファイルを記述してヘッダーおよびフッターパネルを置き換える作業を伴います。この方法は高度な技術的知識および時間を必要とします。
ヘッダー
Yellowfinヘッダーはシステム内の各ページの上部に位置します。
フッター
フッターはページの下部に位置し、ダッシュボードの位置が中央揃えに設定されている場合はダッシュボードの中央で位置揃えされます。
例
一時的なカスタムヘッダーおよびカスタムフッターを簡易的に作成する場合、YellowfinのROOTのcustomimagesディレクトリ（Yellowfin\appserver\webapps\ROOT\customimages) with your customised versions:）で以下のイメージをカスタマイズしたバージョンと置き換えます：
- header_logo.gif
- logoFooter.png
You will need to clear your browser cache once replacing these images in order for them to appear.
Note: the images you wish to use as replacements will need to have the same name as the files listed above in order for the page to pick them up. You no longer have to overwrite the originals, simply place your new images in the custom directory. This will mean that they will not be overwritten during the upgrade process.
Example
...
Component
...
Standard
...
Custom
...
これらのイメージを置き換えたら、新しいイメージが表示されるようにブラウザーのキャッシュをクリアする必要があります。
注意：置き換えとして使用するイメージは、上記のファイルと同じ名前にしてページで使用されるようにする必要があります。オリジナルを上書きする必要はなく、単に新しいイメージをカスタムディレクトリに配置します。これにより、新しいイメージはアップグレードプロセス時に上書きされません。
例
コンポーネント | 標準 | カスタム |
|---|---|---|
ヘッダー全体 |
|
|
Full Footerフッター全体 |
|
|
header_logo.gif |
|
|
logoFooter.png |
|
|
...
完全
Instructions
The included HTML should he a fragment, suitable for including inline within another HTML page, rather than it being a full HTML document itself. That is, it should NOT contain <HTML>, <HEAD>, or <BODY> tags. Remember that any links inside the HTML will be relative to the Yellowfin page. It is recommended to use absolute HTML links.
...
作成方法
含まれるHTMLは、完全なHTMLドキュメント自身ではなく、別のHTMLページにインラインで含めるための構成要素である必要があります。つまり、<HTML>、<HEAD>、または<BODY>タグを含めることはできません。このHTML内のすべてのリンクは、すべてYellowfinページに対して相対的となります。絶対的なHTMLリンクを使用することをお勧めします。
標準のYellowfinヘッダーには、ユーザーがシステムからログアウトするための1つのリンクのみが提供されていることに留意することも重要です。置き換えたヘッダーでこのリンクを提供する場合は、次を含めます。
| Code Block | ||
|---|---|---|
| ||
javascript:on_submit('logoff');
|
There is also a sample header file available as a starting point in the Yellowfin Examples directory (Yellowfinのサンプルディレクトリ（Yellowfin\development\examples\CustomHeaderExample.jsp).
...
）には、サンプルのヘッダーファイルが含まれており、これを使用してカスタムヘッダーの作成を開始できます。
...
- カスタムのヘッダーおよびフッターファイルをYellowfinのROOTディレクトリ（
Yellowfin\appserver\webapps\ROOT)Save any required images in the Yellowfin customimages directory (）に保存します。 - 必要なすべてのイメージをYellowfinのcustomimagesディレクトリ（
Yellowfin\appserver\webapps\ROOT\customimages)Update any CSS files used, or add new ones to the Yellowfin customcss directory (）に保存します。 - 使用するすべてのCSSファイルを更新するか、新しいCSSファイルをYellowfinのcustomcssディレクトリ（
Yellowfin\appserver\webapps\ROOT\customcss) - In Yellowfin, navigate to Administration > Configuration > Integration (tab)
Here you will need to specify the locations of your custom files, for example:
- Change the Page Header option from Standard Yellowfin Header to Custom Header and specify the URL of the file.
- Change the Page Footer option from Standard Yellowfin Footer to Custom Footer and specify the URL of the file.
...
- ）に追加します。
- Yellowfinで、「管理」>「設定」>「インテグレーション」（タブ）に移動します。
ここで、カスタムファイルの場所を指定します。たとえば、次のように指定します。
- 「ページヘッダー」オプションを、「標準ヘッダー」から「カスタムヘッダー」に変更して、ヘッダーファイルのURLを指定します。
- 「ページフッター」オプションを、「標準フッター」から「カスタムフッター」に変更して、フッターファイルのURLを指定します。
カスタムURLは、毎回ページが読み込まれるときの実行時に含まれるHTML構成要素へのリンクです。この構成要素は、Yellowfinサービスがアクセス可能な任意のサーバーに配置できますが、最高のパフォーマンスを得るために、同一のサーバー上に配置することをお勧めします。この例では、構成要素ファイルをYellowfinのROOTディレクトリ（Yellowfin\appserver\webapps\ROOT\header.jsp and can then be found via ）に配置し、header.jspNote: instead of using the existing Yellowfin directories, you may wish to create a new folder in Yellowfinを介して見つかるようにしています。
注意：既存のYellowfinディレクトリを使用せずに、Yellowfin\appserver\webapps\ROOT to contain your custom files, to make locating them easier.
Example
...
Component
...
Standard
...
Custom
...
内に新しいフォルダーを作成してカスタムファイルを格納し、これらのファイルを簡単に特定できるようにすることも可能です。
例
コンポーネント | 標準 | カスタム |
|---|---|---|
ページ全体 |
|
|
