How to style getPage [Resolved]

834 Posts

MarkG Reply #1, 10 years, 4 months ago

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 10 years, 3 months ago.]

Content Creator and Copywriter

90 Posts

Arkalp Reply #2, 10 years, 4 months ago

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

834 Posts

MarkG Reply #3, 10 years, 4 months ago

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

211 Posts

Nir Zohar Reply #4, 10 years, 4 months ago

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?
................
]]

834 Posts

MarkG Reply #5, 10 years, 4 months ago

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

211 Posts

Nir Zohar Reply #6, 10 years, 4 months ago

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.

834 Posts

MarkG Reply #7, 10 years, 3 months ago

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

211 Posts

Nir Zohar Reply #8, 10 years, 3 months ago

Use the pageNavOuterTpl:

<nav class="line-paginator"> [[+prev]][[+pages]][[+next]] </nav>

834 Posts

MarkG Reply #9, 10 years, 3 months ago

@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

☆ A M B ☆
24,524 Posts

sottwell Reply #10, 10 years, 3 months ago

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

Answered How to style getPage [Resolved]