Do not input private or sensitive data. View Qlik Privacy & Cookie Policy.
Skip to main content

Announcements
Join us in NYC Sept 4th for Qlik's AI Reality Tour! Register Now
cancel
Showing results for 
Search instead for 
Did you mean: 
SantGeo
Contributor II
Contributor II

Qlik Sens Theme to style a container tab to display active vs non active tabs.

Hi, I am building a Qlik Sens theme to style and format container tab to show one color when active and another when inactive using CSS Code. Below is some of the codes I used with no success does anyone know how to achieve this.

Thanks. 


/*Container tab*/
.qv-object-nav .tab-container .tab {
background: #b0afae !important;
color: #ed0510 !important;
font-size:16xp;
border:1xp solid #000;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

 

/* Container tab active*/

.qs-container .qsc-tab.active {

background-color: #f2f2f2;
font-family: 'Segoe UI Bold';
color: #ffffff !important;
border: 2px solid #ed0510;

Labels (1)
1 Solution

Accepted Solutions
saso70
Partner - Creator II
Partner - Creator II

Please check the code:

.qs-container .qsc-tab-row .lui-tabset {

background: red;
}

.qv-client:not(.qv-card) .qs-container .qsc-tab-row {

background: red;
}

lui-tab.lui-active, .lui-tab.lui-focused, .lui-tab:focus {

background: white !important;
}

View solution in original post

7 Replies
saso70
Partner - Creator II
Partner - Creator II

Please check the code:

.qs-container .qsc-tab-row .lui-tabset {

background: red;
}

.qv-client:not(.qv-card) .qs-container .qsc-tab-row {

background: red;
}

lui-tab.lui-active, .lui-tab.lui-focused, .lui-tab:focus {

background: white !important;
}

SantGeo
Contributor II
Contributor II
Author

Thanks! @saso70 it works. I have another question. I want to add an image as logo from a folder residing on the server do you have an idea how to go about it.

Thanks. 

saso70
Partner - Creator II
Partner - Creator II

Hi please be more specific. Where exactly you want to add logo? Maybe screen shot of the area in your app will help me 

saso70
Partner - Creator II
Partner - Creator II

Please mark previous answer  like correct.for the rest people to know if they need help.

SantGeo
Contributor II
Contributor II
Author

@saso70  on the sheet title bar 

SantGeo_0-1678968778304.png

saso70
Partner - Creator II
Partner - Creator II

SantGeo
Contributor II
Contributor II
Author

@saso70  Thanks ! But I am trying to achieve that through a Custome theme using CSS Code.