Customize Collapse Row “+” and “-” Buttons

Replies: 0

Hi Tobias,

I added this code to change the green and red colors into a light brown:

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
	background-color: #655D5D !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
	background-color: #655D5D !important;
}

Which gives me this:

https://i.imgur.com/lEq7Oe8.png

However, I couldn’t change the white CSS path that you see in the image. Is that possible?

I then tried replacing this method to replace it with an image:

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
	background-image: url('https://i.imgur.com/CkWG16X.png') !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
	background-image: url('https://i.imgur.com/CkWG16X.png') !important;
}

But that didn’t work either. So I downloaded the “tablepress-datatables-row-details” plugin and changed the images in close.png and close.png, and reuploaded it. But that didn’t work.

Basically, I need a minimal brown “+” and “-” button with no circles.

Any help?