Hi,
how to change page break button from this: https://prnt.sc/qhlarf
To a big buttons like this: https://prnt.sc/qhlb20
Hi,
That is a posts loop element this can be from page template as Page Builder + Latest Articles + Pagination or it can be set and edit with tagDiv Composer -> https://i.imgur.com/3UZxo8P.png unfortunately for what you wan to achieve you need to use some custom css too -> https://i.imgur.com/W4bF61P.png , you can try this custom css for example -> https://i.imgur.com/t275Es7.png
.td-next-prev-wrap a{
width: 200px!important;
font-size: 16px;
padding: 16px 48px;
color: #fff;
background-color: orange;
}
.td-next-prev-wrap a i {
display: none;
}
.td-next-prev-wrap .td-ajax-prev-page:before {
content: "Prev";
}
.td-next-prev-wrap .td-ajax-next-page:before {
content: "Next";
}
.td-next-prev-wrap a:hover {
background-color: red;
border-color: red;
color: #fff;
}
.td-next-prev-wrap .td-ajax-next-page {
padding-left: 48px;
}
.td-next-prev-wrap .td-ajax-prev-page {
padding-right: 48px;
}
The code need to be set in theme panel> custom code> custom css.
Hope this will help you!
Thank you!
Almost there, but we don’t want to style pages.
We want to style next/prev buttons in gutenberg page break.
Right now it looks like this: https://prnt.sc/retmih
So we have a long post with pictures and we cut it into pages /1/,/2/,…,/10/ and we want to style this next/prev button into something like this:
first page: https://prnt.sc/retnzl
every next page: https://prnt.sc/retnpa
Hi,
For this you can try this custom css -> https://i.imgur.com/EQEwknZ.png
.page-nav a {
width: 200px!important;
font-size: 16px;
margin: 0;
padding: 16px 48px;
color: #fff;
background-color: orange;
}
.page-nav a, .page-nav .current{
display: none;
}
.page-nav a:first-child, .page-nav a:last-child {
display: block;
}
Thank you!
Thank you Calin!
How to change now from
“>”
to words: “next” and “prev”?
And next page looks like this now: https://prnt.sc/rf9tjj how to make them close to each other? prev on left and next on right.
Hi,
If you want to add the next and prev on the buttons you can use this custom css -> https://i.imgur.com/2WWSu3y.png
.page-nav a {
width: 200px!important;
font-size: 16px;
margin: 0;
padding: 16px 48px;
color: #fff;
background-color: orange;
}
.page-nav a, .page-nav .current{
display: none;
}
.page-nav a:first-child, .page-nav a:last-child {
display: block;
}
.page-nav a:first-child i:before {
content: "Prev";
font-size: 16px;
}
.page-nav a:last-child i:before {
content: "Next";
font-size: 16px;
}
Hope this will help you to achieve what you need!
Thank you!
How to make it now from this small width: https://prnt.sc/rfqxvm
to like width 100% of the content?
And then on next pages: left 50% and right 50% of the content? https://prnt.sc/rfqyi6
I want to receive 1:1 this: https://prnt.sc/qhlb20 Maybe a little more width.
Hi,
Unfortunately I can provide only the code for both buttons, -> https://i.imgur.com/SfM0BI3.png
.page-nav a {
width: 45%!important;
font-size: 16px;
margin: 0 2.5%;
padding: 18px 48px;
color: #fff;
background-color: orange;
}
.page-nav a, .page-nav .current{
display: none;
}
.page-nav a:first-child, .page-nav a:last-child {
display: block;
}
.page-nav a:first-child i:before {
content: "Prev";
}
.page-nav a:last-child i:before {
content: "Next";
}
.page-nav a:last-child i:before, .page-nav a:first-child i:before {
font-family: sans-serif;
font-size: 24px;
text-transform: uppercase;
font-weight: 600;
}
You can adjust it more after your needs.
Thank you!
Awesome! That’s what I was looking for.
Thank you Calin!
One more thing, first button “next page” is looking like this: https://prnt.sc/sbuh8j
I want to stretch it to full width and put it into center.
But on next pages I want buttons to stay same, as they are right now: https://prnt.sc/sbuhwz
Hi,
Please try this custom css
.page-nav a[href$="/2/"] {
width: 100%!important;
}
.page-nav a {
width: 45%!important;
font-size: 16px;
margin: 0 2.5%;
padding: 18px 48px;
color: #fff;
background-color: orange;
}
.page-nav a, .page-nav .current{
display: none;
}
.page-nav a:first-child, .page-nav a:last-child {
display: block;
}
.page-nav a:first-child i:before {
content: "Prev";
}
.page-nav a:last-child i:before {
content: "Next";
}
.page-nav a:last-child i:before, .page-nav a:first-child i:before {
font-family: sans-serif;
font-size: 24px;
text-transform: uppercase;
font-weight: 600;
}
Hope this will help you!
Yes, that works. Thank you!
I’m glad that I was helpful!
On mobile for some reason it looks a bit weird. It doesn’t show “next” and “prev” text instead of it it shows numbers: https://prnt.sc/sgqgvy and it doesn’t show next page which would be (2) it shows button to only last page.
Hi,
Are you using the mobile theme plugin? if yes, the is possible to be display different, if you are using the responsive version it should be ok.
To can check this problem, I need a link to your website.
Thank you for your understanding!
Yes, we’re using a mobile theme plugin.
Ok, we’ve turned it off.
We have a little longer text instead of “next” and “prev” in my language next is 8 letters. And it moved a little to right: https://prnt.sc/sh9o3w how do we move text a little to left but only for mobile? It looks perfect on desktop.
Hi,
On responsive version you can try this custom css
.page-nav a {
margin: 0 8px 8px 0;
padding: 12px 24px;
}
.page-nav a:last-child i:before, .page-nav a:first-child i:before {
font-size: 16px;
}
The code need to be set in theme panel>custom code> advance css > phones -> https://i.imgur.com/7Vt0sDy.png
Hope this will help you!
Yes, it works. Thank you!
How to make a first button a little bigger and set text in center?
https://prnt.sc/shtw4t
And on the last page I can only see the button “prev”. I’d love to make button “next” appear and point to a specific page (I’ve already created it) with more recommended articles. Is that possible?
Hi smile099,
If you need more css adjustments, please provide me a link to one of your posts, where I can check how this is looking for you, I’m asking this, because the results are a little different.
Also for the “next” button, our theme do not have an option for it, also I do not know any ways to achieve it.
Thank you!
Sure, here you go: https://bit.ly/3dVlngf
Hi,
Please try this custom css for mobile -> https://i.imgur.com/uGZmJlu.png
.single .page-nav a[href$="/2/"] {
width: 100%!important;
margin-left: 0!important;
}
The code need to be set in section for phone.
Hope this will help you!
Thank you!
Nothing changed, look: https://prnt.sc/sjmci0
And on /3/ page we get this error: https://prnt.sc/sjmakm (it’s not caused by new css code, it was before)
Here’s the code that we already have for all devices set:
.page-nav a[href$="/2/"] {
width: 80%!important;
margin-left: 10%;
box-shadow: 0px 4px 10px 0px #888888;
border-radius: 4px;
}
.page-nav a {
width: 45%!important;
font-size: 16px;
margin: 0 2.5%;
padding: 18px 48px;
color: #fff;
background-color: orange;
box-shadow: 0px 4px 10px 0px #888888;
border-radius: 4px;
}
.page-nav a, .page-nav .current{
display: none;
}
.page-nav a:first-child, .page-nav a:last-child {
display: block;
}
.page-nav a:first-child i:before {
content: "PREV";
}
.page-nav a:last-child i:before {
content: "NEXT";
}
.page-nav a:last-child i:before, .page-nav a:first-child i:before {
font-family: sans-serif;
font-size: 33px;
text-transform: uppercase;
font-weight: 600;
}
And here is what we’ve added for phones:
.page-nav a[href$="/2/"] {
width: 80%!important;
box-shadow: 0px 4px 10px 0px #888888;
border-radius: 4px;
}
.page-nav a {
margin: 0 8px 8px 0;
padding: 12px 24px;
}
.page-nav a:last-child i:before, .page-nav a:first-child i:before {
font-size: 16px;
}
.single .page-nav a[href$="/2/"] {
width: 100%!important;
margin-left: 0!important;
}
Hi,
For me dis is not displaying like that, here are the results -> https://i.imgur.com/OdCYeGl.png -> next page -> https://i.imgur.com/VCnTr2B.png with css -> https://i.imgur.com/zwlYGF2.png but I see that you have two identical links -> https://i.imgur.com/JZUxiTh.png one of them should be 3 instead of 2.
Thank you!
I’ve put this code to the “Custom CSS” Instead of “Advanced CSS” -> “Phones” and it seems to work now.
.single .page-nav a[href$="/2/"] {
width: 100%!important;
margin-left: 0!important;
}
And this weird error with broken next/prev buttons appears only on /3/ page. Before and after the third page everything is ok. Do you know what might be the issue? Screen: https://prnt.sc/skb56c
