Title: PAGE CONTROLS – CSS CUSTOMIZATION
Last modified: April 11, 2018

---

# PAGE CONTROLS – CSS CUSTOMIZATION

 *  Resolved [IMTanuki](https://wordpress.org/support/users/imtanuki/)
 * (@imtanuki)
 * [7 years, 12 months ago](https://wordpress.org/support/topic/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/](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](https://wordpress.org/support/users/imtanuki/).

Viewing 1 replies (of 1 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [7 years, 12 months ago](https://wordpress.org/support/topic/page-controls-css-customization/#post-10169516)
 * Hi,
 * thanks for sharing this! This should definitely help others who want similar 
   changes!
 * Best wishes,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘PAGE CONTROLS – CSS CUSTOMIZATION’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [7 years, 12 months ago](https://wordpress.org/support/topic/page-controls-css-customization/#post-10169516)
 * Status: resolved