Rebrand Easily with Rollbase White-label Support

Learn about the white-label support offered by Progress Rollbase and the new private cloud option. and see how easy it is to customize a login page.

Rollbase is a low-code platform that helps create all sorts of applications with unprecedented speed and efficiency. With the new features in our latest version, you can now customize the look and feel of your pages more quickly than ever.

Built-in White-label Support in Rollbase

A white label product is a product or service produced by one company (the producer) that other companies (the marketers) rebrand to make it appear as if they had made it.

Rollbase lets you rebrand the look and feel of the platform for your users. We will broadly categorize Rollbase white-label components into two parts:

1. Peripheral pages such as login, password reset, logout etc.
2. Platform pages cover everything else

There are various aspects to customization such as header, logo, background color, organization of the content, themes and more. Rollbase offers built-in support to achieve all these with ease. The white-label support in the platform has been designed as a plug-in model. This prevents any loss of customization during subsequent Rollbase upgrades.

Peripheral Pages

In Rollbase, the peripheral pages are:

• Login—Rollbase private cloud login page
• Logout—This page appears during logout
• Forgot password—This page appears when you click on forgot password link
• Reset password—This page appears when you try to login for the first time

These pages can be easily customized by adding your files to the private cloud installation. Refer to Improvements to Private Cloud White-labeling for more information on this. We will look at how to customize the login page a little further down in this blog.

Platform Pages

We are going to consider any page that shows up post-login and/or portals as platform pages. These pages are customizable by adding your own CSS & JavaScript. Refer to the Rollbase client side customization for more information on this.

Rollbase also offers a variety of Kendo UI themes out of the box for quick customization. If you prefer, the portal pages can also be customized using custom headers and footers and the script component.

Let’s now take a look at how we can customize the login page.

Customize Login Page in Rollbase

Let’s first look at the Rollbase Private cloud Login Page. Doesn’t it look nice and clean.

Now, let’s start customizing this page.

We will first create a personalize folder under the Rollbase folder in the installation. Under this personalize folder, we will create three folders:

• CSS—Houses the customized CSS rules
• JS—Houses the customized JS rules
• Images—Houses the customized images

Create a file, ‘loginPrivate.css,’ and add it to the personalize CSS folder. Add the following rules to the CSS file which will override the default styling on the page. This CSS file is automatically added to the login page on load. The pages have custom CSS classes on the HTML markups so that any customizations can be attempted with ease.

 

Next create another file, ‘loginPrivate.js,’ and add it to the personalize JS folder. Add the code below to the JS file which runs some customizations on HTML elements on document ready. This JS file is automatically added to the login page on load.

 

Then add the image as ‘progress.svg’ to the personalize images folder.

Finally, refresh the login screen after performing these steps and observe the result. Isn’t it amazing how quickly we were able to rebrand the entire look and feel of the login page. The best part is that we can use similar steps to customize any of the peripheral pages.

Customize Pages Easily

In Rollbase, the process of white-labeling has been carefully designed to be less painful and robust. We've just quickly customized a login page, but that's only the beginning. Where do you see yourself using this next? Let us know, along with any feedback you may have, in the comments below.