Skip to main content

App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Qlik Cloud Maintenance is scheduled between March 27-30. Visit Qlik Cloud Status page for more details.
Showing results for 
Search instead for 
Did you mean: 
Contributor II
Contributor II

Qlik Themes - CSS Styling of Object Title (Straight & Pivot table renders differently)


We have custom themes on our Qlik Saas tenant built by myself.  I'm not wizz at CSS but know some basics and making use of the community has helped me build a theme for our company.  When i apply it, the rendering of the Objects Title for a Straight or Pivot table is indented at the left hand side, see below.  All other objects the title width and background colour fits the full length of the object and i dont understand why nor can i correct it.  Is it the build of those objects within Qlik itself that prevents this or something in my code? 

Qlik Theme - Table Titles.png

Sample of the CSS


:root {
  --colour1: 		#1976D2;
  --colour2:		#F4792C;
  --image: 			url(images/logo.png);
  --white: 			#FFFFFF;
  --black: 			#000000;
  --grey:			#B3B4B2;	

/* Sheet*/
.qvt-sheet {background: var(--white) !important;}
/* Document border*/
.qv-panel-stage .flex-row {background-color: var(--colour2);}
.qv-panel-sheet {border-radius: 3px; margin: 5px;}

.qv-object .qv-object-title{background-color: var(--colour1); margin-top: 5px}
.qv-object .qv-object-title-text{margin-left:auto; margin-right:auto; color: var(--white);}

/* Sheet Titles */
.qv-panel-sheet .sheet-title-container {background: linear-gradient(to right, var(--colour1), var(--white));}
.qv-panel-sheet .sheet-title-text {background-image: var(--image); background-repeat: no-repeat; background-size: contain; background-position: right;}



Any ideas?



Labels (3)
0 Replies