Qlik Community

App Development

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

Announcements
Coming Aug. 9: New Simplified Authoring for Qlik Sense SaaS – For Details, CLICK HERE
cancel
Showing results for 
Search instead for 
Did you mean: 
Ethel
Creator II
Creator II

Gradient color in sheet title in css file

Hello,

I'm trying to apply my theme and  to color sheet title with gradient color, using css file. This is my code

.sheet-title-container { background-color:[ "#006580", "#FFFFFF" ]!important; }
} And it is not working. 

This code for solid color is working 

.sheet-title-container { background-color: #006580  !important; }
}

What am I doing wrong with gradient color?

Thanks a lot in advance!

1 Solution

Accepted Solutions
anthonyj
Creator III
Creator III

Hi @Ethel ,

The error is in the background function. You just need some extra functions for the gradient.

.sheet-title-container {
background: linear-gradient(90deg, rgba(0,101,128,1) 35%, rgba(255,255,255,1) 100%); !important; }
}

A fantastic tool can be found here.

https://cssgradient.io/

You just need to copy and paste the code once you're happy with the colours and gradient.

Having said that. Qlik Sense has a sheet styling option available in the App Options where you can choose the two different colours that will create the gradient. No need to use CSS to colour the title.

Click on the ellipsis at the top left of your sheet. Then the settings cog.

anthonyj_0-1629870995433.png

 

Thanks

Anthony

View solution in original post

5 Replies
anthonyj
Creator III
Creator III

Hi @Ethel ,

The error is in the background function. You just need some extra functions for the gradient.

.sheet-title-container {
background: linear-gradient(90deg, rgba(0,101,128,1) 35%, rgba(255,255,255,1) 100%); !important; }
}

A fantastic tool can be found here.

https://cssgradient.io/

You just need to copy and paste the code once you're happy with the colours and gradient.

Having said that. Qlik Sense has a sheet styling option available in the App Options where you can choose the two different colours that will create the gradient. No need to use CSS to colour the title.

Click on the ellipsis at the top left of your sheet. Then the settings cog.

anthonyj_0-1629870995433.png

 

Thanks

Anthony

Ethel
Creator II
Creator II
Author

Thank you so much! It worked great and I'll be definitely using this tool a lot! I'm working on our own theme and that's why I have to put all settings in the css file. 

May I ask you to help me to put our company logo to the right side of the sheet title?

Thanks a lot in advance!!!

Ethel  

anthonyj
Creator III
Creator III

You're most welcome.

There's an option right under the colour selectors to add an image. You can also align the image left right or centre. You just need a copy of your logo in a .png or .jpg file.

anthonyj_0-1629944079289.png

In regards to your custom theme. I created one for our company using this website:

https://sensetheme.com/

It's been a great help for me. 

Thanks

Anthony

Ethel
Creator II
Creator II
Author

Thank you, Anthony.

I tried to use this site, but it's not helping since I need to update the sheet title while there  are no examples of them on this site.

I'm aware of the option that allows to add picture for a particular report, but I need to add it to my theme.

I'm trying to use this code in css file, but it's not working

.sheet-title-container {
background: linear-gradient(90deg, rgba(0,101,128,1) 35%, rgba(255,255,255,1) 100%); !important;
background-image:(C:\Users\AAA\Desktop\Qlik Sense Theme\Themefolder\test.png);
}

If you have any ideas, play let me know!

Thanks a lot in advance!

Ethel

Ethel
Creator II
Creator II
Author

Thank you very much!

But I need to add picture to my css file because I'm trying to update sheet title and unfortunately there are no examples on this website. 

I'm using  this code, but it's not working 

.sheet-title-container {
background: linear-gradient(90deg, rgba(0,101,128,1) 35%, rgba(255,255,255,1) 100%); !important;
background-image:(C:\Users\eglozman\Desktop\Qlik Sense Theme\MCW32\test.png);

}

If you have any ideas, please let me now!

Thanks a lot in advance!!