Page History

...

...

概要

Before you make any changes, remember to create a backup of the entire ROOT directory. Creating a zip of the ROOT directory will mean you can always restore your styling back to Yellowfin's default state. This is especially important if you are new to CSS. Do not skip this step.

It is also important to remember to clear your browser cache before attempting to view any changes you've made. This will ensure you don't get a combination of old and new styles and images on your page, only the current correct version.

Custom Directories

変更を行う前に、「ROOT」ディレクトリ全体のバックアップを必ず作成してください。「ROOT」ディレクトリのzipを作成することは、変更したスタイル設定をYellowfinのデフォルト状態にいつでも復元できることを意味します。CSSの扱いに慣れていない場合、これは特に重要です。この手順は必ず実行してください。

行った変更内容を表示して確認する前に、ブラウザーのキャッシュを必ずクリアすることも重要です。キャッシュをクリアすることで、新旧のスタイルおよびイメージがページ上で混在することを避けることができ、最新の修正バージョンのみを表示できます。

カスタムディレクトリ

Yellowfinインストールの「ROOT」ディレクトリには、スタイル変更に使用する2つのカスタムディレクトリがあります：Within the ROOT directory in your Yellowfin installation, there are two custom directories used for restyling:

1. customcss (Yellowfin\appserver\webapps\ROOT\customcss)
2. customimages (Yellowfin\appserver\webapps\ROOT\customimages)

These directories should contain any customised versions of images and css that are to be used in the place of Yellowfin original images. These files are stored in custom directories so that the original files can remain intact. It also means that when Yellowfin is updated they are not touched, as the custom directories are not modified during the update.

...

これらのディレクトリには、Yellowfinの元のイメージの代わりに使用するカスタマイズされたイメージおよびCSSが格納されています。これらのファイルは、元のファイルが変更されないようにカスタムディレクトリに保存されています。カスタムディレクトリはYellowfinの更新時に変更されないため、Yellowfinを更新しても元のファイルは変更されません。

イメージ

Yellowfinで使用されるイメージは、「images」ディレクトリ（YellowfinThe images used by Yellowfin can be found in the Images directory (Yellowfin\appserver\webapps\ROOT\images). There are a wide number of images used throughout Yellowfin to control the look and feel of various menus and results. In order to customise these images you will need to use image editing software. If you do not have image editing software there is a wide range of free tools available online including GIMP and images）に格納されています。Yellowfin全体で非常に多くのイメージを使用して、さまざまなメニューや結果の外観や操作性を制御しています。これらのイメージをカスタマイズするには、画像編集ソフトウェアを使用する必要があります。画像編集ソフトウェアを持っていない場合は、 GIMP や Paint.NET.

Once you have a tool to use, you need to:

などのさまざまな無料ツールをオンラインで入手できます。

使用するツールを用意できたら、以下の操作を実行します。

1. イメージファイルに必要な変更を加えます。
2. 「customimages」ディレクトリ（Yellowfin
3. Make the required changes to the image file
4. Save your changes to the custom images directory (Yellowfin\appserver\webapps\ROOT\customimages), ensuring the file maintains the same name and type
5. Clear your browser cache
6. customimages）の変更を保存し、ファイルの名前と種類が同じであることを確認します。
7. ブラウザーのキャッシュをクリアします。
8. 更新の影響を受けるページを再読み込みして表示します。Reload the page that's affected by the updates and review

CSS

Yellowfinで使用されるCSSファイルは、「css」ディレクトリ（YellowfinThe CSS files used by Yellowfin can be found in the CSS directory (Yellowfin\appserver\webapps\ROOT\css). There are a range of stylesheets used by Yellowfin to control the look and feel of various aspects of the product. The main file used when restyling Yellowfin content is ie.css, as this is used for the widest range of styles throughout the system, with smaller files used for specific functions or pages.

Browser Developer Tools

Generally, when heavily restyling Yellowfin, including styles, the use of a browser's developer tools is recommended. This allows you to investigate elements on a page - viewing the styles being used and testing out possible changes before any stylesheets are changed. Most browsers have built in developer tools, as well as some well designed plugins. The following describes how to access developer tools in some common browsers, although it's not an exhaustive list.

Note: these instructions were correct for the latest version of each browser when written, if they don't work for you please reference the help of the particular browser you are using.

Editing & Updating CSS

Once you have tried out your changes using a set of developer tools listed above, you will need to make your changes to Yellowfin's CSS files. In order to do this we recommend you make use of a text editor that has syntax highlighting. If you don't have something already, a free tool we like to use is Notepad++.

All you need to do now is:

css）に格納されています。Yellowfinではさまざまなスタイルシートを使用して、製品のさまざまな局面の外観や操作性を制御しています。Yellowfinのコンテンツのスタイルを変更するために使用するメインのファイルはie.cssです。このファイルは、システム全体を通して最も幅広くスタイルの指定に使用され、その他の比較的小さなファイルが特定の機能やページ用に使用されています。

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

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

注意: これらの操作方法は、記事作成時の各ブラウザーの最新バージョンで正しく実行できます。正しく操作できない場合は、使用している特定のブラウザーのヘルプを参照してください。

CSSの編集と更新

上記の一連の開発者ツールを使用して変更を試したら、次にその変更をYellowfinのCSSファイルに加える必要があります。これを行うには、構文が強調表示されるテキストエディターを使用することをお勧めします。このようなテキストエディターを持っていない場合、無料ツールの Notepad++を使用することをお勧めします。

必要な操作は次のとおりです。

1. CSSファイルに必要な変更を加えます。
2. 「customcss」ディレクトリ（Yellowfin
3. Make the required changes to the CSS file(s)
4. Save the file(s) to the custom css directory (Yellowfin\appserver\webapps\ROOT\customcss)
5. Clear your browser cache
6. Reload the page that's affected by the updates and review
7. customcss）にファイルを保存します。
8. ブラウザーのキャッシュをクリアします。
9. 更新の影響を受けるページを再読み込みして表示します。

注意: 「customcss」ディレクトリに保存する置き換えファイルは、元のファイルと同じ名前でなくてもかまいません。クラス名が適切であれば、これらのファイルはYellowfinで使用されます。つまり、必要に応じてすべてのカスタムスタイルを1つのCSSファイルにまとめることができます。このファイルにはカスタマイズしたアイテムのみが含まれます。 Note: your replacement files, stored in the customcss directory do not have to be files of the same names as the original, as long as they have the correct class names Yellowfin will use them. This means that you can condense all your custom styling into one css file if you wish, which only contains items you've customised.