What Are We Trying To Do
In our first installment on Simple Qlik Sense Branding, we spoke specifically about adding logos and sheet images at the application level.
There are also opportunities to white label the Qlik Sense hub. Taking the branding to this level allows to basically replace all the Qlik Sense logos and icons with a set of our choosing. After completing this exercise, the hub will appear to be from your company, not from Qlik.
Danger – Proceed at Your Own Risk
This is not a Qlik supported feature. If you go to Qlik Support with a problem arising from white labeling your hub, they will not be able to help you.
In addition, LivingQlik does not endorse this either. We are providing the steps that worked for us, but you should not take that to mean it will work for you or as an endorsement from LivingQlik to go ahead and implement this on your server.
Temporary Solution – Ultimately when you decide to upgrade the Qlik Sense server to the next service release, I am pretty sure these files get rewritten. This means that to keep this going, you might have to replace these files after each upgrade. I would be interested in a permanent fix for this. I thought about writing a new location within the html but then I realized that likely gets rewritten also.
OK, now that the disclaimers are out of the way…
How to White Label the Qlik Sense Hub
In a nutshell, the favicon and logos that you see in the hub are .ico and .png files located in Program Files. If you replace these files, you will see your replacements in the hub. Here are the steps to follow:
1. Logo File Creation
First, use a graphics program to create the logos you desire. These files will need to be named exactly as below, maintain the correct file type and have the correct pixel width and height. These are the ones I prepped for our example:
Size: 64×64 pixels
Note that it is super-easy to convert a .png to an .ico file at this site: http://convertico.com/
Size: 60×60 pixels
Size: 76×76 pixels
Size: 120×120 pixels
Size: 152×152 pixels
Size: 548×79 pixels
Size: 346×66 pixels
2. Stop the Qlik Sense Server Services
Next, stop all Qlik Sense services. I am not an expert on which service(s) should be stopped or how this will effect a multi-node environment. But I think as a best practice, we would stop the services before changing any of these files.
3. Make a Backup
Please be sure to copy the original files off to a folder somewhere in case something goes wrong. Although I would say this relatively harmless operation, you never know what could go wrong.
4. Replace the favicon
The favicon is the little icon you see on the tab of your browser. Replace the favicon.ico located here (as of 3.1.1): C:\Program Files\Qlik\Sense\Client\
5. Replace the logo files
The logo files have mostly to with the Qlik Sense branding graphics you see in the upper left of the hub, although I am not quite sure where all of them appear. It seems that there are different sizes likely meant to be replaced when the real-estate changes (responsive design). I went ahead and replaced anything that looked like it was server related. I left the desktop versions alone.
As of version 3.1.1, all these files are located here:
6. The hub header stripe
I admittedly did not get this step to work. If you change a hex color in the hub.css file, you should be able to get the color of this stripe to change. I found the class in the css file but was unable to save the file due to security issues on my server. Being that it was already green, I didn’t bother to work through the issue. The hub.css file (as of 3.1.1) is located here:
Change the color located in class qui-toolbar-footer
7. Restart the services, check your results
These are the results I was able to achieve. Please also note that users might need to clear their browser caches to see the new logos.
The basis for this post was provided in this Community Document although the path locations have changed since 3.0.
Are there other interesting opportunities here? Or perhaps a more robust way to do this. I am excited to hear your comments.
Thank you for visiting LivingQlik.