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 changing objects and adding styles to the app.css file.

To change objects in the app.css file:

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

The app.css tab appears.
Find and configure the object that you want to change. For example, to set the header of the Reference Implementation template to a transparent black, change 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've 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 see 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">
...