We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 18367
    • 834 Posts
    Hi,

    I'm trying to style the getpage page.nav links with only limited success.

    I understand I have to create property sets, but I'm not sure which ones, or even what part of them to change. EG Do I just change the "control" class or is there somethign else I have to do?

    Basically I want my previous, next and page numbers to use the following styles

    		<nav class="line-paginator">
    								<a href="#" class="prev page-numbers">Previous</a>
    								<span class="page-numbers current">1</span>
    								<a href="#" class="page-numbers">2</a>
    								<a href="#" class="page-numbers">3</a>
    								<a class="page-numbers">...</a>
    								<a href="#" class="page-numbers">14</a>
    								<a href="#" class="next page-numbers">Next</a>
    							</nav>
    


    I've got them looking almost correct except that they are vertical instead of horizontal.

    Here's what I tried first in my call
    [[!+page.nav:notempty=`<nav class="line-paginator">  
    <ul class="page-numbers"> [[!+page.nav]] </ul></nav>`]]


    As I said, works to a point, except for the upright orientation.

    Any tips, pointers appreciated.

    Thanks



    This question has been answered by nir-z. See the first response.

    [ed. note: markg last edited this post 9 years, 10 months ago.]
      Content Creator and Copywriter
      • 42035
      • 90 Posts
      Hi Mark G

      You can find your solution here
      http://rtfm.modx.com/extras/revo/getpage

      Quote from: markg at Jul 16, 2014, 03:08 AM

      I understand I have to create property sets, but I'm not sure which ones, or even what part of them to change. EG Do I just change the "control" class or is there somethign else I have to do?

      You should add class of li which you want on element page.
        Arkalp.com
        • 18367
        • 834 Posts
        Quote from: vinodjoshi6219 at Jul 16, 2014, 04:37 AM
        Hi Mark G

        You can find your solution here
        http://rtfm.modx.com/extras/revo/getpage
        You should add class of li which you want on element page.

        Sorry, should have said, I've already read that page several times. Don't fully understand it.
          Content Creator and Copywriter
          • 36996
          • 211 Posts
          Hi Mark,
          You need to go to the getPage snippet -> properties tab -> Add property set. (myPaging)
          once you do that, you can edit the properties: pageActiveTpl, pageFirstTpl...
          And finally call the getPage like this:

          [[!getPage@myPaging?
          ................
          ]]
          



            • 18367
            • 834 Posts
            Quote from: nir-z at Jul 16, 2014, 07:22 AM
            Hi Mark,
            You need to go to the getPage snippet -> properties tab -> Add property set. (myPaging)
            once you do that, you can edit the properties: pageActiveTpl, pageFirstTpl...
            And finally call the getPage like this:
            [[!getPage@myPaging?
            ................
            ]]
            


            Tried all that, didn't work at all.

            It's the editing properties I can't get my head around. Let me ask it another way. Where do I put this style
            class="prev page-numbers"
            ?

            Also, What happens with pageNextTpl and pagePrevTpl?

            Sorry if this seems obvious to everyone else, but it's totally baffling to me.

              Content Creator and Copywriter
            • discuss.answer
              • 36996
              • 211 Posts
              You need something like:

              pageNavTpl

              <a href="[[+href]]" class="page-numbers">[[+pageNo]]</a>
              


              pageActiveTpl

              <span class="page-numbers current">[[+pageNo]]</span>
              


              pagePrevTpl

              <a href="[[+href]]" class="prev page-numbers">Previous</a>
              


              pageNavOuterTpl

              [[+prev]][[+pages]][[+next]]
              


              the next is almost the same as the prev so I left it out.
                • 18367
                • 834 Posts
                Almost there,

                where do I put the style class
                <nav class="line-paginator">  </nav>
                ?

                I've tried a few places and it's not being picked up.

                Thanks

                  Content Creator and Copywriter
                  • 36996
                  • 211 Posts
                  Use the pageNavOuterTpl:

                  <nav class="line-paginator"> [[+prev]][[+pages]][[+next]] </nav>
                  
                    • 18367
                    • 834 Posts
                    @Nic, yeh first thing I tried, no luck.

                    My complete call for the page is
                    <ul>[[!getPage@myPaging? &elementClass=`modSnippet` &element=`getResources` &tpl=`gridpost2` &parents=`123` &depth=`2` &limit=`10` &includeContent=`1` &includeTVs=`1` &showHidden=`0` &hideContainers=`1` &cache=`0` &pageVarKey=`page` ]] 
                     </ul>


                    Which calls 10 article summaries.

                    &tpl=`gridpost2 is the template for body of the page.

                    The pagination style is all within the getPage@myPaging? snippet.

                    You can see the test page here http://www.markdeangarner.com.au/library/new-test

                    And because the pagination is vertical instead of horizontal you'll see why that's a problem.
                      Content Creator and Copywriter
                    • I would strongly recommend that you clean up your HTML before trying to figure that out. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.markdeangarner.com.au%2Flibrary%2Fnew-test&charset=%28detect+automatically%29&doctype=Inline&group=0
                        Studying MODX in the desert - http://sottwell.com
                        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                        Join the Slack Community - http://modx.org