PAGE CONTROLS – CSS CUSTOMIZATION

If anyone is interested, here is a compilation of the CSS and JSON customization provided by Tobias to:

– enable record counter and pagination controls to appear on the same line (on mobile devices)
– format the pagination icon colors, etc.
– change the pagination icons

1. JSON FILE PLUGIN
– See https://tablepress.org/extensions/change-datatables-strings/ for plugin

2. JSON CHANGES
The following changes are needed to minimize total text length so that record counter and pagination controls can fit on the same line:
“info”: “_START_ to _END_ of _TOTAL_ RECS”,
“first”: “F”,
“previous”: “PREV”,
“next”: “NEXT”,
“last”: “L”

3. CSS

/* TABLEPRESS – COMMON – PAGINATION – CONTROL OVERRIDES – PREV / NEXT TEXT */
.dataTables_paginate a {
text-decoration: none !Important;
}

/* TABLEPRESS – COMMON – PAGINATION – CONTROL OVERRIDES – ARROW SYMBOLS*/
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next:after {
color: #9476c9 !Important;
font-family: Abel;
font-size: 200%;
font-weight: normal;
text-shadow: none !Important;
padding-bottom: 15px !Important;
vertical-align: middle !Important;
}

/* SPECIFIC TO PREV */
.paging_simple .paginate_button.previous:before {
content: “\25C0” !Important;
padding-right: 30px !Important;
text-align: left;
left: auto;
}

/* SPECIFIC TO NEXT */
.paging_simple .paginate_button.next:after {
content: “\25B6” !Important;
text-align: right;
left: auto;
}

• This topic was modified 7 years, 12 months ago by IMTanuki.