Hi,
thanks for your post, and sorry for the trouble.
What would you like to see instead of these buttons then? You would need something to click on to expand the collapsed data…
Regards,
Tobias
Something more discreet/ Maybe a triangle/carrot. Is there a list of options?
Hi,
no, sorry, I don’t have such a list. You are pretty much free in what to show there, as this is created with pure CSS code, which looks like
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
top: 8px;
left: 4px;
height: 16px;
width: 16px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
-webkit-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: 0 0 3px #444;
box-shadow: 0 0 3px #444;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-align: center;
font-family: 'Courier New', Courier, monospace;
line-height: 16px;
content: '+';
background-color: #31b131;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
content: '-';
background-color: #d33333;
}
So, basically, the buttons are drawn using the border lines of a small text block with rounded corners. All this is in the responsive.dataTables.css CSS file. To overwrite this, you could add corresponding CSS code to the “Custom CSS” text field on the “Plugin Options” screen of TablePress.
Regards,
Tobias
Okay thank you. It should be easy then to replace them with unicode characters instead of css visuals stylings right?
I want to use these two symbols or equivilant, so how would I override it to place them with these.
Replace green button with https://unicode-table.com/en/1F892/
Replace red button with https://unicode-table.com/en/1F893/
Hi,
correct. You would have to set them in the content: '...'; CSS command. So, something like
table.tablepress.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.tablepress.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
content: '🢒';
color: #31b131;
background-color: #ffffff;
border: none;
}
table.tablepress.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.tablepress.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
content: '🢓';
color: #d33333;
}
added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress might be sufficient.
Regards,
Tobias
Great it replaced it with symbols but how do I center those symbols in the way that the + signs were centered? Is there CSS for that? Also how do I remove the circles behind it?
Hi,
for that, I would need to see the page. Can you post a link?
Regards,
Tobias
Hi,
thanks for the URL!
Please try these modified commands in the first block of CSS:
content: '▶';
color: #000000;
background-color: transparent;
border: none;
box-shadow: none;
top: 16px;
left: 12px;
Regards,
Tobias
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
