Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Sv translation
languageen


Note

You need to have Domain administrator role assigned to change BellaDati's design. In multi-domain configurations, you must have the Global admin role to change the Global appearance settings.

BellaDati allows you to change:

  • Logos
  • Favicon
  • Top and bottom menu background and text color
  • Application background color
  • Custom HTML and stylesheet
  • Custom Login page

 



Column
width200


Panel

On this page:

Table of Contents




Info

See the detailed whitelabeling manual here.

Global appearance settings

Global appearance can be changed by Global admin from the Configuration. To learn more, click here.

Changing look and feel of a domain

Go to Domain and select Look&Feel Settings in left navigation bar.

From the Look&Feel window, it is possible to change the following settings:

  • Logo displayed in the top left corner
  • Favicon
  • Menu color
  • Menu text color
  • Background color
  • Footer color

Users can also manually change the CSS Stylesheet or the PDF export CSS stylesheet.

Tip

While changing stylesheets we recommend to use Firefox's Firebug or Chrome's Developers Tools to identify used selectors.


Tip

Try our sample custom stylesheet

 


Results

Eventually, results may look like as follows:

Changing popup menu

User's popup menu can be changed to display additional options and looks differently.

Image Added

Code Block
languagecss
.topmenuleft_table .row {
  display: block;
}
.topmenuleft_table .row .cell {
  width: 100%;
}
.topmenuleft_table .user-email, .topmenuleft_table .cell.user-changepwd {
  display: block;
}

.topmenuleft_table .user-email {
  padding: 15px 0 0 28px;
    margin-bottom: 8px;
    color: black;
}

.topmenuleft_table .icon-edit:before, .topmenuleft_table .icon-address-book:before, .topmenuleft_table .icon-logout:before {
    display: inline-block;
  }

.topmenuleft_table .cell.ws-switch {
  text-align: left;
}
.topmenuleft_table a {
  color: black !important;
} 


Adding Custom HTML

BellaDati allows you to place custom HTML at:

  • the end of the head
  • the beginning of the body
  • the end of the body

Go to Domain and select Custom HTML in left navigation bar.

Place your HTML into appropriate text box.

Custom Login page

Enable custom login and edit the HTML for your customized login page.

Here is the result:

BellaDati Dark theme

Tip

Try our dark theme and dark login stylesheet!

 


Custom email template

There are two ways how to customize email content.

1. If you want to set it for whole BellaDati installation, login as super admin and go to Settings - Configuration - Look & Feel box.

2. For one domain - login as domain admin, go to Manage Domain - Look & Feel box on left side of screen. This also overrides settings for whole installation.

For both options there are three parts which you can customize:

Email template - end of head - if you want to customize head of the template, add you code here.

Email template - beginning of body - if you want to override the default header, add you code here.

For example logo of your company can be added to header with this HTML code:

Code Block
languagexml
<p><img src="http://company.com/front_query/image/logo.jpg"/></p>

Email template - end of body - if you want to override the default footer, add you code here.

For example some information about your company can be added in footer:

Code Block
languagexml
<p>Company name</p>
<p>Company address</p>
<p>email@company.com</p> 

Next Steps

 


List siblings

Sv translation
languageja


Note

BellaDatiのデザインを変更するには、割り当てられたドメイン管理者の役割を持っている必要があります。マルチドメイン構成では、グローバル管理者の役割を持っている必要があります。

BellaDatiに以下のことを 変更できます。

  • ヘッダーロゴ
  • トップとボトムのメニューの背景とテキストの色
  • アプリケーションの背景色
  • カスタムHTMLとスタイルシート
  • カスタムログインページ

 


Column
width200


Panel

このページ

Table of Contents




Info

ここにホワイトラベリングマニュアルをご参照してください

ルックアンドフィール変更

Domain (ドメイン) で左のナビゲーションバーにLook&Feel Settings (ルックアンドフィール設定) を選択します。

新しいロゴをアップロードするか、カラーピッカーから選択して、メニュー、背景またはフッターの色を変更します。

Tip

スタイルシートを変更するときに、FirefoxのFirebugか、ChromeのDevelopers Tools(開発者ツール)を使用することをお勧めます。


Tip

サンプルカスタムスタイルシート を試してみてください。

 

結果

最終的には、結果は次のようになります。

ポップアップメニューの変更

ユーザーのポップアップメニューは、追加のオプションを表示するように変更でき、見た目も異なります。

Image Added

Code Block
languagecss
.topmenuleft_table .row {
  display: block;
}
.topmenuleft_table .row .cell {
  width: 100%;
}
.topmenuleft_table .user-email, .topmenuleft_table .cell.user-changepwd {
  display: block;
}

.topmenuleft_table .user-email {
  padding: 15px 0 0 28px;
    margin-bottom: 8px;
    color: black;
}

.topmenuleft_table .icon-edit:before, .topmenuleft_table .icon-address-book:before, .topmenuleft_table .icon-logout:before {
    display: inline-block;
  }

.topmenuleft_table .cell.ws-switch {
  text-align: left;
}
.topmenuleft_table a {
  color: black !important;
} 



カスタムHTML追加

BellaDatiは、以下の所にカスタムHTMLを配置できます:

  • ヘッドの終わり
  • 本文の先頭
  • 本体の端部

Domain (ドメイン) で左のナビゲーションバーにCustom HTML (カスタムHTML) を選択します

該当するテキストボックスにHTMLを配置します。

カスタムログインページ

カスタムログインを有効にして、カスタマイズしたログインページのHTMLを編集します。

結果:

BellaDatiダークテーマ

Tip

ダークテーマダークログインスタイルシートを試してみてください!

 


カスタムメールテンプレート

電子メールコンテンツをカスタマイズする方法は2つあります。

1. BellaDatiのインストール全体に設定したい場合、スーパー管理者としてログインし、Settings - Configuration - Look & Feelに進みます。

2. 1つのドメインの場合にドメイン管理者としてログインし、画面の左側にあるManage Domain - Look & Feelボックスに進みます。これはまた、全体のインストールの設定を上書きます。

両方のオプションについては、カスタマイズ可能な3つの部分があります:

メールテンプレート・頭の終わり:テンプレートの頭をカスタマイズしたい場合は、ここにコードを追加します。

メールテンプレート・本文の先頭:デフォルトのヘッダーを上書きしたい場合は、ここにコードを追加します。

たとえば、会社のロゴをこのHTMLコードでヘッダーに追加することができます。

Code Block
languagexml
<p><img src="http://www.foresealife.com/front_query/image/logo.jpg"/></p>

メールテンプレート本体の端部:デフォルトのフッターを上書きしたい場合は、ここにコードを追加します。

例えば、会社に関するいくつかの情報は、フッターに追加することができます。

Code Block
languagexml
<p>Company name</p>
<p>Company address</p>
<p>email@company.com</p> 

Next Steps

 


List siblings