Qlik Community

New to Qlik Sense

Discussion board where members can get started with Qlik Sense.

Highlighted
Not applicable

Edit filters css color

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

8 Replies
Partner
Partner

Re: Edit filters css color

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

Not applicable

Re: Edit filters css color

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

Partner
Partner

Re: Edit filters css color

I see, thanks for the CSS file. Do you know how to change the color of font for listboxes (filter panes)? The color: #ffffff; parameter from the code below doesn't work

.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;

}

Not applicable

Re: Edit filters css color

Try to use:

color: #ffffff !important;


and let me  know

Re: Edit filters css color

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;

}

Before develop something, think If placed (The Right information | To the right people | At the Right time | In the Right place | With the Right context)
Partner
Partner

Re: Edit filters css color

yes, that's the correct solution! many thanks.

Re: Edit filters css color

Then close the thread by flag correct answer

Before develop something, think If placed (The Right information | To the right people | At the Right time | In the Right place | With the Right context)
Partner
Partner

Re: Edit filters css color

Hi Nicolò,

i saw your script, can you tel me how this reflex in the jason file?

thanks in advance

Lidia