html - TablePress 分页

Question

我在 wordpress 上使用 tablepress 插件，我试图实现这个插图:https://imgur.com/pG6eVhD用我的分页。如何让文本“上一个”和“下一个”出现在按钮外并替换为文本“第 1 页，共 X”？

这是我当前在网站上的分页:https://jolly-hawking7722.on.getshifter.io/使用此代码:

.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;
}

Answer 1

您可以尝试将这些自定义 CSS 添加到您的 Wordpress 站点中以获得样式。

replaced with the text 'page 1 of X' instead?

对于这个需求，我觉得你需要修改插件的源码？

我使用这些 CSS 检查的结果:

.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;
}