Change alternate row colour in a theme.

classic12

Hi guys,

loving this product....

www.toolfolks.com/surpusAnywhere.com

I have the slate theme which looks really cool. However the contrast with the white alternative row is ugly.

Where is the magic ' fit it wizardy ' button please?

Cheers

Steve Warby

classic12

I have tried

$('#dtDataChanged').DataTable( {
  "stripeClasses": [ 'odd-row', 'even-row' ]
} );

   tableDataChanged.dataTable >tbody td {
    text-align: center;
    background: #99BCDB;
}

tableDataChanged.dataTable > tbody tr.odd td { 
    background: #EBF2F8;

  $('#dtDataChanged').dataTable( {
  "stripeClasses": [] //Empty Array.
} );

All get ignored.

Is there a tool for editing the themes ?

Cheers

Steve Warby

kthorngren

Is this what you are looking for?
http://live.datatables.net/jebuqidu/1/edit

Kevin

tangerine

Is there a tool for editing the themes ?

There are no themes as such. There is default CSS styling which you may amend or override as desired.

Or you could play with this:
https://datatables.net/manual/styling/theme-creator

classic12

Thanks Kevin,

I had seen that and tried but not understand how everything bolts together I had added the CSS to my component in the IDE.
It needed to go in the project CSS setting.

It will all sink in one day....

www.toolfolks.com/surplusAnywhere4

Slowly looking better

Cheers

Steve Warby

classic12

I managed to make some changes with CSS.

It would be easier if they followed the bootstrap theme.

http://www.toolfolks.com/surplusAnywhere4

label {
    color: white
}

.form-control {
display: block;
width: 100%;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #fffFff;
background-color: #272B30;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
button.dt-button, div.dt-button, a.dt-button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin-right: 0.333em;
    padding: 0.5em 1em;
    border: 1px solid #3F3F3F;
    border-radius: 2px;
    cursor: pointer;
    font-size: 20;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    background-color: #3F3F3F;
    background-image: -webkit-linear-gradient(top, white 0%, #e9e9e9 100%);
    background-image: -moz-linear-gradient(top, white 0%, #e9e9e9 100%);
    background-image: -ms-linear-gradient(top, white 0%, #e9e9e9 100%);
    background-image: -o-linear-gradient(top, white 0%, #e9e9e9 100%);
    background-image: linear-gradient(to bottom, #272B30 0%, #272B30 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='white', EndColorStr='#e9e9e9');
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    outline: none;
}


.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: #272B30 // Choose your own color here
 }

.table-striped>tbody>tr:nth-child(even)>td, 
.table-striped>tbody>tr:nth-child(even)>th {
   background-color: #2E3338; // Choose your own color here
 }

classic12

How can I change the little 'X' and '-' buttons that expand the rows on responsive I cannot see anything on the inspector

allan

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
      background-color: #31b131;
}

is the CSS for the green + background in Responsive. Make sure you click the ::before pseudo element in the DOM tree.

Its difficult to follow the theme as such since the theme might have that colour as a CSS variable, or it might not. it might have a specific class for it, or it might not.

The Bootstrap integration for Responsive should actually use a blue background since that's more Bootstrap-y.

It looks like you've loaded the DataTables stylesheet for Responsive rather than the Bootstrap one. The download builder is available to resolve that sort of issue.

Allan