How to Create Custom Themes in Rollbase

Learn how to easily create a custom theme in Progress Rollbase in this step-by-step guide, and find out how to build low-code responsive apps.

Rollbase is a low-code, rapid application platform which provides a lot of flexibility beyond point and click programming.

For example, each application can be tailored with a point and click built-in theme and the platform also offers the possibility to create your own custom theme.

Main Steps

Here is the basic recipe for creating your own custom themes:

1. Override specific Rollbase CSS rules based on your color palette and overall design

2. Create a Kendo UI custom theme CSS file. This step is optional. Do it only if you feel you need to change the overall design of the Kendo UI widgets—if you only need to override a few rules, for example the primary color, you can simply do that as part of step 1 above.

3. Combine these into a single file and attach it to your application environment as a hosted file:

• Log under the tenant/customer you want to apply the custom theme to (note: this is not possible on master tenant)
• Under current app setting click hosted files
• Choose “New Hosted file” and give it a name (the name of your theme is recommended)—note you can create multiple themes this way

4. Assign CSS file to the tenant (Customer) for applying the theme to all your applications:

• Go to setup home
• Select Account settings (only available if logged under non master tenant)
• In “Appearance”, for the CSS stylesheet, select the name of the style created previously

Background Information

Here is some additional background information you may find useful:

• We have split the CSS rules into 2 files, newuiStructure.css and newui.css.  newui.css contains the rules that someone would likely want to override.  And the rest went into structure, thus providing a smaller file to focus on. Of course, we also have theme specific files.

• The new UI has the following CSS Inclusion order:
  1. newuiStructure.css
  2. newui.css
  3. newui.<theme-name>.css
  4. custom Header or custom Sidebar
• We actually provide the full newui.css as well as theme files in uncompressed format. 
  

  The location of the CSS files are in [Rollbase_Home]/prod1/css/newui/. So you can directly browse the files of your installation from a web browser. You can also see the CSS files used on a particular page and the inclusion order by viewing the page source in your browser.  Another technique is to use the browser inspect tool to understand which rbs-* css rules are used on a particular element.

• Rollbase includes FontAwesome icons, which are scalable vector icons that can be customized for size, color, drop shadow, and anything that can be done with CSS. See the following resources for instructions and examples of using FontAwesome icons:
  • http://fortawesome.github.io/Font-Awesome/cheatsheet/
  • http://fortawesome.github.io/Font-Awesome/examples/

• Tenant or Application Theme:
  1. You can leverage a hosted File to implement a Tenant-wide theme (note that since RB V4.0.0, the hosted file is only an override—before that it was a full replacement)
  2. You can leverage a Custom header or custom side bar to implement an App specific theme (or override some rules from your own tenant wide custom theme)
• We also have a utility function to access the current built-in theme color rb.newui.util.getThemeContentColors. This function can be used for a more complex scenario where one needs to dynamically change some colors on elements.
• Since V4.2, we implemented a utility function to compute a contrast color dynamically: rb.newui.util.getContrastColor. The intent is to help write scripts where one needs to compute the color dynamically and assign it using jQuery on the fly (for example a text color contrasted from a background color).

Please let us know how creating custom themes is working out for you in the comments section below.

Learn More

Looking to learn more about how to a low-code platform like Rollbase can help you build responsive apps? Dig into this post to find out more.