Oracle Application Express 18: Universal Theme (2 of 4) - Creating Custom Styles
Before You Begin
This 15 minute tutorial shows you how to customize the theme style of your application during run-time using Theme Roller.
This is the second tutorial in Oracle Application Express 18: Universal Theme series. Read them sequentially.
- Oracle Application Express 18: Universal Theme (1 of 4) - Modifying the Theme Style, Header, and Footer
- Oracle Application Express 18: Universal Theme (2 of 4) - Creating Custom Styles
- Oracle Application Express 18: Universal Theme (3 of 4) - Exporting the Theme Style
- Oracle Application Express 18: Universal Theme (4 of 4) - Modifying the Page Layout
Background
Oracle Application Express is a rapid web application development tool for the Oracle Database. Using only a web browser and limited programming experience, you can develop and deploy professional applications that are both fast and secure. Oracle Application Express is available with the Oracle Database, whether it's on-premises or in the Oracle Cloud.
In this tutorial, you use Oracle Application Express Release 18 to customize the style of your application using Theme Roller. Theme Roller is a live CSS editor that enables developers to quickly change the colors, rounded corners, and other attributes of their applications without touching a line of code.
What Do You Need?
Before starting this OBE series you should:
- Complete the preceding tutorial in this series.
- Access to Oracle Application Express Release 18.1 or later.
Customize Your Theme Style Using Theme Roller
In the previous tutorial, Oracle Application Express 18: Universal Theme (1 of 4) - Modifying the Theme Style, Header, and Footer, you changed the header and footer of your application and ran the application. You can now customize the theme style using Theme Roller. The Theme Roller option is displayed in the Runtime Developer Toolbar only if theme styles have been defined.
To customize your theme style, follow the steps below:
- Click Theme Roller in the Runtime Developer Toolbar.
Description of the illustration theme_roller.png - Click Show All to edit the attributes.
Note that Global Colors region is expanded by default.
Description of the illustration show_all_theme_roller.png - Click Header Accent color under Global Colors and change the value to
#E72A30. You can also directly select Red color by clicking on the color chart.
Description of the illustration header_accent_color.png - Update the Background color of the Title Bar:
- Expand Containers.
- Click Background.
Description of the illustration title_bar_bgcolor.png - Enter the value,
#20C0F1.
Description of the illustration title_bar_background.png
Notice the color change in the Title Bar background.
- Update the text color of the Title Bar:
- Click anywhere outside the color selection dialog.
- Click Text.
Description of the illustration title_bar_text_color_selection.png - Enter the value,
#FFFFFF.
Description of the illustration title_bar_text_color.png
Notice the color change in the Title Bar text.
- Update the Navigation, change the Selected state background:
- Expand Navigation.
- For Selected state, click Background.
Description of the illustration selected_state_bgcolor_selection.png - Enter the value,
#1386A9.
Description of the illustration selected_state_background.png
Notice the color change for the selected item in the navigation pane.
A Theme Roller editor appears showing the current theme style settings.
Add Custom CSS to Theme Roller
You can now add custom CSS to your application through the Theme Roller editor. You can update the Header logo font to bold, set a shadow effect for the tree view selection, and set a bold font for the tree labels. To add this custom CSS, follow the steps below:
- In the Theme Roller editor, expand Custom CSS.
Description of the illustration custom_css_selection.png - Enter the following code:
.t-Header-logo-link span {font-weight: bold;} .a-TreeView-content { box-shadow: 4px 0 0 rgba(0,0,0, 0.25) inset; } .a-TreeView-content.is-selected { box-shadow: 4px 0 0 rgba(0,0,0, 0.5) inset; } .a-TreeView-content.is-selected .a-TreeView-label { font-weight: bold; }
Description of the illustration custom_css.png - Click Save As to save the changes.
- In the Save As dialog:
- For Style Name, enter
New Theme. - Click Save. A success dialog appears.
- Click OK to exit the dialog.
- For Style Name, enter
- Click Set as Current to apply the custom theme for your application. A success dialog appears. Click OK.
Next Tutorial
Oracle Application Express 18: Universal Theme (3 of 4) - Exporting the Theme Style