Alternate row colors

Hello,
Can you please check do all the cells have the same text color when you load the Preview of this Table in our Plugin’s back-end, and this issue only happens on front-end?
If that is the case, wpDataTables is a WYSIWYG (What You See Is What You Get) concept-based plugin.
This means that the table should look the same both in the back-end and in the front-end.
If your front-end table looks and behaves differently than in the back-end, this usually implies that there is another plugin (or the current theme) that’s changing the behavior of our plugin.

Can you please change the theme and see if the issue is resolved?
If not, then please deactivate all other plugins except for our plugin, refresh the page where the issue is, and see if it is resolved (it should be).
If it is, then start activating other plugins one by one, and after each activation refresh the page to see if the issue reoccurred.
Once it does reoccur, you will have found the plugin causing the issue.

When we inspect the HTML and CSS on your Page, it seems this particular CSS is overriding our Table’s ‘odd row’ cell color :

.main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even), #top .main_color .avia-data-table.avia_pricing_minimal td {
color: #777777;
}

That code is coming from this CSS file :
“https://rrcpc.org.uk/wp-content/uploads/dynamic_avia/avia-merged-styles-34103314bb6eb9183ba3abdf06550d76—659840e2e5fda.css”.

We are not sure if this might be a file from your Theme, or a Plugin, or if you added a Custom CSS file from your end on your Site.

You can override this CSS conflict with this :

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td {
color: #000000 !important;
}

Add it to the Main wpDataTables Plugin settings/Custom JS and CSS/Custom CSS;
Or you can add it to the WP Page directly as additional CSS, as you wish.

We hope that helps.

Thank you for that very comprehensive reply! It will require a rather comprehensive look at files at my end…which may take a little while ??

The theme is Enfold, a premium theme which includes it’s own page-builder ‘Avia’. I can’t really invoke another theme because the table is placed within an Avia builder componenet. You may well be right that there is a conflict between Avia styles and WPTable styles, with Avia overriding. But I’ll have to look into it when I’ve more time.

Appreciate the thorough investigation, I’ll reply as soon as I can.

regards
HJ

Hello again,
No problem, we are happy to help.
You most probably won’t need to go through the trouble of isolating the main root of this conflict, since we seem to have found the CSS solution as a fix for you. We tested it directly on your Page’s HTML and CSS and it works in a preview, so it should work when you apply it to your Page.

Please try this CSS as a fix :

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td {
color: #000000 !important;
}

( Of course, you can change that color value to any other color you need)
Add it to the Main wpDataTables Plugin settings/Custom JS and CSS/Custom CSS; and check how it looks, it should fix the issue.

Or you can add it to the WP Page directly as additional CSS, if that is better/easier from your end, as you wish.

Also, any CSS you add will not be affected by our Plugin’s Updates, it will remain the same.
We hope that helps.
Thank you.

Hi again,

Many thanks for that! But a couple of follow-up questions:

1. Is that a global fix?…because it doesn’t seem to reference a particular table. Here we are just talking about fixing the Farm Bookings table, not any table other table we have or might create in the future. ?

2. The color fix appears to have changed everything beyond the first row – that still has a heading which is in RED (#FD453B). The other month headings had also been styled in red, but now the fix has been applied all those following month headings are in BLACK. …and yet when you look at the WP table admin, the month headings are in RED.

So it seems the fix isn’t being very selective, and is overriding the color definitions made in the table build? Except for the very first row.

Yours confused….!

Hello again,
You’re welcome; we are happy to advise as much as our Lite Support can cover.

Yes. This CSS fix we sent you was just a basic Custom CSS without ‘targeting’ a specific Table ID, or specific Table row/cell, etc.

If you need to insert a CSS just for a specific Table ID ( in this example ID 6), you can do this :

#wpdtSimpleTable-6 > tbody > tr:nth-child(7) > td {
… your styles here…
}

That way you can make different style for each Table.

From your initial description of the issue, we got the impression that you just needed all the rows/cells in your Table to have the same font color, and we provided that CSS fix.

But now, after the follow up/update from your end, it seems that you have set specific colors on each of the “month” merged cells, such as “MARCH”, “APRIL” and so on.

That complicates the situation/issue.

Basically, these are not “headers” as our Plugin renders it. They are just being rendered as ‘standard rows and cells’ via HTML.
For example, if you inspect the HTML on your Page, you will see that only the row at the top is a Header element, the “FEBRUARY” as on this screenshot :

So, this would be the CSS selector for the Header Row :
“.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th” (table header element);
On the other hand, for your other month values beneath that, our Simple Table is only placing them as regular cell data. ( even though you are merging the cells)
For example, for the “MARCH” cell, a selector for that specific cell with the Table ID would be ( if we use the table ID, then row with “n-th child” and table data) :

#wpdtSimpleTable-6 > tbody > tr:nth-child(7) > td {
    color: red !important;
}

So, if you need to override the Theme conflict with Custom CSS, and you need to ‘target’ a specific Table ID, you can add the Table ID like that to your Selector;
And to target a specific row, you can use that “n-th child” selector.
Just add another line for each specific row with the right ‘child number’ for the element.
Please note a certain level of CSS knowledge is needed, so you can search for some additional tutorials online on places such as this Page from W3Schools.

Other than that, there is another way how you can add a “DIV” html container in a cell and add a custom CSS class which can be called later as a ‘global CSS class” in the Plugin settings.

Let’s say if we wanted a Custom Width property for some Column.
You can add a CSS class directly in a cell of a table,? and then you can edit, for example, for cell number 1 :
<div class=”abc”>Some text 123</div>

Then on the front end we would add this custom CSS:
td .abc {
? ?width: 350px;
}

and this will change the column width on the front-end.

It is a similar method to do any CSS rules that you wish to apply to a specific cell.

–

If you wish to add the same CSS to all tables, you can add this to main plugin settings/Custom JS and CSS/Custom CSS.
Or, to target specific Table ID, you can use the selector as we mentioned above, to add it like this :

#wpdtSimpleTable-6 td .customClassName{
    color: green !important;
}

Or, you can add CSS only to front-end Page where you have some Table, without adding it to our Plugin’s settings.

Custom code needs to be applied to the page where the booking form is. Depending on what you’re using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

If you need help with adding custom CSS to the page, please take a look at this article.

We hope that helps.

If not, then you would need to try to find which CSS of your Theme is overriding our Table’s Styles, as we mentioned at the beginning, and to ‘comment out’ the CSS code which is causing the issue for the Table not being the same between Back-End and Front-End.

Thank you.

Well…thank you for that very thorough explanation!…. above and beyond the call of duty for the Lite version I’m using! Also, I’m ashamed to say, somewhat above my paygrade ?? However, I will try and work on those CSS suggestions when time allows (this isn’t a full time project for me!)

I appreciate your diligence and support, makes WPDataTables highly recommendable.

Kind regards
HJ

Hello,
Just a small follow up- apologies for taking so long to reply.
I am glad these instructions are useful.
We tested all the CSS directly on your Page in the browser inspector tool, so it should work when you implement it as advised.

If anything else comes up, please don’t hesitate to create new Posts.
We are happy to help. ??

And thank you for the kind words.