Set CSS classes for individual cells

Hi,

thanks for your post, and sorry for the trouble.

Can you maybe show me an example of one of your tables? I’m a bit amazed that you are making such changes to 100 cells in a table…

Regards,
Tobias

https://www.theymightbegeeks.com/

On that page I’ve included an image of my proposed solution to keeping the interface from getting cluttered and how this could be implemented. There are multiple tables on that page but the first one is a good example. For all the blue cells I could simply have one bit of CSS:

.blue-comics {
	background-color: #0084d1 !important;
	color: #ffffff;
	font-weight: bold;
}

But instead, just for the blue comics, I have:

.tablepress-id-canon-comics .row-6 .column-10,
.tablepress-id-canon-comics .row-6 .column-11,
.tablepress-id-canon-comics .row-7 .column-10,
.tablepress-id-canon-comics .row-11 .column-10,
.tablepress-id-canon-comics .row-16 .column-10,
.tablepress-id-canon-comics .row-20 .column-10,
.tablepress-id-canon-comics .row-21 .column-10,
.tablepress-id-canon-comics .row-25 .column-10,
.tablepress-id-canon-comics .row-31 .column-10,
.tablepress-id-canon-comics .row-35 .column-10,
.tablepress-id-canon-comics .row-39 .column-10,
.tablepress-id-canon-comics .row-45 .column-10,
.tablepress-id-canon-comics .row-48 .column-10,
.tablepress-id-canon-comics .row-51 .column-10,
.tablepress-id-canon-comics .row-57 .column-10 {
	background-color: #0084d1 !important;
	color: #ffffff;
	font-weight: bold;
}

Now add at least one new line every time a new comic issue comes out (roughly 4-6 every month) and you can see how it gets cluttered very fast.

Hi,

thanks for the link, but I can’t see/find a table on that page or site?!

Regards,
Tobias

URL shortener messed up somehow: https://urlgone.com/f4460c/

Hi,

thanks for the link, now I can see the table.

This is indeed one of the more sophistacted tables that I have seen, in terms of styling and coloring. I absolutely understand why you need extra controls for the styling.

Now, unfortunately, it won’t be easy to add such advanced controls as you suggest them, as those not only require advanced JS coding but also fundamental changes in the data structure of tables ??

As an alternative, I therefore suggest to take a look at the TablePress Cell Highlighting Extension that is mentioned at https://www.ads-software.com/support/topic/tablepress-highlight-a-cell-based-on-value?replies=9#post-6554726
With some modifications, you could use that to enter keywords (e.g. #color-black# or similar into the table cells.

Regards,
Tobias

Thanks for the replies and help. I got that plugin working and am using keywords like “color-red” and then placing…

<span class="no">color-red</span>

…at the end of my red cells. Then the CSS for that “no” class is:

.no {display:none;}

Is there any better way of doing this that you can see? Something so that I don’t have to place <span class=”no”>color-red</span> in each cell or even just something shorter? I can’t use the actual contents of the cells because that will still build up too much like my original solution.

Update: My current solution is to use…

<i>color-red</i>

…within my cells and then display:none the <i> tag. Since I use <em> instead of <i> if I want something italicized, I don’t see this being a problem unless there’s a more efficient method that anyone can think of.

Hi,

that’s great progress! ?? Good to hear that this approach will work!

Instead of printing those HTML tags to the page and then having to hide them via CSS, we could simply use some PHP code to not show them at all. For that, please try adding this PHP code to either the PHP file of the Extension or to your theme’s “functions.php”:

add_filter( 'tablepress_cell_content', 'tablepress_remove_extra_keywords', 10, 4 );
function tablepress_remove_extra_keywords( $cell_content, $table_id, $row_number, $column_number ) {
	$cell_content = str_replace( array(
		'#color-red#',
		'#font-bold#',
	), '', $cell_content );
	return $cell_content;
}

In that array, you can simply add all the keywords that you want to use, and those will be removed from the table before it is displayed.

Regards,
Tobias