Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
usama_waqar94
Contributor
Contributor

QlikSense Straight table background color

Hi Experts,

Please suggest some solution to do header background color in Straight Table (QlikSense native object).

Many Thanks

 

Labels (2)
1 Solution

Accepted Solutions
MartW
Partner - Specialist
Partner - Specialist

@salonicdk28  is right. you need the multi kpi object for this.

this can be located here

MartW_0-1656065813829.png

I would advice reading this post.

https://community.qlik.com/t5/Qlik-Sense-Documents/Dashboard-Design-QS-CSS-MasterClass-video/ta-p/17...

there is an example that fit your needs

Also here is the CSS to get you started

/* -- styling background straight table -- */
.qv-st table {
background: linear-gradient(to right, #25c481, #25b7c4);
color: white !important;
border-collapse: unset;
}

.qv-st-header>tr {
background-color: rgba(255,255,255,0.4);
color: white !important;
}

.qv-st-header .qv-st-total-cell, .qv-st-data-cell, .qv-st-header-cell {
border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.qv-st-data-cell-null-value {
background-color: unset !important;
}

.touch-off .qv-st-interactive:not(.qv-st-selections-active):not(.qv-st-reordering-active) .qv-st-header:not(.qv-st-custom-header) .qv-st-header-cell-search:hover:not(:active):not(.qv-st-header-cell-search-open), .touch-off .qv-st-navigatable:not(.qv-st-selections-active):not(.qv-st-reordering-active) .qv-st-header-sortable:not(.qv-st-custom-header):hover:not(:active):not(.qv-st-header-cell-search-open) {
background-color: #006581;
cursor: pointer;
}

.qv-st-bottom-header .qv-st-total-cell {
border-top: 1px solid #fff;;
color: #fff;
}

 

View solution in original post

5 Replies
salonicdk28
Creator II
Creator II

For this, you need to write styles (CSS) in multi KPI object 

MartW
Partner - Specialist
Partner - Specialist

@salonicdk28  is right. you need the multi kpi object for this.

this can be located here

MartW_0-1656065813829.png

I would advice reading this post.

https://community.qlik.com/t5/Qlik-Sense-Documents/Dashboard-Design-QS-CSS-MasterClass-video/ta-p/17...

there is an example that fit your needs

Also here is the CSS to get you started

/* -- styling background straight table -- */
.qv-st table {
background: linear-gradient(to right, #25c481, #25b7c4);
color: white !important;
border-collapse: unset;
}

.qv-st-header>tr {
background-color: rgba(255,255,255,0.4);
color: white !important;
}

.qv-st-header .qv-st-total-cell, .qv-st-data-cell, .qv-st-header-cell {
border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.qv-st-data-cell-null-value {
background-color: unset !important;
}

.touch-off .qv-st-interactive:not(.qv-st-selections-active):not(.qv-st-reordering-active) .qv-st-header:not(.qv-st-custom-header) .qv-st-header-cell-search:hover:not(:active):not(.qv-st-header-cell-search-open), .touch-off .qv-st-navigatable:not(.qv-st-selections-active):not(.qv-st-reordering-active) .qv-st-header-sortable:not(.qv-st-custom-header):hover:not(:active):not(.qv-st-header-cell-search-open) {
background-color: #006581;
cursor: pointer;
}

.qv-st-bottom-header .qv-st-total-cell {
border-top: 1px solid #fff;;
color: #fff;
}

 

usama_waqar94
Contributor
Contributor
Author

Great .Thank You @MartW . 
After using above mentioned CSS in Multi KPI object. Do we have any option to hide Multi KPI object from sheet or how can we keep the CSS properties over the straight table.

As of now, I have used the CSS code in multi KPI object and if I remove the multi KPI object CSS properties are automatically disappearing from Straight Table native object.

Please suggest.

 

Many Thanks

 

 

salonicdk28
Creator II
Creator II

Hi

To hide multipKPI object, you need to write the below expression in styles to hide it

div[tid="Object ID"] {
opacity: 0 !important;
}

Object ID, you will get by following below steps-

  1. Open a sheet in a Qlik Sense app in your browser
  2. Add /options/developer to the url
  3. Right click on an object and choose "Developer"

lDeveloper menu in Qlik Sense client

Mahamed_Qlik
Specialist
Specialist

Hi Mart,

I am unable to use both in same multi KPI object css section

.qv-st table {
background: linear-gradient(to right, #25c481, #25b7c4);
color: white !important;
border-collapse: unset;
}

.qv-st-header>tr {
background-color: rgba(255,255,255,0.4);
color: white !important;
}

For each change do we need to take multi KPI object? or is there any specific syntax to write above both the code?

Mahamed_Qlik_1-1711516655662.png