Change the Appearance of your Digital Customer Service Application

This topic describes how to change the appearance of your own Digital Customer Service application.

The Oracle Digital Customer Service Reference Implementation template has been styled to enhance its appearance. This has been done by modifying objects and adding styles to the app.css file.

To modify objects in the app.css file:

Navigate to the Oracle Visual Builder.
Open your Digital Customer Service application.
Click Web Apps.
Expand dcs, expand reources, expand css, then click app.css.

The app.css tab appears.
Locate and configure the object that you want to modify. For example, to set the header of the Reference Implementation template to a transparent black, modify the odcs-header CSS class selector:
```
 .odcs-header {
  background-color: rgba(0, 0, 0, 0.7);
  height: 58px;
}
```

CSS Classes defined in app.css can then be referenced in the HTML of the application. For example we have this code in pages/shell-page.html:

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

You can also use Oracle JET themes to provide consistent appearance of components across your Digital Customer Service application. For more information about Oracle JET themes refer to the Theming Applications chapter in the Developing Applications with Oracle JET guide, in the Related Topics.

Once an Oracle JET theme is created it can be added uploaded to resources/css and then referenced in the index.html of the application with code like this:

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