Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
Ethel
Creator III
Creator III

sheet title font color css

Hi, it's me again and I'm steel working on our custom theme. I'm trying to change color from default  grey to the white color in the sheet title(container).

that's my css, but it's not working. 

.sheet-title-container {

title: {
main: {
color: #ffffff !important

}

};important!;

}

Please, help!

Thanks a lot in advance!

1 Solution

Accepted Solutions
EliGohar
Partner - Creator III
Partner - Creator III

@Ethel This should work:

 

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

 

 

View solution in original post

8 Replies
saso_1970
Creator
Creator

Hi Ethel , you don't need to use theme for that please go to the settings  and change the color see image 

saso_1970_0-1633689698268.png

 

Ethel
Creator III
Creator III
Author

Thank you! But I really need to incorporate it into my theme.

 

 

 

 

saso_1970
Creator
Creator

Hi, this is correct css:

.sheet-title-container {

color: #ffffff !important;

}

Ethel
Creator III
Creator III
Author

No, for some reason it is not overwriting the default color. The color stays grey 

EliGohar
Partner - Creator III
Partner - Creator III

@Ethel This should work:

 

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

 

 

Ethel
Creator III
Creator III
Author

Thank you very much!!!

shansen
Partner - Contributor III
Partner - Contributor III

EliGohar,

Thank you very much.  This worked for me as well.  Now I am trying to get the little forward & back arrows in the upper RH corner to turn white as well so they have more contrast against a background color.  Do you know how to do that?  Is there a reference that points us to all the objects & parameters we could change in the CSS file?

shansen
Partner - Contributor III
Partner - Contributor III

Well, I learned a lot.

To find out how to change the color of the arrows, I had to inspect through the Developer Tools in Google Chrome / Brave: 3dots/3bars > More tools > Developer tools (or Ctrl+Shift+i) > Click on the dotted square with an arrow ("Select an element in the page to inspect it (Ctrl + Shift + C)"), then click one of the arrows.

Then I had to identify the right way to select that item with a CSS selector.  Here is a good reference: https://www.w3schools.com/cssref/css_selectors.php.  The tid attributes were the key to identifying these forwar/back buttons.  In the end, I added these lines to my theme.css file (the part before the curly braces is the CSS selector:

#sheet-title [tid="btnQuickNavPrevious"], #sheet-title [tid="btnQuickNavNext"] {
color: #ffffff;
}

Hope that helps.