I am trying to add a background image to my table. I can achieve it by using the css below. However, when I use the CSS, the sorting functionalities of the table get disabled. Is there a way to maintain sorting while displaying a background image?
Thanks for the prompt response, Miloš. I tried, your solution, but in my case, I don't see the image. Would it help if I shared the link? It's member site, but I can create a page and share privately with you.
Yes. I can take a look to try and see why the background image you are using is not visible behind your table.
Please provide me a temporary WP-admin (administrator) user 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 parties.
You can write credentials here just check PRIVATE Reply so nobody can see them except us.
If you can also point me to the table ID that is used for this,
and show me where you are trying to implement the CSS.
I am trying to add a background image to my table. I can achieve it by using the css below. However, when I use the CSS, the sorting functionalities of the table get disabled. Is there a way to maintain sorting while displaying a background image?
.wpDataTable tbody::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("/path/to/image");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
border-collapse: separate;
border-spacing: 0;
opacity: 0.1;
}
Hi, Sabi.
Thanks for reaching out to us.
- Yes, we can use a background image on tables.
I just tested it out with a random free "paper texture" image i downloaded, and i add it to my table with custom CSS :
I first uploaded the image to my Media Library, then i copied the URL of the media file in the CSS.
And added the CSS to table's Customize/Custom CSS.
-
If i try your CSS on the table wrapper element,
the opacity is too low (0.1) so it not clear/visible.
But if i up the opacity value, the table is visible.
-
Now, you can play around with styling, and with our built-in customizations.
For example, if you need the table cells and rows to be transparent,
you can either choose the Material table skin, in Customize/Main/Table skin;
this is a pre-made table skin that has transparent background for cells/rows.
Or you can improvise, with a different table skin that highlights background on some areas,
and you can go in Customize/Row color/Cell color, and set them to be transparent from there.
So, it depends on what design you are going for.
I hope that helps.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi, Sabi.
My apology, i just wanted to add about point #2, the sorting issue.
I am not able to reproduce any kind of sorting issues.
On my tables, the sorting works regardless if i set a background image to tables or not.
Let me know if this helps,
or if you still see issues with sorting.
Thanks.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thanks for the prompt response, Miloš. I tried, your solution, but in my case, I don't see the image. Would it help if I shared the link? It's member site, but I can create a page and share privately with you.
Thanks,
Sabi
Hi, Sabi.
Yes. I can take a look to try and see why the background image you are using is not visible behind your table.
Please provide me a temporary WP-admin (administrator) user 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 parties.
You can write credentials here just check PRIVATE Reply so nobody can see them except us.
If you can also point me to the table ID that is used for this,
and show me where you are trying to implement the CSS.
Thank you.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables