[Plugin: WP-Table Reloaded] Change Background Color of Outer Table

Hi,

as it seems, you were able to get everything to work as intended, correct?

If not, can you explain again, what is not working?
If everything is ok, I’d ask you to mark the topic as “resolved.”

Thanks a lot!
Tobias

Hi,

can you please provide a link to the page with your table?

Regards,
Tobias

Hi,

thanks for the link.

Now, can you explain again, what you want to achieve, or what you feel is not working?

And, you are not using the WP-Table Reloaded plugin for your table, right? (I’m asking because you have asked in a forums thread that belongs to the WP-Table Reloaded support area.)

Regards,
Tobias

Hi,

ok, thanks for the clarification.

Yes, your new theme contains CSS code to make the table transparent/white.
The code for the coloring is however done by HTML (which is not a good way actually), and the CSS thus overwrites this.
To change that, you need CSS like this:

table th {
  background-color: #F90!important;
}
table td {
  background-color: #FFC!important;
}

You are right that WP-Table Reloaded won’t help directly here, but it also is a tool for table management without needing code, so you might want to try it.

Regards,
Tobias

Hi,

thanks for testing this.

For the extending into the sidebar of the WP-Table Reloaded table: That is coming from your theme’s CSS as well, and additionally from the number of columns and its content. The browser has to put them somewhere, so the table gets extended.
This can be reduced to some extent by adding some CSS though, which reduces the padding.

For the code and your existing table: Sorry, I didn’t see that you had chosen different colors. Now, unfortunately, having the first column in a different color than the rest is not possible with CSS and the current HTML markup – there are simply no CSS classes that can be used. This is because (as mentioned above) the table is colored in HTML instead of CSS.
So, if you really want this, you will need to change the default CSS of the theme in the stylesheet.
(By the way: No need to send it to me, I can see it in the source code of your web page.)
To do that, please remove the code I gave you again.
Then go to line 13 of your theme’s style.css.
Remove table, caption, tbody, tfoot, thead, tr, th, and td from the list.
Additionally, add the following CSS code below line 13:

table, caption, tbody, tfoot, thead, tr, th, td { border: 0; margin: 0; padding: 0; vertical-align: baseline; }

After that, you should see the colors that you chose in your editor.

Regards,
Tobias

Hi,

that CSS would be (for WP-Table Reloaded tables):

.wp-table-reloaded th,
.wp-table-reloaded td {
  padding: 4px!important;
}

Just add it to the “Custom CSS” textarea on the “Plugin Options” screen of WP-Table Reloaded.

Regards,
Tobias

Hi,

the “Custom CSS” field can be found on the “Plugin Options” screen which you can reach from inside the WP-Table Reloaded area in the Dashboard. It must not be confused with the plugin editor.
Just go to “Tools->WP-Table Reloaded” and in the small navigation bar in the top/middle of the window, click “Plugin Options”. There, you can find the “Custom CSS” textarea.

For your larger tables from the links: Such tables can be created and managed with WP-Table Reloaded as well. It’s just a matter of styling them (in case the default styling shall be changed). You will however need to find a custom solution for that navigation effect in that link, which shows a different table when a “tab” is clicked. You might however be able to extract the necessary JavaScript code from there.

Regards,
Tobias