カスタマイズ事例としてUIの変更についてご紹介します。

今回の変更点

こちらは顧客企業の概要ページの画像になります。ラベル名と実際のデータの表示フィールドの間の空白が大きいので見づらさを感じる人もいるかもしれませんね。

ソースの一部を修正することで以下のように変更できます。（データの表示部に下線も追加）

ラベル名を右寄せにし、データ部に下線を入れています。

カスタマイズ方法

VtigerCRMの見栄えはcssを修正することで可能となります。

修正箇所

インストールディレクトリ/layouts/v7/skins/　以下の図の赤枠内フォルダ配下の　style.css ファイルが修正対象です。

修正箇所は以下の部分です。

detailviewというのが概要ページのことになります。fieldlabelがラベル名、fieldvalueがデータ部になります。widthで幅が指定されていますので、この値を変更することで項目の幅を変更します。フィールドが二列構成なので、20+30＝50%になっています。

修正は、1775行目の下に右寄せのコード、1778行目の下にアンダーラインのコードを追加すれば完成です。サンプルのコードを以下に記載します。

.detailview-table .fieldLabel {
  width: 20%;
  text-align: right; ← この行を追加する
}

.detailview-table .fieldValue {
  width: 30%;
  border-bottom: 1px solid #dedcdc !important; ← この行を追加する
}

上の図の赤枠のフォルダーはメニューと連動しています。したがって、どこからモジュールを起動しても変更を適用する場合は、すべてのフォルダー配下のcssを変更してください。少々骨が折れますが一度やれば見やすい画面になりますのでお勧めいたします。

まとめ

このようにVtigerCRMのUIはcssで制御されています。cssの変更はロジックそのものには影響を与えません。トライ＆エラーでより操作しやすいUIに変更していただければと思います。

なお、変更後のUIの操作体験ができます。参考にしてください。