How to change the font color for table headings using Space CSS

[Kris Fininen]

We're trying to change the background and font color for table headings. We are successful using this CSS for changing the background color:

table.confluenceTable th.confluenceTh, table.confluenceTable td.highlight {
	background-color: #000 !important;
}

However, we are unable to change the font color. We tried adding:

table.confluenceTable th.confluenceTh, table.confluenceTable td.highlight {
	background-color: #000 !important;
        color: #fff !important;
}

This only changes the font color in Edit mode. As soon as we Update the white color flashes for a second and is immediately overwritten with the default black color. We must manually change the font color to white to get the white to stick.

What is happening?

[Max Foerster - K15t · Accepted solution]

Hi Kris,

is it a possible quick fix for you to use your CSS inline on that specific page? I just gave it a quick try using a CSS macro from Content Formatting for Confluence and it works like a charm. I'm on a train with a very bad internet connection so can't really test additional approaches right now. But as said, if you're using an app providing a macro to apply own CSS on a page that should do the job. I'm wondering as well why this does not work as expected.

Best, Max

[Max Foerster - K15t]

@Kris Fininen 

I just had the chance to add your snippet

table.confluenceTable th.confluenceTh, table.confluenceTable td.highlight {
background-color: #000 !important;
color: #fff !important;
}

to the space stylesheets of a space in a Confluence 6.14.1 instance and it worked. So we have to look for a different reason in your case I guess. Can you imagine anything in your space/instance interfering here?

Best, Max

[Kris Fininen]

Thanks for the reply but we have many tables and we can use the font color-picker in the toolbar to easily change the font color.

Cheers,
Kris

[Kris Fininen]

Sorry - didn't see your second post. Um, maybe - we're using Confluence Server 6.6.1. Could have been a bug that was fixed? Not sure. The behavior is strange - white in Edit mode but only flashes white when it Updates and then back to black. I really appreciate your help.

Kris

[Max Foerster - K15t]

It took me a few minutes to reproduce the behaviour. I was just looking at already exisiting tables in read and edit mode - they looked fine. 🤷🏼‍♂️ I needed to create a new table and save the page to see it. Will try to have a closer look at it on the weekend :)

Best, Max

[Kris Fininen]

Brilliant! Looking forward to your findings. Have a great weekend.

[Max Foerster - K15t]

@Bill Bailey thanks for that! That's another important piece but only applies to sortable column headers. I added th.confluenceTh p to the code as well as I came across it looking for differently configured table headers. And if we bring all of it together it looks like this:

table.confluenceTable th.confluenceTh, td.highlight, div.tablesorter-header-inner, th.confluenceTh p {
background-color: #000 !important;
color: #fff !important;
}

That should apply to most of your common table headers @Kris Fininen. But I'm not sure at this point how we could influence the arrow elements in the sortable header. Maybe someone else here is a bit more experienced in solving this? I just came across those three elements:

th.confluenceTh.tablesorter-header.sortableHeader.tablesorter-headerDesc
th.confluenceTh.tablesorter-header.sortableHeader.tablesorter-headerUnSorted
th.confluenceTh.tablesorter-header.sortableHeader.tablesorter-headerAsc

Btw, if you use links in your headers you will have to adjust the way they are displayed as well :)

Best, Max

[Kris Fininen]

MAX!! Well done. That did it. I completely missed the div.tablesorter-header-inner in my string of classes. Back to CSS class for me (pun intended!)

Cheers!

[Max Foerster - K15t]

Yay - we solved it! And good pun! ;) Please let me know if you figure out how to influence the sortableHeader graphics! That'd be interesting.

[Bill Bailey]

This is where the browser inspect function is your friend. Took 2 min to see which rule is controlling the header font color (at least in 6.2.4). So here is the rule WE need (because of an installed plugin).

 .wiki-content .tablesorter-header-inner {
color: #fff;
}

The cool part of the the inspect function is you can modify rule settings so you can test changes quickly. And with the inspect function, you see the rules specifically controlling the styling for your instance, where there are plugins or other custom settings installed.

[Kris Fininen]

See reply above ...