Select Page

BellaDati Blog

Data Analytics White Labelling Tutorial for Digital Agencies

We salute you digital and market research agency warriors! Crafting custom pixle-perfect reporting for your customers is not always an easy task. I hope, that this tutorial focused mainly on creating pixel perfect custom reports, color schemes, custom log-ins that match yours customer visual identity comes handy.

Light report

To start right away, you just need to go to BelllaDati top right menu and select “Manage domain” then you can find in sidebar “Look&Feel settings” and you can apply your very own CSS stylesheet.

Look&Feel settings

CSS based GUI customizations

Here are the main css elements you can select and customize:

  • Navigation topbar: .topbar
  • Topbar menu items + Icons: .topbar ul li a
  • Search input: .topbar form input
  • Seach icon: #quickSearchForm .icon-search:before
  • Body: body.desktop
  • Dashlets title header: .dashletHeader
  • Other links: a
  • Bottom menu: #bottomMenu
  • Bottom menu links: #bottomMenu a
  • Bottom menu copyright: #bottomMenu .copyright

See the detailed whitelabeling manual here.

Look&Feel settings

Custom login page

Cool part is. That each customer of your can have log-in branded with their unique visual style .You can also set the custom login page for you domain and change it as you need using CSS stylesheet. Let’s enable custom login page in domain settings.

Custom login page

There is already a login page CSS stylesheet which you can completely rewrite.

Custom login page CSS

The most important elements you can customize:

  • body background : body
  • body text: body p
  • form background: #cl_loginForm
  • form buttons: #cl_submit input, #cl_submitHelp
  • form text input: #cl_loginForm input
  • title/domain name:   #cl_title
  • links: #cl_loginHelp a
  • help login input: #pwdHelpLogin

Apart from these you can change almost any other element as you like using the Firefox or Chrome built-in inspector to find the correct class and selector in order to style it.That way you can completely control the visual experience your customers will have.

Re-branding application interface

Whole application can be customized by using CSS styles or built-in design features. First option can be found here. Second option will be discussed in other agency focused tutorials.

Before

Light report

After

Script we used is below. Feel free to customize it an reuse it.

Rebranding log-in page

Well. I like dark. Simple blue. But you can create really anything like RedBull extreme sports theme. Each customer can have own customized log-in to reports.

Custom login page

Again feel free to reuse scrip below. All you need is to upload it into the BellaDati.

As you can see it was pretty easy job to rebrand BellaDati into desired look and feel of your agency. Just try it out! There are no boundaries! Next time we will take a look on the other customization options, that does not require you to use CSS.