WordPress.org

1. Chase.W
   Member
   Posted 2 years ago #

   I'll start by saying this is a phenomenal plugin. Great job.

   But I'm trying to find a way to adjust the color of the top cells by column. I figured out how to change the entire row color of the top row, but for my purposes, I need to be able to change the header colors at a cell level (by column). Such as making the first row in column 1 and 2 blue, and in column 3 and 4 red.

   I tried adding column-1 in all sorts of different ways to this line:

   table.wp-table-reloaded thead tr th, table.wp-table-reloaded tfoot tr th {

   But nothing seems to work.

   Is there a way to do this?
   Thanks!

2. TobiasBg
   Member
   Posted 2 years ago #

   Hi Chase,

   try something like
   table.wp-table-reloaded .row-1 .column-1 { color: blue!important; }
table.wp-table-reloaded .row-1 .column-2 { color: blue!important; }
table.wp-table-reloaded .row-1 .column-3 { color: red!important; }
table.wp-table-reloaded .row-1 .column-4 { color: red!important; }
   and put it at the end(!) of all of the CSS.

   And we could better help you, if you post a link to the site where you are trying to style the table, because sometimes there are other things in your CSS that overwrite the just made settings.

   Tobias

3. Chase.W
   Member
   Posted 2 years ago #

   Perfect!

   Sorry about not posting a link, but I'm just working on a local site for now.

   That seems to have done the trick though, thanks for the help!

4. PipSqueak
   Member
   Posted 2 years ago #

   if I have 4 tables, and I use

   table.wp-table-reloaded .row-1 .column-3 { color: red!important; }

   Does that mean that every table I have will have the first row and 3rd column highlighted?

   I am not a css savvy person, may I suggest again having a highlight feature for people like me? :P

5. TobiasBg
   Member
   Posted 2 years ago #

   Hi,

   no, not quite.
   This CSS means that the third cell of the first row of every table will be red (because both row-1 and .column-3 are used in the same selector).

   To achieve what you described, one would need CSS like
   

   table.wp-table-reloaded .row-1 { color: red!important; }
   table.wp-table-reloaded .column-3 { color: red!important; }

   (which is the same as
   table.wp-table-reloaded .row-1, table.wp-table-reloaded .column-3 { color: red!important; })

   If the CSS shall only apply to a certain table (e.g. the one with ID 5), you would replace the table.wp-table-reloaded with table.wp-table-reloaded-id-5.

   I acknowledge the need for easier styling, but so far I have not yet found a good solution. Adding more checkboxes to the admin screen is not the way to go, I believe.

   Hope this helps!
   Tobias

Topic Closed

This topic has been closed to new replies.