最初のステップは、既存のテーマのコピーを作成することで独自のテーマを作成することです。なぜ必要なのでしょうか？LiveAgentのアップデートのたびに、デフォルトのテーマファイルが上書きされてしまうためです。

独自テーマの作成 

WARNING: This customization is only possible for standalone installations of LiveAgent.
If you should ever want to migrate to our cloud these customizations would be lost.
Instead try to customize using the default options for adding custom header, footer and CSS to the knowledgebase.

注意：LiveAgentのバージョン4.7.2.1より古いバージョン（4.2.7.1以前）では、「themes」フォルダは /accounts/default1/ ディレクトリに配置されていました。

  1. LiveAgentのインストール先にある以下のフォルダに移動してください：/themes/kb/ そこに「classic」という名前のテーマがあります。それをコピーして、好きな名前（例：「my_own_theme」）を付けてください。コピーしたテーマ（例：「my_own_theme」）フォルダ内の「theme.php」ファイルを開き、以下の部分を書き換えてください：

name=Classic

を例えば以下のように変更します：

name=Copy of Classic

  1. LiveAgentのエージェントパネルで Configuration（設定） > Customer portal（カスタマーポータル） > Settings（設定） に移動すると、「Themes」というラベルの付いた新しいリストボックスが表示されます。そのリストボックスからカスタムテーマを選択できます。

注意：バージョン4.7.2.1より前のバージョンでは、LiveAgentのインストール先にある「scripts」フォルダに移動して「custom.php」ファイルを作成し、そのファイルに以下のコードを記述する必要があります：

<?php
define ('KB_THEME','name_of_your_custom_theme');
?>

上記の手順が完了したら、/accounts/default1/cache/templates/ に移動して、そこにある「kb」ディレクトリを削除してください。

これ以降、カスタムナレッジベーステーマが使用されます。

カテゴリのアイコン変更

各カテゴリには固有の CSSクラスID があることを理解しておく必要があります。適切なクラスIDを見つけ、テーマディレクトリ内にある「theme.css」ファイルで使用します。

ナレッジベースのデフォルトレイアウトを見てみましょう：

ここでは、Category1とCategory2のアイコンを編集したいとします。

Category1のアイコン変更

この例ではGoogle ChromeとそのデベロッパーツールCを使用します。Google ChromeよりMozilla Firefoxを好む方は、Mozilla Firefoxの「Firebug」拡張機能を使用してください。 Google Chromeで「Category1」を右クリックして「Inspect Element」（要素の検査）を選択すると、次のような画面が表示されます：

CSSクラスはかなり多いですが、必要なのは上のスクリーンショットでハイライトされている3つだけです。そのため、以下のパスにある theme.css ファイルで CategoryBox9、CategoryTitleBox、BigIcon クラスを使用します： /themes/kb/name_of_our_custom_theme/

その前に、新しいアイコンとして使用したい画像をカスタムテーマの「img」ディレクトリにアップロードしておく必要があります： /themes/kb/name_of_our_custom_theme/img/

カテゴリアイコンの最適な画像サイズは28×28ピクセルで、.png、.jpg、.gifのいずれかのファイル形式を使用できます。

では、theme.css ファイルを開いて、先頭に以下のコードを追加しましょう：

.CategoryBox9 .CategoryTitleBox .BigIcon {background:url('[$imgPath]name_of_our_image_file.png') no-repeat;}

ここで [$imgPath] はカスタムテーマの「img」ディレクトリへのパスを表します。これにより、LiveAgentはカスタムテーマの「img」ディレクトリから画像ファイルを参照するようになります。

「no-repeat」プロパティは必須です。これがないと、画像がX軸方向（左から右）に繰り返し表示されてしまいます。上記の変更後、ページをリロードしてナレッジベース（カスタマーポータル）ページのCategory1アイコンがどのように表示されるか確認できます：

Category2のアイコン変更

Google Chromeで「Category2」を右クリックして「Inspect Element」（要素の検査）を選択します。

上のスクリーンショットでハイライトされているように、以下のパスにある theme.css ファイルで CategoryBox5、CategoryTitleBox、BigIcon クラスを使用します： /themes/kb/name_of_our_custom_theme/

以下のコードを追加しましょう：

.CategoryBox5 .CategoryTitleBox .BigIcon {background:url('[$imgPath]name_of_our_image_file.png') no-repeat;}

ナレッジベースページでどのように表示されるか確認しましょう：

カテゴリ内の記事アイコンも変更したい場合

手順は同じですが、CSSクラスが異なります。

Category1内の記事のひとつを右クリックして「Inspect element」（要素の検査）を選択します：

上のスクリーンショットでハイライトされているように、以下のパスにある theme.css ファイルで CategoryBox9、ItemLink、SmallIcon クラスを使用します： /themes/kb/name_of_our_custom_theme/

theme.css ファイルに追加するコードは以下のとおりです：

.CategoryBox9 .ItemLink .SmallIcon {background:url('[$imgPath]name_of_our_image_file.png') no-repeat;}

変更が完了したら、ナレッジベースページを確認しましょう：

記事アイコンの最適な画像サイズは15×15ピクセルです。