Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 26, 2015 at 3:33 pm #478741
    PPCHound

    In this thread https://kriesi.at/support/topic/how-to-apply-custom-css-to-pagination/ Ismael kindly showed how to add custom styling to pagination. However the text ‘Pages:’ comes AFTER the pagination links with this solution. How can I have the text ‘Pages:’ come BEFORE the pagination links please?

    July 27, 2015 at 9:44 am #478966
    Rikard

    Hey PPCHound!

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    July 27, 2015 at 11:30 am #479006
    PPCHound

    Hi Rikard,

    Apologies for not providing the link: Here it is.

    kindest regards,
    PPCHound

    • This reply was modified 9 years, 6 months ago by PPCHound.
    July 28, 2015 at 6:30 am #479447
    Rikard

    Hi,

    Please try the following in Quick CSS:

    .pagination_split_post span {
    display: inline !important;
    float: initial !important;
}

    You might need to do some additional styling to the buttons you have there as well. Let us know if you should need any help with that.

    Cheers!
    Rikard

    July 28, 2015 at 12:06 pm #479615
    PPCHound

    Hi Rikard,

    Many thanks for your kind expertise. This solution works just fine.

    I have adjusted the CSS to alter the button size, but it looks bad when viewed on a mobile device (iphone) as the buttons won’t wrap.

    Any help you can give with this would be very much appreciated.

    kindest regards,

    PPCHound.

    July 28, 2015 at 12:08 pm #479618
    Yigit

    Hey!

    Please change your code to following one to limit your changes to screensizes bigger than mobile 

    @media only screen and (min-width: 481px) {
.pagination_split_post span {
    display: inline !important;
    float: initial !important;
}}

    Regards,
    Yigit

    July 28, 2015 at 12:47 pm #479665
    PPCHound

    Hey Yigit,

    Many thanks for your input.

    Right now my CSS is:

    
.avia_textblock  a {  text-decoration: underline; }
.pagination_split_post span {
display: block;
float: left;
width: 55px;
height: 35px;
border: 1px solid black;
margin-left: 5px;
margin-right 25px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
background: red;
border-radius: 3px;
box-shadow: 0 1px 2px gray;
color: white;
text-shadow: 0 1px 1px gray;
}

.pagination_split_post a span {
background: white;
color: gray;
}

.pagination_split_post span {
    display: inline !important;
    float: initial !important;
}

    I need the text ‘Pages’ to appear alone on a line, with the page links on the next line. The buttons should be the size shown in the above CSS for desktop and tablets but half the size for phones.
    Not sure how to do this. Any help would be gratefully received please. Then I’m done!

    kind regards,

    PPCHound

    July 29, 2015 at 8:54 am #480067
    Rikard

    Hey!

    Did you change the site? I had a look but couldn’t find any pagination anymore? What you could do is to place “Pages” in it’s own paragraph, then the pages would wrap under it.

    Best regards,
    Rikard

    July 29, 2015 at 9:03 pm #480421
    PPCHound

    Hi Rikard,

    No, I didn’t change the site other than making the first page into a post grid. Clicking the post shows the post as it was before.

    I took your advice and added a <p> tag into loop-index.php which has placed the links onto a new line.
    However, when the links wrap on a mobile device they overlap each other. I tried adjusting the margins in the quick CSS code but have not worked out where I’m going wrong. :(

    Any help would be much appreciated – thank you. Nearly there (thanks to you!).

    kindest regards,

    PPCHound

    July 31, 2015 at 6:06 am #481097
    Rikard

    Hi,

    Did you manage to sort it out? I had a look on iphone4/chrome and it looks good!

    Cheers!
    Rikard

    July 31, 2015 at 3:52 pm #481413
    PPCHound

    Hi Rikard,

    Actually it’s not so good. If you look at my screenshot taken on the iphone 4S with Safari you will see the buttons overlapping. I need to cure this.

    screenshot

    kindest regards,

    PPCHound

    August 3, 2015 at 6:16 am #481878
    Ismael

    Hi!

    Adjust the line-height property:

    @media only screen and (max-width: 767px) {
.pagination_split_post p a {
    line-height: 50px;
}}

    Best regards,
    Ismael

    August 3, 2015 at 12:23 pm #482042
    PPCHound

    That’s it! MANY THANKS to all the support guys who helped with this. Your support is SECOND TO NONE.

    kindest regards,

    PPCHound

    August 4, 2015 at 1:20 pm #482649
    Rikard

    Hi,

    Thanks for the kind words and we’re glad we could help :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Pagination styling’ is closed to new replies.