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.
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:
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.
In Rollbase, the peripheral pages are:
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.
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.
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:
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.
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.
Manooj Murali is a Principal Software Engineer at Progress. He has been part of the Rollbase development team in Hyderabad for more than two years and has more than 8 years of experience overall in software development. He has led many feature developments like I18N, Marketplace, White-Labelling, JBOSS support, High Availability and more for Rollbase.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.