7 Replies Latest reply: Apr 3, 2017 8:17 AM by Anil Babu Samineni RSS

    Edit filters css color

    Nicolò Cogno

      Hi everybody,

       

      I'm trying to edit the default Sense theme by editing the following files:

       

      C:\Users\User\AppData\Local\Programs\Qlik\Sense\Client\themes\old\sense\theme.css

       

      C:\Users\User\AppData\Local\Programs\Qlik\Sense\Client\themes\old\sense\theme.json


      I'm able to edit the sheets background color, but I'd like to set the filter panel color (I don't know if I explained myself, I mean the color of the rectangular button that you press to filter the reluts in a Table for example).

      What should I do?


      Thanks in advance for your help !


      EDIT:


      I figured out that adding


      .qv-collapsed-listbox{             

        background-color: #2474b6;

      }

       

      at the end of the theme.css file changed the label of the listbox (= filter panel): now the color is blue and not white as the default! Now I'd like to edit the text color and I think I should add something in the theme.json file. My question is: where can I find the objects properties that I can edit? I don't know if I explained myself, so, for example, if I have this

       

      "gauge": {

              "value": {

                  "color": "@titleColor",

                  "fontSize": "42px",

                  "minFontSize": 12,

                  "maxFontSize": 60

              },

              "area": {

                  "backgroundColor": "#eeeeee"

              },

              "pointer": {

                  "color": {

                      "light": "@B90",

                      "dark": "@B20"

                  }

              }

          },

       

      Where are "value, area, pointer" listed? I'd like to find those properties for the listbox in order to edit it!!

       

      Thank you in advance!!!

       

      Messaggio modificato da Nicolò Cogno

        • Re: Edit filters css color
          Martin Michalik

          I have the same question. Have you tried to get the list of properties for listbox (filter pane)?

            • Re: Edit filters css color
              Nicolò Cogno

              Hi,

               

              here's my theme.css file with the edits I did:

               

              .qvt-gridcell.zoom {

                background-color: #FFFFFF;

              }

              .qvt-gridcell .zoomBorder {

                background-color: #FFFFFF;

                border: 2px solid #B3B3B3;

              }

              .qvt-sheet {

                background-color: #FFFFFF;

                color: #595959;

              }

              .qvt-sheet-expand-button {

                color: rgba(102, 102, 102, 0.6);

                background-color: rgba(255, 255, 255, 0.9);

              }

              .qvt-visualization-title {

                font-size: 15px;

                color: #808080;

              }

              .qvt-visualization-subtitle {

                font-size: 12px;

                font-weight: normal;

                color: #808080;

              }

              .qvt-visualization-footnote {

                font-size: 12px;

                font-style: italic;

                color: #808080;

              }

               

              .qv-collapsed-listbox{            

                background-color: #2474b6;       

              }

              .qv-state-count-bar .state.optional {  

                  background: #2474b6;

              }

              .qv-collapsed-listbox .title-wrapper .title{

                color: #ffffff;

                font-size: 15px;

                font-weight: bold;

                text-align: left;

                font-family: Segoe UI, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;

              }

              .kpi .text-wrapper {     

                background: #2474b6 !important;

              }

              .kpi .text-wrapper .title h1.ng-binding{  

                color: #ffffff !important;

                font-size: 15px !important;

                font-weight: bold !important;

                text-align: center !important;

                font-family: Segoe UI, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif !important;

              }

              .kpi .text-wrapper .title h2.ng-binding{  

                color: #ffffff !important;

                font-size: 20px !important;

                font-weight: bold !important;

                text-align: center !important;

                font-family: Segoe UI, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif !important;

              }

               

              .qv-panel-sheet .sheet-title-container{ 

                background-image: url(http://localhost:4848/sense/../resources/img/core/bg.gif) !important;

                  background-size: initial !important;

                  background-attachment: initial !important;

                  background-origin: initial !important;

                  background-clip: initial !important;

                  background-color: rgb(212, 212, 212) !important;

              }

              .qv-panel-sheet .sheet-title-container .sheet-title-text{

                color: #2474b6 !important;

                font-size: 35px !important;

                font-weight: bold !important;

                text-align: center !important;

                text-shadow: 2px 2px 4px black !important;

              }

              .qv-panel-sheet .sheet-title-container .sheet-title-logo-img {

                height: 75px !important;

               

              }

               

              .bootstrap_inside{

                background: #2474b6 !important;

                color: #ffffff;

                /* width: 838px !important; */

                /* height: 100px !important; */

                /* left: +10px !important;  */

                font-size: 15px;

                  font-weight: bold !important;

                  font-family: Segoe UI, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif !important;

                border-radius: 3px !important;  

                border-top-color: rgb(217, 217, 217) !important;

                  border-top-style: solid !important;

                  border-top-width: 1px !important;

                  border-right-color: rgb(217, 217, 217) !important;

                  border-right-style: solid !important;

                  border-right-width: 1px !important;

                  border-bottom-color: rgb(217, 217, 217) !important;

                  border-bottom-style: solid !important;

                  border-bottom-width: 1px !important;

                  border-left-color: rgb(217, 217, 217) !important;

                  border-left-style: solid !important;

                  border-left-width: 1px !important;

              }

              .daterangepicker {

                position: absolute;

                color: inherit;

                background: #2474b6 !important;

                border-radius: 4px;

                width: 278px;

                padding: 4px;

                margin-top: 1px;

                top: 100px;

                left: 20px;

              }

              .qv-object-text-image .qv-media-tool-html.responsive-text.default-font-size { 

                color: #2474b6 !important;

                font-size: 15px !important;

                  font-weight: bold !important;

                  text-align: left !important;

                  font-family: Segoe UI, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif !important;

              }

               

              .checkbox label{  

                color: #2474b6 !important;

                font-weight: bold !important;

                  /*font-family: Segoe UI, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif !important;

                border-top-color: #2474b6 !important;

                  border-top-style: solid !important;

                  border-top-width: 3px !important;

                  border-right-color: #2474b6 !important;

                  border-right-style: solid !important;

                  border-right-width: 3px !important;

                  border-bottom-color: #2474b6 !important;

                  border-bottom-style: solid !important;

                  border-bottom-width: 3px !important;

                  border-left-color: #2474b6 !important;

                  border-left-style: solid !important;

                  border-left-width: 3px !important;

                padding-left: 35px !important;*/

                height: 25px !important;

                vertical-align: middle!important;

                  line-height: 25px!important;

                /*padding-bottom: 7px !important;

                overflow: hidden !important;*/

                display: inline !important;

              }

              .checkbox label:before{

                left: 3px !important;

                  bottom: 7px !important;

              }

               

               

              .bootstrap-inside img{ /

                height: 0px !important;

                width: 0px !important;

              }

               

              .qv-object-pivot-table .qv-object-header {

                border-style: solid !important;

                  border-color: #2474B6 !important;

                padding-bottom: 0px !important;

                border-bottom-style: solid !important;

                border-bottom-width: 4px !important;

                border-spacing: 1px 1px !important;

                padding-top: 3.5px !important;

              }

              /* .qv-pt { Titolo colonne */

                /* height: 100%; */

                /* position: relative; */

                /* background-color: inherit; */

                /* overflow: hidden; */

                /* display: -webkit-box; */

                /* display: -moz-box; */

                /* display: -webkit-flex; */

                /* display: -ms-flexbox; */

                /* display: flex; */

                /* -webkit-box-direction: normal; */

                /* -moz-box-direction: normal; */

                /* -webkit-box-orient: vertical; */

                /* -moz-box-orient: vertical; */

                /* -webkit-flex-direction: row; */

                /* -ms-flex-direction: row; */

                /* flex-direction: row !important; */

                /* max-width:100% !important; */

                /* white-space:nowrap !important; */

              /* } */

              .qv-pt table {

                position: relative;

                max-width:100% !important;

                white-space:nowrap !important;

              }

               

              /*.qv-panel-current-selections li {

                display: none !important;

              }

               

              .qv-object-table .qv-object-header {

                border-style: solid !important;

                  border-color: #2474B6 !important;

                padding-bottom: 0px !important;

                border-bottom-style: solid !important;

                border-bottom-width: 3px !important;

                border-spacing: 1px 1px !important;

                padding-top: 3.5px !important;

              }

               

               

              Hope it helps! Just try to paste the code into your file theme.css and see what happens and if you like it you can keep it or use it as you prefer

            • Re: Edit filters css color
              Anil Babu Samineni

              May be one solution would this

               

              .qv-collapsed-listbox .title-wrapper .title{

                color: white; // or color: RGB(255,255,255)

                font-size: 15px;

                font-weight: bold;

                text-align: left;

                font-family: Segoe UI, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;

              }