There's no way to set this up with table or column settings, so you would need to add a custom CSS class to the column you wish to change the alignment for (in column settings, add a custom class, like "center"), and then in the "Customize" tab above the table, you can define that class with:
.wpDataTablesWrapper table.wpDataTable th.center {text-align: center !important;}
This aligns the header. If you wish to align the data in the cells below, use this:
.wpDataTablesWrapper table.wpDataTable td.center {text-align: center !important;}
If you want to align the entire table you can use the Customize tab and add this code
table.wpDataTable th { text-align: center !important; } table.wpDataTable td { text-align: center !important; }
Buttons can be customized using CSS as well. Here is an example on how to customize the colors
Dear Blazenka Thank you very much for the CSS examples. I added this lines to the customize window, but not all of them worked. Please note that the site I'm working is based on a theme called 'Sequential', and the site is in Hebrew (RTL). Also this is my first table, so I'm still learning how to use the tables plug.
You can see that the style in the wpDataTables editor before adding the CSS is different from the style in the actual site (slides 1 and 2).
After adding the class 'center' to each column (slide 3) the CSS code (slide 4) the header has worked, but not all the button styles worked (for instance the border did not work). For some reason in the table editor the data is now centered but not in the actual site, so this is fine.
Is there a reason for the border not to appear in the site?
Please provide me a temporary WP-admin login for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course we do not provide login data to third party. You can write credentials here just check Private Reply so nobody can see them except us.
Unfortunately we are not able to do much without taking a look inside.
Can you clone your website?
If yes - I'll ask you to install the Duplicator plugin. It will generate a couple of files which you can send me (along with the log-in credentials), and then I can create an exact copy of your website, see what the issue is and try to resolve it.
Please note that the files will be too large to attach to the ticket, so you can upload them via wetransfer.com and just send me the link.
I just installed the plugin and run it and it created 2 files: installer.php and a zip archive. For some reason the zip did not download so I downloaded it from the file manager. Hope this works. Here is the download link.
The button is being changed by styles from "Sequential" theme. There are a lot of styles, and changing them on the button will change all buttons on your website. This is advanced CSS assistance, and unfortunately it's not included in the support. To resolve the issue with centered text in columns, you can use this:
table.wpDataTable th.center {text-align: center !important;} table.wpDataTable td.center {text-align: right !important;}
Thanks, I understand. I thought '!important' would override the template style but it seems is not the case.
An additional question on style:
For my table (ID=6) I've chosen the 'Aqua' skin style, but I was not able to change the font size (I wanted a smaller size and I tried Customize->Font). Is this possible?
I tried to test this also in page_id=2 of the site, where I did some table tests. The first table in the page is in style Material (ID=9), and the second (ID=8) in style Aqua, but the header is not blue (why?).
I wanted Table ID=9 to be the same font size as Table ID=8, but could not get this done, as with Table ID=6.
Sorry for the late response, we're Christian Orthodox, so we had non-working days for Easter.
You should be able to alter the font size in the table settings in the Font tab, but you can change the font size using custom CSS code in the Customize tab in the table settings as well. Here is the code you can use for this
How can I center justify the header labels?
How can I change the button style of the URL?
If by using CSS could you please send men an example for both, and where do I input this CSS code?
Thank you
Hi Marcos
There's no way to set this up with table or column settings, so you would need to add a custom CSS class to the column you wish to change the alignment for (in column settings, add a custom class, like "center"), and then in the "Customize" tab above the table, you can define that class with:
.wpDataTablesWrapper table.wpDataTable th.center {text-align: center !important;}This aligns the header. If you wish to align the data in the cells below, use this:
.wpDataTablesWrapper table.wpDataTable td.center {text-align: center !important;}If you want to align the entire table you can use the Customize tab and add this code
table.wpDataTable th { text-align: center !important; } table.wpDataTable td { text-align: center !important; }Buttons can be customized using CSS as well. Here is an example on how to customize the colors
.wpdt-c a button { color: #215ef2 !important; background-color: rgb(255,255,255) !important; border-color: #215ef2 !important; } .wpdt-c a button:hover { background-color: #215ef2 !important; color: rgb(255, 255, 255) !important; border-color: #215ef2 !important; }Do let us know if you need any further assistance.
Dear Blazenka
Thank you very much for the CSS examples. I added this lines to the customize window, but not all of them worked. Please note that the site I'm working is based on a theme called 'Sequential', and the site is in Hebrew (RTL). Also this is my first table, so I'm still learning how to use the tables plug.
I prepared a presentation with some explanations so you can see if I used the code properly. You can see the presentation here: https://drive.google.com/file/d/1LU6Q1yFl04MOHP7kpubVRFsuCNbGxbUM/view?usp=sharing
You can see that the style in the wpDataTables editor before adding the CSS is different from the style in the actual site (slides 1 and 2).
After adding the class 'center' to each column (slide 3) the CSS code (slide 4) the header has worked, but not all the button styles worked (for instance the border did not work). For some reason in the table editor the data is now centered but not in the actual site, so this is fine.
Is there a reason for the border not to appear in the site?
Marcos
Hi Marcos
Please provide me a temporary WP-admin login for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course we do not provide login data to third party. You can write credentials here just check Private Reply so nobody can see them except us.
Hi,
Is there other way to do this? the site does not belong to me so I'm a bit uncomfortable sending an admin password.
Maybe you could use a remote session or something like that?
Thanks
Marcos
Hi Marcos
Unfortunately we are not able to do much without taking a look inside.
Can you clone your website?
If yes - I'll ask you to install the Duplicator plugin. It will generate a couple of files which you can send me (along with the log-in credentials), and then I can create an exact copy of your website, see what the issue is and try to resolve it.
Please note that the files will be too large to attach to the ticket, so you can upload them via wetransfer.com and just send me the link.
Thanks,
I just installed the plugin and run it and it created 2 files: installer.php and a zip archive. For some reason the zip did not download so I downloaded it from the file manager. Hope this works. Here is the download link.
https://wetransfer.com/downloads/d54a86755f26959ff8a93e571ccd14ab20210416091903/3db37caec2138d81b9f241659299d60620210416091928/b37797
Let me know if it succeeded,
Marcos
Hi Marcos
Thank you
Could you please tell us where you added the CSS (we can't see it in Custom CSS in tables, or in wpDataTables settings), and on which page?
Hi. sorry for the delay in the answer
I added the CSS in the Customize->Custom CSS of table ID=6, Lib Catalog as you can see in the picture
Marcos
Hi Marcos
Thank you. I forwarded this to our developers to take a look.
I will update you as soon as I hear back from them.
Thank you for your time and patience.
Could you tell us on which page did you add the table, where can we see this behavior on the frontend?
It is on page_id=1786
a screenshot is attached.
I you are already on it, I was not able to change the font-size of the table
Thanks
Hi Marcos
The button is being changed by styles from "Sequential" theme. There are a lot of styles, and changing them on the button will change all buttons on your website. This is advanced CSS assistance, and unfortunately it's not included in the support. To resolve the issue with centered text in columns, you can use this:
table.wpDataTable th.center {text-align: center !important;}
table.wpDataTable td.center {text-align: right !important;}
Thanks, I understand. I thought '!important' would override the template style but it seems is not the case.
An additional question on style:
For my table (ID=6) I've chosen the 'Aqua' skin style, but I was not able to change the font size (I wanted a smaller size and I tried Customize->Font). Is this possible?
I tried to test this also in page_id=2 of the site, where I did some table tests. The first table in the page is in style Material (ID=9), and the second (ID=8) in style Aqua, but the header is not blue (why?).
I wanted Table ID=9 to be the same font size as Table ID=8, but could not get this done, as with Table ID=6.
Thanks
Marcos
Hi Marcos
Sorry for the late response, we're Christian Orthodox, so we had non-working days for Easter.
You should be able to alter the font size in the table settings in the Font tab, but you can change the font size using custom CSS code in the Customize tab in the table settings as well. Here is the code you can use for this
.wpDataTablesWrapper table.wpDataTable tr.even td, .wpDataTablesWrapper table.wpDataTable tr.odd td { font-size: 11px !important; } .wpDataTablesWrapper table.wpDataTable th { background-color: blue !important; font-size: 11px !important; }I hope this helps, do let us know if you need any further assistance.
Thanks very much. No rush.
I'll try this CSS code.
Probably i'll returning to you as i learn how to use the table plugin.
Marcos