
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I have the same question. Have you tried to get the list of properties for listbox (filter pane)?

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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;
}

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Try to use:
color: #ffffff !important;
and let me know
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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;
}

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
yes, that's the correct solution! many thanks.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Then close the thread by flag correct answer

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Nicolò,
i saw your script, can you tel me how this reflex in the jason file?
thanks in advance
Lidia
