Answers

• classic12 Posts: 228Questions: 60Answers: 4

  November 2017

  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 Posts: 21,443Questions: 26Answers: 4,974

  November 2017 Answer ✓

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

  Kevin
• tangerine Posts: 3,365Questions: 39Answers: 395

  November 2017 edited November 2017

  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 Posts: 228Questions: 60Answers: 4

  November 2017

  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 Posts: 228Questions: 60Answers: 4

  November 2017 edited November 2017

  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 Posts: 228Questions: 60Answers: 4

  November 2017

  How can I change the little 'X' and '-' buttons that expand the rows on responsive I cannot see anything on the inspector
• allan Posts: 63,679Questions: 1Answers: 10,498 Site admin

  November 2017

  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