Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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
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
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;
}
