Add Page Numbers

Add the page elements to the template

To add the page elements to the template, follow these steps:

1. Select the Collection tab;
2. Click on the small e button beside the templates drop down list;
3. Select the publication template to open it for editing;
4. Once in the temple, locate the place where you want to add the page numbers;
5. Copy and paste the makup below.

<!-- page / pages -->
<xsl:if test="$page_num">
 <div class="pagenums">
  <xsl:value-of select="$page_num"/> / <xsl:value-of select="$page_total"/>
 </div>
</xsl:if>

The above markup first checks if the page number parameter was sent to the template, it then creates a div element in which are inserted the two parameters.

<!-- back bottom -->
<div class="back">
 <a href="javascript:history.go(-1);">Back</a>
</div>			

After you seved the template, you can publish your collection to see the result. Altough it might not look like you expected.

Add the pagenums selector to the stylesheet

It's now time to add a bit of style to the pagenums element.

To add the appropriate style, follow these steps:

1. Select the Content or Topic tab;
2. Click on the small e button beside the stylesheets drop down list;
3. From the popup menu, select the publication main stylesheet;
4. Once in the stylesheet. find the div.back selector;
5. Copy and paste the selector below just above the dv.back selector.

div.pagenums {float:right; margin-right:8px; font-size:0.82em; 
              clear:both;}	

In the above selector, the page numbers are floated to the right (float:right;). The selector also makes sure the page numbers stacks well with the back link by using clear:both;.

Once your style selector is added and your stylesheet saved, you can refresh your browser to see the final result.