Skip to main content
Announcements
July 15, NEW Customer Portal: Initial launch will improve how you submit Support Cases. IMPORTANT DETAILS
cancel
Showing results for 
Search instead for 
Did you mean: 
rlawton1
Contributor III
Contributor III

App title image in css

 

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; 
}
Labels (2)
1 Solution

Accepted Solutions
EliGohar
Partner - Creator III
Partner - Creator III

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.

View solution in original post

9 Replies
EliGohar
Partner - Creator III
Partner - Creator III

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
Contributor III
Contributor III
Author

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
Partner - Creator III
Partner - Creator III

OK, did you mean this?

image.png

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
Contributor III
Contributor III
Author

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:

Untitled.png

 

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
Partner - Creator III
Partner - Creator III

@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:

image.png

rlawton1
Contributor III
Contributor III
Author

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
Partner - Creator III
Partner - Creator III

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
Contributor III
Contributor III
Author

Thank you so much! that's amazing!

EliGohar
Partner - Creator III
Partner - Creator III

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