Table Footer Color

[tomm]

Is it possible to change the color of the table footer?

[WidleStudioLLP]

Hey @tomm,

Retool doesn’t provide a built-in option to change the table footer color, but you can easily customize it using custom CSS.

Here’s an example:

._retool-table6 ._main_hk3l6_1 {
  background-color: #eecff3;
}

Just replace table6 with the actual name of your table.

Screenshot for reference:

Let me know if you’d like any more help with this!

[tomm]

Thank you very much. Is there also a way to change the text color using CSS? I apologize for the questions. I'm not too versed in CSS.

[WidleStudioLLP]

Hey @tomm,

Retool allows you to change the text color directly using the style settings.

As shown in the reference image below, you can:

• Apply text color to table records using Cell text
• Change header text color using Header text

Let me know if you need any further assistance — happy to help!

[tomm]

Sorry, I wasn't being specific. I meant is there a way to change the footer text color.

[WidleStudioLLP]

@tomm,

Yes — you can change the footer text color using Custom CSS.

Here’s a reference image:

Let me know if you need any further assistance — happy to help!

[tomm]

I'm not sure what I am doing wrong, but inserting that code did not do anything.

[WidleStudioLLP]

@tomm,

To apply CSS to the footer text, first inspect the table in your browser to identify the footer text class. Then, replace that class in your CSS code with the one you found. This will allow you to change the footer text color as needed.

[tomm]

That was what I did.

[WidleStudioLLP]

@tomm,

apply the font color to the table footer using the _rowCount_hk316_12 class.

Let me know if you need any further assistance — happy to help!

[tomm]

I have tried both ways and neither works.

[WidleStudioLLP]

@tomm

Could you please share your Custom CSS code along with a screenshot for reference?

[tomm]

The CSS code I am using is:

._rowCount_hk316_12 {
  color: #FFFF;
}

Here is a screenshot of the table. I want to make the text and buttons in the footer white.

By the way, the table is in a stack container that scrolls horizontally along with other tables.

[WidleStudioLLP]

@tomm

@tomm

._rowCount_hk316_12 {
  color: #FFFF;
}

There’s a small mistake here — the color code must be either 3 or 6 hex digits, but you’ve entered 4.

You can correct it like this:

._rowCount_hk316_12 {
  color: #FFF;
}

or

._rowCount_hk316_12 {
  color: #FFFFFF;
}

[tomm]

I tried both

._rowCount_hk316_12 {
  color: #FFFFFF;
}

and

._rowCount_hk316_12 {
  color: #FFF;
}

and it still did not work.

[WidleStudioLLP]

@tomm

Strange that the previous references didn’t work for you.
Here’s another CSS snippet you can try to change the table footer text color in Retool:

._retool-sampleTable > div ._main_hk3l6_1 {
  background-color: #0E0E0EAD;
}

._retool-sampleTable > div ._rowCount_hk3l6_12 {
  color: #FFFFFF;
}

Here’s the reference image:

[tomm]

This did the trick.

Is it also possible to change the footer icon color?

[WidleStudioLLP]

@tomm

Yes — you can change the footer icon colors by targeting the icon’s class in your CSS.

Here’s an example snippet:

._retool-sampleTable > div ._main_hk3l6_1 {
  background-color: #0E0E0EAD;
}

._retool-sampleTable > div ._rowCount_hk3l6_12 {
  color: #FFFFFF;
}

._retool-sampleTable > div ._icon_1qmla_47 {
  color: #FFFFFF;
}

Here’s a reference screenshot:

[ChiEn]

@tomm Hi, just checking in to see if you still need help. Were you able to get the table footer color figured out?

[tomm]

@ChiEn Yes, I did using CSS and plenty of help from @WidleStudioLLP. I do understand that using CSS may not be the best, but it worked for now. I think allowing the color of the footer to be changed would be a good feature to add. I would also like to see a way to set the width of columns using numbers, but that's for a different discussion. Thanks for checking in.