Pagination functionality in TablePress allows for improved organization and

Currently, I am utilizing the TablePress plugin on my WordPress website and I am aiming to achieve a pagination layout similar to this illustration: . How can I modify the pagination to display the text 'page 1 of X' instead of 'previous' and 'next' buttons?

You can view how my current pagination appears on my site here: . Below is the CSS code that I am currently using:

.dataTables_paginate a {
    font-family: Montserrat;
    font-size: 12px;
    text-decoration: none !important;
}

.dataTables_paginate {
    float: none;
    text-align: center;
}

.paging_simple .paginate_button.previous,
.paging_simple .paginate_button.next {
    background-image: linear-gradient(to right,#fbcabb,#ceb6d9);
    border-radius: 15px;
}

.paging_simple .paginate_button.previous,
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next {
    padding: 10px 40px;
}
htmlcsswordpressdatatable

Answer №1

Consider implementing these unique CSS styles on your WordPress platform to achieve the desired look.

Is there a way to display 'page 1 of X' instead?

To fulfill this specific request, it might be necessary to make adjustments to the plugin's code directly.

Based on my investigation, here is the outcome when applying the following CSS: https://i.stack.imgur.com/cTQc7.png

.paging_simple .paginate_button.previous, .paging_simple .paginate_button.next {
    background: none !important;
}
.paging_simple .paginate_button.previous::before,
.paging_simple .paginate_button.next::after {
    font-family: 'Montserrat', 'Segoe UI', sans-serif !important;;
    line-height: 0.7em !important;
}
.paging_simple .paginate_button.previous::before {
    background-image: linear-gradient(to right,#fbcabb,#ceb6d9);
  border-radius: 50%;
    padding: 10px !important;
}

.paging_simple .paginate_button.next::after {
        background-image: linear-gradient(to right,#fbcabb,#ceb6d9);
  border-radius: 50%;
    padding: 10px !important;
    right: -14px !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigate to the middle of a DIV container in Angular 7

Is there a way to programmatically scroll to the center of my element on both the Y and X axes when a specific function is executed? My HTML structure includes the following (I am aiming to scroll to the middle of #viewport): </div> <div # ...

javascripthtmlcssangular

I encountered a SyntaxError indicating a missing ")" right before utilizing jQuery in my code

When trying to run the code below, I encountered an error in the console stating SyntaxError: missing ) after argument list. $(document).ready(function() { $(".blog-sidebar-form form").before("<p class="blog-sidebar-inform>Dummy Text</ ...

jqueryhtmlcss

Can Jquery be utilized to signal a language change?

I'm working on my portfolio website that will be available in two languages, Thai and English. I have successfully implemented language buttons for changing between the two languages. However, I am facing an issue with the language selection when nav ...

javascriptphpjqueryhtml

The JavaScript-rendered HTML button is unresponsive

I have a JavaScript function that controls the display of a popup window based on its visibility. The function used to work perfectly, with the close button effectively hiding the window when clicked. However, after making some changes to the code, the clo ...

javascripthtmlcssbutton

Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...

javascriptjqueryhtmlcss

Exploring Angular's Animation Feature for HTML Element Movement

I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...

cssangular

Issue: The component factory for GoogleCardLayout2 cannot be located

Recently I've been working on an Ionic 3 with Angular 6 template app where I encountered an issue while trying to redirect the user to another page upon click. The error message that keeps popping up is: Uncaught (in promise): Error: No component fac ...

javascripthtmlangularionic-frameworkionic3

Automatically filling out a Pug form using an Express/Node.js web application

My Node.js web app is created with Express and I am attempting to populate a Jade template after querying MongoDB. The goal is to fill the Jade template with the queried values. One thing that puzzles me is that even when I remove everything within the co ...

htmlnode.jsmongodbexpresspug

After attempting to retrieve local .HTML content with JQuery ajax for the second time, the JavaScript code within index.html appears to be malfunctioning

My apologies for my limited proficiency in English... Currently, I am engaged in phonegap development where I am attempting to utilize JQuery ajax to retrieve local .HTML content and insert this extracted content into the div with the id="next-page" in in ...

jqueryhtmlajaxcordova

The table row disappears but the value persists

I have designed a table where users can perform calculations. However, when a row is deleted, the values from that row appear in the row below it and subsequent rows as well. What I want is for the user to be able to completely remove a row with its values ...

javascripthtmlreactjs

How to set a default checked value in a custom DropDownList in AngularJS?

I have created a bespoke DropDownList in my HTML code. I'm looking for guidance on how to set one of the options as default within the following scenario: <div class="dropdownlistheader" ng-click="toggle('subdiv','item')"> ...

htmlangularjs

When adding classes using Angular's ng-class, CSS3 transitions are not activated

After creating a custom modal directive in Angular, I am encountering an issue with the transition animation not working as expected. Within my directive's isolated scope, there is a method called toggleModal() that toggles the modalState between true ...

angularjscss

What is the reason behind the Placeholder not functioning in IE8?

Whenever I trigger the onblur event on an input of type "password", it will hide both the placeholder text and the input itself. Check out the GitHub link for this plugin ...

javascriptjqueryhtmljquery-plugins

Creating a div that spans the entire height from top to bottom

Currently, I am faced with the following scenario: <div id=area> <div id=box> </div> </div> <div id=footer> </div> The "area" div is situated in the center and has a width of 700px with shadows on both the right and ...

csshtmlsize

Showing a 2D array in HTML using ngFor loop

I need to display a list of arrays in an HTML p-table. Here is the array list: [Array(2), Array(2), Array(2), Array(2), Array(1)] 0: (2) ["abc", "def"] 1: (2) ["ghi", "jkl"] 2: (2) ["mno", "pqr"] ...

javascripthtmlarraysangular

CSS universal selector not applying to images

I have scoured through different resources and they all seem to echo the same information. Here is the code in question: *:not(img) { display: none; } Its intended purpose is to hide everything on the page except images. However, it seems to be hiding t ...

htmlcssimage

What is the best way to align a button within a Jumbotron?

Struggling to find the right CSS placement for a button within a jumbotron. I attempted using classes like text-left or pull-left, but nothing seemed to work as I hoped. I believe a simple CSS solution exists, but it's eluding me at the moment. Ideall ...

htmlcsstwitter-bootstrap

Error: Unable to access the 'nom_gr' property of null - encountered in Chrome

<ion-col col-9 class="sildes"> <ion-slides slidesPerView="{{nbPerPage}}" spaceBetween="5"> <ion-slide *ngFor="let slide of lesClassrooms; let i = index" (click)="saveCurrentSlide(i)"> ...

javascripthtmlangularionic2

Utilize AngularJS to create a custom tag with a directive included

I've been working on creating a custom tag for a reusable component in a web page, but I seem to have hit a roadblock. It's not functioning as expected, and I feel like I might be overlooking something. If anyone could provide some guidance or p ...

javascripthtmlangularjsangularjs-directive

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss