[Plugin: WP-Table Reloaded] Header Cell – Individual Colors For Each Column Header Cell Only?

Hi,

yes, you can easily do that with CSS.

As I can see from the source of the site, you already found the FAQ page for the plugin at https://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/faq/. Unfortunately however, you forgot an adjustment. The N in the code must be replaced with the table’s ID.

To then color the table head or other rows, you only need to combine the code from the questions “How can I change the background color of the table head?” and “How can I highlight certain cells or their content?”.

I would suggest that you start with that. A CSS tutorial to learn the basics might also be helpful. Of course, feel free to ask if you have problems with specific pieces of code.

Regards,
Tobias

Hi Tobias -thanks so much for your support. I put in the individual column changes – however they aren’t working individually. My goal is to get the header cell in each of the 4 rows of the table to have a unique color.

Row 1 – Column A background = #ff0000 with font color being #ffffff
Row 1 – Column B background = #003399 with font color being #ffffff
Row 1 – Column C background = #333333 with font color being #ffffff
Row 1 – Column D background = #cc6699 with font color being #ffffff.

This is my latest custom css. What am I doing wrong Tobias?

Thank you sir.

https://flattoptomcom.fatcow.com/music/sound-clips

.wp-table-reloaded-id-4 th, .wp-table-reloaded-id-4 .sorting {
background-color: #000000!important;
}

.wp-table-reloaded-id-4 .sorting_asc, .wp-table-reloaded-id-4 .sorting_desc {
background-color: #333333!important;
}

.wp-table-reloaded-id-4 .row-1 .column-A {
background-color: #ff0000;
}

.wp-table-reloaded-id-4 .row-1 .column-B {
background-color: #003399;
}

.wp-table-reloaded-id-4 .row-1 .column-C {
background-color: #333333;
}

.wp-table-reloaded-id-4 .row-1 .column-D {
background-color: #cc6699;
}

Hi,

you almost got it right! Great! The column selectors (i.e. the cells) are however indexed numerically and not with letters (that’s only on the “Edit” screen).
So, if you use 1, 2, 3, ... instead of A, B, C, ... you will be fine.

You can then actually shorten the code to this (the rest is then not necessary, as it would not affect anything):

.wp-table-reloaded-id-4 .row-1 .column-1 {
  background-color: #ff0000;
}

.wp-table-reloaded-id-4 .row-1 .column-2 {
  background-color: #003399;
}

.wp-table-reloaded-id-4 .row-1 .column-3 {
  background-color: #333333;
}

.wp-table-reloaded-id-4 .row-1 .column-4 {
  background-color: #cc6699;
}

Best wishes,
Tobias

Rock on!! That did it! If I could get your genius guidance on how I can just change the top row font color from Grey to White across the top row header row only – that would be excellent. Its grey and not really showing up well.

Hi,

sure, to change the font color in the head, try this:

.wp-table-reloaded-id-4 th {
  color: #ffffff!important;
}

Regards,
Tobias

Tobias – you rock man – thank you! Looks great!! High marks for you and your plugin. Your support is exceptional. Keep up the great work man. carlos