Style and Theme Visual Builder Applications

All styling in Visual Builder applications happens manually in CSS. There are no declarative features for changing the display of text or images. Because all Visual Builder applications are just JET applications, they use JET themes to style the applications.

Visual Builder applications created with version 20.10 or later, by default, use the Redwood theme. Redwood is the Oracle standard for application look and feel. It includes Redwood-only features such as Dark Mode that renders components in an inverted color scheme against a dark background, and components such as Waterfall Layout and Action Cards that enrich user experience. It also includes a collection of icons that you can readily leverage in your apps.

Because Redwood achieves its look and feel through hundreds of custom properties (also called CSS variables), you can override these variables to customize the default look and feel for your requirements.

Note:

Styling applications is supported only for web applications that use the Redwood theme. If you’re styling applications that use the Alta theme, note that support for Alta themes has been deprecated since JET 10.

When you style your Visual Builder or JET applications, it's important to use theming correctly. Otherwise, you run the risk of finding that your re-styling breaks when you upgrade your platform versions. For more information about theming your application, see "Using CSS and Themes in Applications" in Developing Applications with Oracle JET. To get the latest version, go to https://www.oracle.com/webfolder/technetwork/jet/index.html, click Help and Support, then scroll to the bottom and click Theming.

Transition a Web (or Mobile) App's Theme to Redwood

Visual Builder applications created with version 20.07 or earlier, by default, use JET's Alta theme as the base UI theme. If your app uses the Alta theme, we strongly urge you to transition your app to use the Redwood theme before support for the Alta theme ends.

To move your web (or mobile) app's theme from Alta to Redwood:

  1. Select the application node in the Navigator.
  2. Click Settings, then look for the Theme field in the General tab.
  3. If the Theme is set to Alta, you can switch to Redwood or Redwood Stable (recommended) as the base theme.


    Because component dimension and styling have changed, make sure you verify the look and feel. You may have to redesign the app if needed.

With the theme now set to Redwood, you can:
  • Override the default Redwood styles to suit your needs for web apps and mobile apps.
  • Override the appearance of specific component instances. For example, if you've made a div element clickable, you may want to add a class called clickable to the div and define the CSS for the class so that the element is highlighted, the cursor changes to a pointer when you hover over it, and so on.

Customize the Redwood Theme for a Web Application

Starting with JET 10 in version 21.07, you can use CSS variable overrides to customize the Redwood UI theme for web apps created in Visual Builder. In this scenario, your web app continues to use the built-in CSS file as the base theme, but you override some variables in a separate CSS file to customize the base theme's look and feel for the app.

The advantage of overriding CSS variables in a separate file is that you won't need to rebuild your web app with each new version of JET. Whenever the default Redwood UI theme changes, those updates will be picked up by your application's CSS files without requiring changes.

Note:

See Override the Redwood Theme for a Mobile Application for instructions on overriding the Redwood theme CSS for a mobile app.

To customize the base theme used by a web app:

  1. In the Navigator's Web Applications tab, select your application and click the Settings tab.
  2. When the Theme is set to Redwood, click the Create Override link:


    A new redwood-overrides.css file is created in your application’s resources/css folder.

    Your app's Theme also changes from Redwood to Redwood Stable. An app's base theme can be Redwood or Redwood Stable (starting with JET 11 in version 22.01). The Redwood theme provides the Oracle look and feel and inherits all future updates to the Redwood theme, but these changes can potentially bleed into your custom theme. Redwood Stable, on the other hand, is meant to minimize changes bleeding into a custom theme. When customizing the theme, we recommend you use Redwood Stable to reduce the chances of your app being impacted by future updates. This way, you only override the variables you want to change while inheriting all other updates to the Redwood theme.

  3. Click the file under Theme Override to open it:
  4. Uncomment and change the values of the variables you want to change.

    To do this, remove the /* just before the variable and the */ after it, then update the variable's value. For example, to override the font used by the Redwood theme for your application, uncomment and change the --oj-html-font-family variable's values:
    Description of redwood-override-change.png follows
    Description of the illustration redwood-override-change.png

    You can also add variables that you want to override. For a list of variables that can be changed, see JET documentation at https://www.oracle.com/webfolder/technetwork/jet/jsdocs/CssVariablesOverview.html.

  5. Check your application and verify the changes.

Override the Redwood Theme for a Mobile Application

If you would like to override the Redwood theme in your mobile app, you will need to create a new CSS file and update app-flow.json to include the new CSS.

  1. In your mobile app, expand the Resources node, and add a file named redwood-overrides.css to the css folder.

  2. In the Source view, select app-flow.json and to the "imports": { "css" section, add:
    Alternatively, you can import the CSS file to the mobile app settings. See Manage Custom Component, CSS, and Module Imports.

Add a Custom Style to a Component

When you want to customize the appearance of specific component instances, you create a style class and define the style in your app's stylesheet, then assign that class to the specific component instance you want to override.

Some style classes are predefined in the app and are automatically applied to components when you add them to a page. Specific predefined style classes are applied to many Oracle JET components to ensure they display correctly and consistently. For example, if you look at the HTML for a Header component in a page's Code editor, you might see the following style classes applied to an h1 element: oj-flex-item oj-sm-12 oj-md-12. Predefined style classes used by Oracle JET components are prepended with oj-.

Note:

As a general rule, you should not override or modify the predefined classes or remove them from components. When defining and adding a custom class to a component, you should exercise caution to ensure that your class does not conflict with the predefined classes already applied to the component.

You can define your custom style classes in the app.css stylesheet of your app. An empty app.css stylesheet is created in your app by default and the link included in the header of the app's pages. You can apply classes to components in the Properties pane in the Page Designer's Design view or in the page's Code editor.

To add a custom style to a component:

  1. Open the page in the Page Designer and locate the component that you want to modify with a custom class.
  2. Type the name of the custom class to apply it to the component.

    When you select the component in the Design view of the Page Designer, you can add the name of the custom class in the class property field, which is located in the All tab of the Properties pane. You can also add the name of the class to a component directly in the page's Code editor.



  3. In the Navigator, expand the css node in your app's resources folder and click app.css to open the stylesheet in the editor.
  4. Define the class in app.css.
Reload the page in the Page Designer to see the class applied to the component.