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

Difficulty arises when attempting to pass a PHP variable as an argument within a MySQL query

My current task involves using a PHP variable as a search term in querying a MySQL database. First, I retrieve the variables from an HTML form: <?php //Set up variables $vals = array($_POST["id_number"], $_POST["id_name"], $_POST["id_submitname"]); $ke ...

phphtmlmysqldatabase

Unexpected disappearance of form control in reactive form when using a filter pipe

Here is a reactive form with an array of checkboxes used as a filter. An error occurs on page render. Cannot find control with path: 'accountsArray -> 555' The filter works well, but the error appears when removing any character from the fi ...

javascripthtmlangularangular-pipe

Why isn't my custom HTML attribute displaying correctly?

In my current React app project, I have been incorporating custom attributes to HTML tags and React components for End-to-End (E2E) tests using Testcafe. However, I am facing an issue where the additional data-test="burger-menu-btn" attribute is ...

javascripthtmlreactjstestingtestcafe

What steps do I need to take to link my form with Ajax and successfully submit it?

Here is my HTML code: {% extends 'base.html' %} {% block content %} <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create a Recipe ...

javascripthtmlajax

Using Modernizr to determine the presence of nth-child in a test

I'm attempting to utilize modernizr in order to check for browser support of the :nth-child selector, but I am unsure of how to proceed. I came across this particular example on http://jsfiddle.net/laustdeleuran/3rEVe/ which tests for :last-child. How ...

csscss-selectorsmodernizr

JavaScript Processing Multiple Input Values to Produce an Output

Hello, I am working on creating a stamp script that will allow users to enter their name and address into three fields. Later, these fields will be displayed in the stamp edition. Currently, I have set up 3 input fields where users can input their data. He ...

javascriptjqueryhtmlcss

``There seems to be an issue with CSS Transform/Transition not functioning properly

Here is some CSS code that I used to animate a list of items on my website: selector { display: flex; } #primary li a { -webkit-background-clip: text; -webkit-text-fill-color: transparent; ...

csssafaritransformtransitionwebkit-transition

Dropdown Menu in Bootstrap fails to display any items

My customized bootstrap navbar dropdown is behaving oddly in my custom navbar. Any thoughts on why this is happening and how to resolve the issue? The screenshot below illustrates the problem - the dropdown menu items are not visible unless I hover over th ...

phpcssbootstrap-5

Utilizing jQuery to attach events to dynamically inserted elements in the DOM

I am having an issue with dynamically adding elements to the DOM and then trying to manipulate their behavior using jQuery's .on() function. However, for some reason, the DOM is not triggering the .on() event for these dynamically added elements. You ...

htmldomjquery

Why does the variable in throw new exception print instead of the variable value being printed?

<div style="text-align: left;"> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"> Name:<input type="text" name="name"><br> Age:<input type="text" name="age"> <br> ...

phphtml

Unable to apply box-shadow styling to input elements

Why am I having trouble adding box shadows to input elements in my CSS? I've tried something like this http://jsfiddle.net/DLCTh/, and while it applies correctly to div elements, it doesn't seem to work on text inputs. Am I overlooking something ...

css

Align text vertically within labels and links styled with bootstrap

When using bootstrap button styled labels and links with a larger height than default, the text tends to be vertically aligned at the upper side of the button. However, when using an actual button element, the text is centered vertically. Is there a way t ...

htmlcsstwitter-bootstrap

Maintain a fixed element and enable the rest of the elements to scroll as the mobile browser address bar collapses while scrolling upwards

Currently facing a challenge where I want the background image to remain static while the address bar and content underneath scroll up. The image occupies 90% of the view height, and although I've prevented it from resizing and jumping when the addres ...

javascripthtmljquerycss

Is there a way to stop a music track from playing?

function playMusic(){ var music = new Audio('musicfile.mp3'); if (music.paused) { music.play(); } else { music.pause(); } } <input type="button" value="sound" onclick="playMusic()" ...

javascripthtmlcssaudio

Troubleshooting an Issue with CSS Sliding Doors

I'm having trouble getting the right image to show on my website. The left side of the image is fine, but I can't figure out how to make the right one appear. As a HTML/CSS beginner, I'm still learning the basics. For more information, vis ...

htmlcss

Attempting to repair navigation menu on grou.ps website

Hey there, I'm currently working on improving the appearance of my website. The original site can be found at . After integrating it with the grou.ps community platform, I noticed that the navigation menu is not displaying correctly and the image is ...

htmlcssapixhtmlnavigation

I am having trouble generating a TikTok page link due to the presence of an @ symbol, although all other links are functioning correctly. Can anyone provide a solution to this issue?

I am currently developing a website using primarily HTML within a Blazor application on Visual Studio. I have encountered an issue with the code where the first two buttons function correctly, but there is an error regarding the @ symbol in the TikTok butt ...

htmlhyperlinkblazortiktok

Tips for displaying XML content within an AngularJS application using HTML

I have a string containing data: var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel> </rss>" ; My goal is to display this string on a web page in the proper XML format. <channel& ...

htmlxmlangularjsuser-interface

Save user entries in a database array

I'm working on developing a platform for advertisements where users can create detailed profiles with images. To achieve this, I need to store the information in an array within a backend database for future retrieval. Below is an example of the backe ...

javascripthtmldatabasevue.js

Using Wordpress to store web page URLs as variables

I have been working on a Wordpress function that is supposed to fetch the URL of the current page that a visitor is browsing. Here's what I have so far: function retrieve_page_url() { $pageurl = "http://".$_SERVER['HTTP_HOST'].$_SERVER[&apo ...

phpwordpressvariables