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:
- 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 calledclickable
to thediv
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:
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.
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: