Qlik Community

Ask a Question

Qlik Sense Documents

Qlik Sense documentation and resources.

Announcements
Support Cases coming to Qlik Community Oct. 4! Start chats, open cases, explore resources: READ DETAILS

Customizing Qlik Sense Server Hub

TKendrick20
Partner
Partner

Customizing Qlik Sense Server Hub

I'd like to share my technique of doing some modest customizations to the Qlik Sense Server Hub which involve editing the source code:

  1. Changing the favicon
  2. Changing the accent color of the header in the hub
  3. Changing the image at the upper left hand side of the hub

1. Changing the favicon

First, you'll need to make a .ico image which is 16x16 pixels named "favicon". Use a site like https://www.icoconverter.com/ to convert from other image formats. Navigate to the folder located at ~\Program Files\Qlik\Sense\Client and replace the icon named "favicon.ico" with the one you have created.

2. Changing the accent color of the header in the hub

Qlik Sense Server Hub HeaderQlik Sense Server Hub Header

Navigate to the file located at ~\Program Files\Qlik\Sense\Client\hub\hub.css (a minified css file). Find the css class "hub-toolbar-footer" and change the background attribute to the color of your choice. To edit this file, I use the program Notepad++ which you must be able to run as an administrator.

3. Changing the image at the upper left hand side of the hub

Create a .png image which is 346x66 pixels and name the image "sense-server". Navigate to the folder located at ~\Program Files\Qlik\Sense\Client\hub\img\core\logo and replace the image named "sense-server.png" with the one you have created.

 

Things to keep in mind; when editing the code, always keep a backup copy of the unedited files or pictures in case something goes wrong. You will need administrative access to the files mentioned above. To see the changes take effect, you must clear your browser cache. These changes will be removed when you upgrade versions of Qlik Sense. You will have to reimplement these changes after you upgrade, so keep track of your images. These changes have been tested on Qlik Sense Server November 2018 (12.44.1) and are not available on Qlik Sense Desktop.

Comments
tiklam_dynasys
Partner
Partner

Does Qlik officially allow to edit the logo in hug?

0 Likes
TKendrick20
Partner
Partner

I have no evidence we are not allowed to do this in a self-contained deployment.

0 Likes
zbeauchemin
Partner
Partner

 Does this still work with never releases of Qlik? Anyone tried it? 

0 Likes
TKendrick20
Partner
Partner

Hello! I just updated this article so that everything works with Qlik Sense November 2018 (12.44). Not too much is different. Just the paths to the images and the name of the css class. Thanks!

0 Likes
gardenierbi
Creator
Creator

The image "sense-server.png" isn't used anymore.  It's now a SVG file. Any one a idea how to convert the sense-server.png file to a SVG file?

0 Likes
gmenoutis
Partner
Partner

@gardenierbi I've been there too, https://onlineconvertfree.com/convert-format/png-to-svg/ does an excellent job.

gardenierbi
Creator
Creator

Thank you @gmenoutis ! Nice tip.

Bruno_D2BI
Partner
Partner

Hi,

With November 2019, how we can modifiy the image at the upper left hand side of the hub. If I change Qlik-Logo RGB only the left part of the image change. How we can change the rigth part please ?

Thanks a lot.

Regards,

Bruno

0 Likes
robin_heijt
Creator
Creator

@Bruno_D2BI 

Did you ever figure this out?
I am trying to resolve the same problem.

 

Cheers,

 

Robin

0 Likes
Bruno_D2BI
Partner
Partner

@robin_heijt 

Hi ,

Yes I have find.

Stop all of yours Qlik Services.

1. Changing the favicon

First, you'll need to make a .ico image which is 16x16 pixels named "favicon".
Use a site like https://www.icoconverter.com/ to convert from other image formats.
Navigate to the folder located at ~\Program Files\Qlik\Sense\Client and replace the icon named "favicon.ico" with the one you have created.
C:\Program Files\Qlik\Sense\Client\assets\images


For change the name of the TAB in the brower 
Change into HUB.html in ~\Program Files\Qlik\Sense\Client

Change the text between : <title>TEXT TO CHANGE</title>

For change the Logo
Logo C:\Program Files\Qlik\Sense\Client\hub\img\core\logo
Changer le Qlik-Logo RGB

For change the text after the logo :

C:\Program Files\Qlik\Sense\Client\hub
Change the text "Sense® Enterprise" into the file HUB.js

Have a good day.

Regards,

Bruno

Version history
Revision #:
3 of 3
Last update:
‎2019-02-05 12:39 PM
Updated by:
 
Contributors