Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 17, 2014 at 10:31 pm #292669
    tck

    I couldn’t find anything in the forum, but has anybody had any instances where they made the pagination more noticeable on the full-width masonry? We don’t want to use the “Load More” option. Rather we want the “pages” option. On wide screens, the pages are easy to miss. I would like to center the pages and make them a different color to stand out. A heading that says “View More Projects” would be helpful.

    Would anybody have any suggestions for that? Thanks for your help.

    July 18, 2014 at 3:58 am #292801
    Devin

    Hey tck!

    If we can see the page live we can inspect the code and suggest some css for you. That way it can be specific to your instance.

    Cheers!
    Devin

    July 18, 2014 at 3:23 pm #292993
    tck
    This reply has been marked as private.
    July 19, 2014 at 4:06 am #293223
    Ismael

    Hey!

    Thank you for the link.

    Add this on Quick CSS or custom.css:

    .pagination .pagination-meta {
left: 50%;
position: relative;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

    Change the font style with this:

    .main_color .pagination span {
color: red;
font-size: 15px;
}

    Best regards,
    Ismael

    July 21, 2014 at 4:22 pm #293897
    tck

    Thanks for the reply. I put the style in my child theme’s style.css, but it had no effect. Any suggestions on what I am doing wrong?

    July 22, 2014 at 4:52 am #294157
    Ismael

    Hi!

    Sorry about that, please use this instead:

    span.pagination-meta {
left: 50%;
position: absolute;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

    Cheers!
    Ismael

    July 22, 2014 at 6:41 pm #294520
    tck

    Thanks again for the wonderful support. You answered the question I asked, but I don’t think I asked the right question.

    Would there be a way to get the buttons centered as well? Or possibly only the buttons? Could we have text that says, “View more projects: [button page 1] [button page 2] [button page 3]”? The text that reads “Page 1 of 3” could go back to the right or be gone completely.

    I’m also struggling to change the background color of that section.

    Sorry for being a pain. Again, thanks for all your help.

    July 23, 2014 at 12:17 am #294657
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    span.pagination-meta { display: none; }
nav.pagination { width: 10%; margin: auto; }

    Best regards,
    Yigit

    July 24, 2014 at 5:25 pm #295506
    tck

    Thanks for all your help. Everything has worked so far, but it doesn’t display well on my cell phone. Is there anything you can suggest to help with that?

    Thanks.

    July 24, 2014 at 5:27 pm #295511
    Yigit

    Hi!

    Please change the code i posted previously to following one 

    @media only screen and (min-width: 768px) {
span.pagination-meta { display: none; }
nav.pagination { width: 10%; margin: auto; }}

    it will be applied only on screens bigger than 768px

    Cheers!
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.