Download Builder and themeroller / jquery UI styling

Taylor514ce

The download builder created a datatables.css file, including the jquery ui options, for me. How do I change the JqueryUI themeroller style? If I download a new themeroller theme, how do I edit the datatables.css or my HTML to use the new style?

Taylor514ce

I guess I copy the contents of my downloaded theme's jquery-us.css file into the datatables.css file? Anything else needed to incorporate the new style? Do I need to edit the datatables.js as well?

allan

That should be it. I don't think you should need to modify the Javascript files - they should be using the jQuery UI theme generic class names.

Allan

Taylor514ce

After swapping out the downloaded CSS with the JQuery UI Redmond Themeroller CSS, all is almost working. The alternative row colors associated with the .even and .odd classes are not working. My entire table background is white and stays white, with no alternating and the various sorting classes also ignored.

Taylor514ce

Update: the issue is unrelated to the "redmond" theme. I have the same issue with the default "orange" theme from the download builder.

Table Row background colors do not alternate.

allan

The jQuery UI themes don't have anything in them for the zebra striping of table rows. So that is something which has to be provided by the DataTables / jQuery UI stylesheet.

You'd need to modify the row colours in the DataTables / jQuery UI stylesheet as such.

Allan

Taylor514ce

Allan,

This was certainly working before using JQuery UI themes... perhaps I did extensive editing of the CSS in the previous version, I truly don't recall.

I do see these style entries in the CSS, are they not active? The .odd and .even classes are being applied to my table rows.

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
  background-color: #f9f9f9;
}
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
  background-color: #acbad4;
}
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  background-color: #f6f6f6;
}
table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
  background-color: #aab7d1;
}
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
  background-color: #fafafa;

allan

Do you have the display or stripe class on the table?

Allan

Taylor514ce

No sir:

<table id="tblServerLog" class="dataTable no-footer" role="grid" style="width: 100%;">

That's the rendered tag. Based on your previous response, I reviewed my older version and saw that I did override some CSS with this:

table.dataTable tr.odd { background-color: #E2E4FF; }
table.dataTable tr.even { background-color: white; }

table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }

That works, but for the purposes of learning, I'm curious why the built-in styles aren't being applied.

EDIT: Applying class="stripe" to my table resolved the issue, and I removed my own style entries shown above. Thank you!