topic Re: sheet title font color css in App Development

sheet title font color css

Ethel — Thu, 07 Oct 2021 15:20:17 GMT

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!

Re: sheet title font color css

saso_1970 — Fri, 08 Oct 2021 10:42:57 GMT

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

Re: sheet title font color css

Ethel — Fri, 08 Oct 2021 18:54:07 GMT

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

Re: sheet title font color css

saso_1970 — Sun, 10 Oct 2021 15:23:36 GMT

Hi, this is correct css:

.sheet-title-container {

color: #ffffff !important;

}

Re: sheet title font color css

Ethel — Mon, 11 Oct 2021 10:53:00 GMT

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

Re: sheet title font color css

EliGohar — Mon, 11 Oct 2021 12:10:04 GMT

@Ethel This should work:

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

Re: sheet title font color css

Ethel — Tue, 12 Oct 2021 13:27:29 GMT

Thank you very much!!!

Re: sheet title font color css

shansen — Thu, 14 Mar 2024 21:20:10 GMT

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?

Re: sheet title font color css

shansen — Fri, 15 Mar 2024 03:25:13 GMT

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.