Change the Appearance of Your Partner Finder Application

This topic describes how to change the appearance of your own Partner Finder application.

The Oracle Partner Finder 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 Partner Finder application.
Click Web Apps.
Expand partnerfinder, expand resources, expand css, then click app.css.

The app.css tab appears.
Locate and configure the object that you want to modify. For example, to modify the background image used in the Partner Finder application, modify the partner-finder CSS class selector:
```
.partner-finder {
  background-image: url('../images/body_bg_texture.png');
  background-repeat: repeat;
  background-color: #292623;
  color: #ffffff;
  background-size: contain;
}
```

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

<div id="page" class="partner-finder oj-web-applayout-page">

You can also use Oracle JET themes to provide consistent appearance of components across your Partner Finder 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">
...