Confused about adding css class

Resolved TeqToo
(@teqtoo)

8 years, 4 months ago

I have read the documentation on how to highlight certain cells and their content, and I am still confused by how to do this. I am creating a table in which I want the background color of the rows that contain nothing but the State or Province names to be #c5eaf5. Because the table may need to be changed from time to time – States and Provinces added, deleted, etc. I don’t want to use the Custom CSS solution specifying row numbers, because the row numbers may change when that happens. But I am having trouble with creating a new “css class” that I can apply to those rows. Can you help?

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 4 months ago

Hi,

thanks for your question, and sorry for the trouble.

Doing this just with CSS code is indeed not possible, and adding an “Extra CSS class” to the table will also not help. Instead, you would need an approach like https://wordpress.org/support/topic/highlight-a-row-based-on-value/

Regards,
Tobias
Thread Starter TeqToo
(@teqtoo)

8 years, 4 months ago
OK. So I’ve downloaded the extension and activated it. To test it, I added the following to Custom CSS
```
.tablepress-id-1 .row-highlight-California td {
	background-color: #c5eaf5 !important;
}
```
and placed this shortcode on my page

[table id=1 row_highlight="California" /]

It’s not highlighting the row with the State name “California” in it. Did I do something wrong?
Also, will the plugin look for a term like <strong>? Because my state name rows are all in bold. As I continue to create the list, I may have rows that will contain the name of the state, but not be intended to be a state name row – like “Virginia County” under the Virginia State listings. If it will look for <strong> I could cover all the State Name rows with one value, instead of having to type in each of the state names in the codes and the shortcode.
- This reply was modified 8 years, 4 months ago by TeqToo.
- This reply was modified 8 years, 4 months ago by TeqToo.
- This reply was modified 8 years, 4 months ago by TeqToo.
Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 4 months ago
Hi,

please try
```
.tablepress-id-1 .row-highlight-california td {
	background-color: #c5eaf5 !important;
}
```
In the CSS, the highlight term has to be all-lowercase.

Yes, <strong> should also work. The CSS code line would then be
```
.tablepress-id-1 .row-highlight-strong td {
```
as all special characters are stripped.

Regards,
Tobias
Thread Starter TeqToo
(@teqtoo)

8 years, 4 months ago

Oddly enough, it wouldn’t work with “strong”. It also wouldn’t work with the state name, until I removed the <strong> tag from the state name in the table. Now I don’t know which is worse – having to enter each state name separately, and having all the state names unbolded, or just leaving the state names in bold and forget about the idea of changing the background color on those rows.
Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 4 months ago
Hi,

ah, hold on. I forgot that the Extension does indeed do full cell matching by default. But there’s another Shortcode parameter to the rescue:
```
[table id=1 row_highlight="strong" row_highlight_full_cell_match=false /]
```
Regards,
Tobias
Thread Starter TeqToo
(@teqtoo)

8 years, 4 months ago

GENIUS! That worked! Thank you, thank you, thank you! I’ll definitely be buying you a cup of coffee!

Plugin Author Tobias Bäthge
(@tobiasbg)

8 years, 4 months ago

Hi,

no problem, you are very welcome! 🙂 Good to hear that this helped!
And thanks for wanting to donate, I really appreciate it!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Confused about adding css class’ is closed to new replies.