quiero hacer cambios sobre las etiquetas "Show" , "Entries" y "Search" y no se como hacerlo. Por favor me podrían ayudar para saber como cambiar en el archivo CSS el color de esas etiquetas, el texto y si es posible poner de fondo un color de fondo de toda esa fila? Estoy usando para el diseño de la tabla: https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js
$(document).ready(function() {
$('#userList').DataTable();
});
body {
background: url(http://xxxxxxxxx/images/fondo.jpg) no-repeat center center fixed;
background-size: cover;
}
table tbody {
color: black;
background-color: white;
}
<!-- FRAMEWORK BOOTSTRAP para el estilo de la pagina-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Los iconos tipo Solid de Fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css">
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!-- Nuestro css-->
<link rel="stylesheet" type="text/css" href="../static/css/user-form.css" th:href="@{../static/css/user-form.css}">
<!-- DATA TABLE -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"> -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
</head>
<body>
<br>
<div class="table-responsive">
<table id="userList" class="table table-bordered table-hover table-striped table-condensed">
<thead class="thead-light">
<tr>
<th scope="col"># Venta</th>
<th scope="col">Fecha</th>
<th scope="col">Producto</th>
<th scope="col">Cantidad</th>
<th scope="col">Precio unitario</th>
<th scope="col">Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>10/10/2021 10:10:10</td>
<td>Empanadas Arabes por Docena</td>
<td>2</td>
<td>$ 600</td>
<td>$ 1200</td>
<td>
<a href="#"><i class="fas fa-edit"></i></a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>10/10/2021 10:10:10</td>
<td>Chipas 1Kilo</td>
<td>3</td>
<td>$ 650</td>
<td>$ 1950</td>
<td>
<a href="#"><i class="fas fa-edit"></i></a>
</td>
<tr>
<th scope="row">2</th>
<td>12/10/2021 10:10:10</td>
<td>Chipas 1Kilo</td>
<td>2</td>
<td>$ 650</td>
<td>$ 1300</td>
<td>
<a href="#"><i class="fas fa-edit"></i></a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>21/10/2021 10:10:10</td>
<td>Emp. Arabe</td>
<td>1</td>
<td>$ 600</td>
<td>$ 600</td>
<td>
<a href="#"><i class="fas fa-edit"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
Agrego el codigo completo para mayor comprensión del caso, por favor si pueden revisarlo estaria muy agradecido para poder modificar las etiquetas que les comente en la imagen.