topic Re: Gradient color in sheet title in css file in App Development

Gradient color in sheet title in css file

Ethel — Tue, 24 Aug 2021 19:24:15 GMT

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!

Re: Gradient color in sheet title in css file

anthonyj — Wed, 25 Aug 2021 05:58:07 GMT

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.

Thanks

Anthony

Re: Gradient color in sheet title in css file

Ethel — Wed, 25 Aug 2021 14:37:41 GMT

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

Re: Gradient color in sheet title in css file

anthonyj — Thu, 26 Aug 2021 02:17:42 GMT

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.

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

Re: Gradient color in sheet title in css file

Ethel — Thu, 26 Aug 2021 02:29:05 GMT

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

Re: Gradient color in sheet title in css file

Ethel — Thu, 26 Aug 2021 02:33:34 GMT

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!!