[Plugin: WP-Table Reloaded] Very Long Custom CSS Code

Hi,

no, creating something like table classes or groups or templates is not currently possible, sorry.
I have planned something like that for future versions, but don’t have the time to work on it, currently.

Best wishes,
Tobias

Hi,

good news: Yes 🙂 In WP-Table Reloaded 1.9 (which I plan to release tonight or tomorrow, but if you can’t wait, the development version is the same: http://downloads.wp.xz.cn/plugin/wp-table-reloaded.zip), you can add your custom CSS classes to tables on their “Edit” screens.
It is not as comfortable as I had planned initially (no time…), but this should be what you need 🙂

Best wishes,
Tobias

Hi,

great to hear that you like it 🙂

Best wishes,
Tobias

Hi,

to use it, just assign a different CSS class to each of your different kinds of tables.
So, all tables that shall look the same, get the same CSS class, like “styling-one”. A second group of tables could get “styling-two”.
Just add that word in the “Custom CSS class” text field on each table’s “Edit” screen.

In the “Custom CSS” textarea on the “Plugin Options” screen, you can then use

.styling-one td {
  color: red;
}

.styling-two td {
  color: blue;
}

Instead of (for example):

.wp-table-reloaded-id-1 td,
.wp-table-reloaded-id-4 td,
.wp-table-reloaded-id-5 td,
.wp-table-reloaded-id-8 td {
  color: red;
}

.wp-table-reloaded-id-2 td,
.wp-table-reloaded-id-3 td,
.wp-table-reloaded-id-6 td,
.wp-table-reloaded-id-7 td {
  color: blue;
}

This will really make your CSS much shorter.

Regards,
Tobias

Hi,

in that case, I suggest to apply all CSS that is the same for certain groups of tables to one common class name (like I did in the example above). All CSS that is different between tables that belong to the same class can still use the existing ID based selectors, as those still work of course.

For example, if you have the

.styling-one td {
  color: red;
}

.styling-two td {
  color: blue;
}

from above, but you want the color of a certain row of one of the tables in group “styling-one” to be green, you can simply append

.wp-table-reloaded-1 .row-4 td {
  color: green;
}

So, basically, the new feature can assist in making that part of the CSS shorter, that is the same for all tables.

And: A table can belong to several groups at the same time, just add “styling-one styling-three” to the custom CSS class input field then, for example.

Best wishes,
Tobias

Hi Greg,

if you have a group of tables that shall have that exact styling, you could do the following:

Think of a name for a CSS class, that to you describes what it is for (so that you will later know what is going on), e.g. table-my-layout.
Add that class to each of the tables that shall get that same styling, in the “Custom CSS class” on their respective “Edit” screen.

Then, just change your CSS to use that new custom class:

.table-my-layout .row-1 td {background-color: #bee224!important; font-weight: bold; font-size:1.5em; color: #ffffff}
.table-my-layout .row-2,
.table-my-layout .row-6 {font-weight: bold;}
.table-my-layout .column-1,
.table-my-layout .column-3 {width: 20px; text-align: center;}
.table-my-layout .column-2 {width: 200px; text-align: center;}

Then, you will only have a few rows of CSS, and if a table shall get that CSS applied, you will only need to add the table-my-layout class to its classes, as described above.

Best wishes,
Tobias

Hi Greg,

no problem, you are welcome! 🙂

Best wishes,
Tobias

Hi,

what do you mean with “my own table”?
A database table?

What exactly do you want to achieve?

Regards,
Tobias