Customize Qlik Sense Development.docx

    How to make Qlik Sense Development / Test environments look different than production (QMC and HUB)

     

    During the day I switch back and forth between test / development and production in both the QMC and the HUB. It can be difficult to distinguish the environments (the URLs are different but this can easily be overlooked). My goal was to create visual cue to quickly remind the Qlik developers which environment they were in. Below are examples of the final result:


    QMC_NewLookForTest.png

    HUB_NewLookForTest.png

    These color changes can be accomplished by modifying a single value in the CSS (cascading style sheets). As with most changes, you should backup your original files before making any changes.


    Updating the HUB

    • Remote to the Qlik Sense Application Server (Dev01 in this example)

    RemoteToDev.png

    • In File Explorer navigate to C:\Program Files\Qlik\Sense\Client\hub and create a copy of the HUB.CSS file.

    HubBackup.png

    • Use your favorite editor to edit the CSS file. Note you will likely need to run the application as an administrator to save the changes.

    NotepadPlusAsAdmin.png

    • I used Notepad++ so you can see the line numbers and follow along easier. On line 25 change the background color from #F2F2F2 to #f8ecf2 and save the changes.

    HubColorCssGreyRose.png

    • By default your browser will cache the old CSS so you will need to use cntrl+f5 to refresh browser cache to see the new background color. I had some issues with Internet Explorer displaying the changes so I would recommend testing with Chrome.

     

    Updating the QMC

    • Remote to the Qlik Sense Application Server (Dev01 in this example)

    RemoteToDev.png

    • In File Explorer navigate to C:\Program Files\Qlik\Sense\Client\assets\qmc and create a copy of the QMC.CSS file.

    CreateBackupQMCcss.png

    • Use your favorite editor to edit the CSS file. Note you will likely need to run the application as an administrator to save the changes.

    NotepadPlusAsAdmin.png

    • I used Notepad++ so you can see the line numbers and follow along easier. On line 5721 change the background color from #595959 to #dbb0b0 and save the changes.

     

                             .qmc-main-navigation .qmc-primary-navigation-group-list-item {

                                   background-color: #dbb0b0;

    QMCColorCssGreyRose.png

    • By default your browser will cache the old CSS so you will need to use cntrl+f5 to refresh browser cache to see the new background color. I had some issues with Internet Explorer displaying the changes so I would recommend testing with Chrome.


    Note: If you wish to alter different portions you can use the developer tools in your favorite browser to determine which CSS sheet is control the look you wish to alter. Below is a screenshot illustrating how I located the correct section of CSS to alter in the HUB.css.


    DiscoverCSSwDevTools.png


    I would like to thank Fausto Gonzalez for responding to my question on the community regarding this content!