1. Digital Customer Serviceの実装
  2. Digital Customer Serviceアプリケーションの外観の変更
機械翻訳について

Digital Customer Serviceアプリケーションの外観の変更

このトピックでは、独自のDigital Customer Serviceアプリケーションの外観を変更する方法について説明します。

Oracle Digital Customer Serviceリファレンス実装テンプレートは、外観を拡張するようにスタイル設定されています。 これを行うには、オブジェクトを変更し、app.cssファイルにスタイルを追加します。

app.cssファイルのオブジェクトを変更するには:

  1. Oracle Visual Builderに移動します。

  2. Digital Customer Serviceアプリケーションを開きます。

  3. Webアプリケーションをクリックします。

  4. dcsを展開し、resourcesを展開し、cssを展開し、app.cssをクリックします。

    app.cssタブが表示されます。

  5. 変更するオブジェクトを検索して構成します。 たとえば、リファレンス実装テンプレートのヘッダーを透明な黒に設定するには、odcs-header CSSクラス・セレクタを変更します: 

     .odcs-header {
  background-color: rgba(0, 0, 0, 0.7);
  height: 58px;
}

app.cssで定義されたCSSクラスは、アプリケーションのHTMLで参照できるようになります。 たとえば、pages/shell-page.htmlに次のコードがあります: 

  <header role="banner" id="header" class="odcs-header oj-web-applayout-header>"

Oracle JETテーマを使用して、Digital Customer Serviceアプリケーション全体でコンポーネントの一貫性のある外観を提供することもできます。 Oracle JETテーマの詳細は、関連トピックのOracle JETを使用したアプリケーションの開発ガイドのTheming Applicationsの章を参照してください。

Oracle JETテーマが作成されると、それをresources/cssに追加でアップロードし、次のようなコードを使用してアプリケーションのindex.htmlで参照できます。

...
  <link type="text/css" rel="stylesheet" href="resources/css/app.css">
  <link type="text/css" rel="stylesheet" href="resources/css/myJETTheme.css">
...

関連トピック