App title image in css

[rlawton1]

I am trying to set a title image using css within my custom theme.

I have tried the following with no luck.

Anybody have any suggestions?

.sheet-title-logo-img {
background-image: url("https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F...");
}

.sheet-title-logo-img .ng-scope {
background-image: url("https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F...");
}

.sheet-title-logo-img .ng-scope {
background-image: url("https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F...") !important; 
}

[EliGohar]

Hi,
Please share more info.
Are you going to use this image as a title per all the charts in your application?
Do you plan to involve the image with text (or just the image?)

[rlawton1]

This is just for sheet headers for all sheets within the app. It will just be an image with no text. I know i can set this all within the 'app options' settings in app overview but i would like to set it within the css for my theme.

[EliGohar]

OK, did you mean this?

I implemented the URL image you provided in the chart's title in my customized application

This is the CSS code:

.qv-object .qv-object-title .qv-object-title-text {
    padding-left: 10px;
    font-size: 19px;
    font-weight: 100;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
    background-image: url(<a href="https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F" target="_blank">https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F</a>...);
}

Pay attention that I had to insert fake text title but it will never be displayed because I gave it transparent color 🙂

Regards,

Eli.

[rlawton1]

Thanks but that's not the part i'm trying to change. I'm trying to change the sheet title not he object title. The sheet title can be configured here:

I have managed to change the background and font colours using the following CSS classes:

.sheet-title-container {
background:-moz-linear-gradient(left, #a31a08 0%, #d81e05 100%);
background:-webkit-linear-gradient(left, #a31a08 0%, #d81e05 100%);
background: -o-linear-gradient(left, #a31a08 0%, #d81e05 100%);
background:-ms-linear-gradient(left, #a31a08 0%, #d81e05 100%);
background:linear-gradient(to right, #a31a08 0%, #d81e05 100%);
border-bottom: 1px solid rgba(0,0,0,0.1);
}

.sheet-title-text {
color: #ffffff !important;
}

Now i just want to set the image as well.

[EliGohar]

@rlawton1 , my bad, didn't notice that you meant to the sheet title.

Anyway, it's also the same CSS code, try to add to the .sheet-title-text class the following code:

background-image: url("<a href="https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F" target="_blank">https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F</a>");
background-repeat-x: no-repeat;
background-size: contain;

 Result:

[rlawton1]

Thanks fort the quick reply.

I've added the code to the .sheet-title-text class as suggested but it's still not showing the image.

Can you see what i've done wrong? thanks

.sheet-title-text {
color: #ffffff !important;
background-image: url(<a href="https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F" target="_blank"> https://www.qlik.com/us/-/media/images/qlik/global/qlik-logo-2x.png?h=94&w=308&la=en&hash=12D34BE69F...>...);
background-repeat-x: no-repeat;
background-size: contain;
}

[EliGohar · Accepted solution]

I understand the problem, when I'm posting the CSS code here it adds some extra text to the URL and makes a mess.

I uploaded the code in a text file, try to copy and paste it into the .sheet-title-text class.

[rlawton1]

Thank you so much! that's amazing!

[EliGohar]

you welcome, I attached the file again as a zip because the no txt files are allowed here 🙂