[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 tobias,

Have you done something about this issue, my custom css is getting lengthier every day. please help me

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: https://downloads.www.ads-software.com/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

hey,

many thanks and congratulation. you are too good.

Thanks

Hi,

great to hear that you like it ??

Best wishes,
Tobias

thenks,

but now the question is how to use it.. ??
I mean, how to add the parameter in custom css and then pass it into the table edit section.

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

thanks,

but its bit complicated in my case, as i am altering width and colors of rows and columns for different sets tables. Then, how to do it in that case.

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 Tobias
I will have many tables that will require the styling below. What is the most efficient way of making this available to other tables?

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

BTW, a super plugin, and thank you for all the work you have put in.

Cheers, Greg

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

Thank Tobias for your quick response. Exactly was I was hoping for. Please keep up the good work.

Cheers, Greg

Hi Greg,

no problem, you are welcome! ??

Best wishes,
Tobias

Hi,

Can I use my own table dynamically with this plugin.
Please help its very urgent!!!

Hi,

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

What exactly do you want to achieve?

Regards,
Tobias