Recipe 74: Format the Pager with CSS-only modifications

Note

Ingredients

A view with a pager

Over the next several recipes we will look at ways to customize the output of theme functions. In this recipe, we use CSS to alter the style of the site's pagers. The pagers are generated by the theme_pager function in the includes/pager.inc file.

In the standard default Garland theme, the pager looks like this (for a two-page view). The screenshot includes the pop up title that appears when mousing over a page number.

We will modify the pager to look like this:

1. Load a view that has a pager and examine the underlying source code in the browser. Note that in this example, page 1 is enclosed by the <strong> tag, which has a CSS class of pager-current.

   <div class="pager">
     <span class="pager-list">
        <strong class="pager-current">1</strong>
        <a title="Go to page 2" class="pager-last active" href="/frontpage?page=1">2</a>
     </span>
     <a class="pager...