What’s Brewing - The Innovative Interfaces Blog

Library Technology Blog from Innovative Interfaces

Charles Mihm

February 1, 2008 : Charles Mihm

Make me a pretty pager…

Most likely you have seen the pager used for multi-page catalog search results in the out-of-the-box Example Set for Innovative’s WebPAC Pro and Web OPAC products. How would you like to jazz that puppy up a little bit? It really isn’t all that hard.

With just a little very simple CSS we’re going to turn this:

Into this:

The markup for both of these instances is exactly the same (which is a good thing since it is system generated):

<!-- BEGIN BROWSE PAGER -->
<!-- begin page widgit -->
<td align="center"  class="browsePager" colspan="5">
Result Page   <strong>1</strong>
<a href="[PATH]">2</a>
<a href="[PATH]">3</a>
<a href="[PATH]">4</a>
<a href="[PATH]">5</a>
<a href="[PATH]">6</a>
<a href="[PATH]">7</a>
<a href="[PATH]">8</a>
<a href="[PATH]">9</a>
<a href="[PATH]">Next</a>
<!-- end page widgit -->
</td>

So all we need to do is add some CSS declarations to our local stylesheets. The CSS we need to add is remarkably simple:

.browsePager {
	font-size:.8em;
	font-weight:bold;
	padding:10px;
}

.browsePager strong {
	background:#9FBECE;
	border:1px solid #9FBECE;
	color:#fff;
	margin:2px 1px;
	padding:3px;
}

.browsePager a {
	border:1px solid #9FBECE;
	color:#202020;
	margin:2px 1px;
	padding:3px;
	text-decoration:none;
}

.browsePager a:hover {
	background:#9FBECE;
	color:#fff;
}

Obviously, you could chose different colors and font styles, but with these few additional CSS rules you have a very simple way to make your pager a little nicer and more user friendly.

Enjoy!

posted in: , , , ,

You can leave a response, or trackback from your own site.

4 Responses to “Make me a pretty pager…”

  1. Andrew Welch Says:
    February 1st, 2008 at 3:02 pm

    Great tip! For a consistent look-and-feel on bib record pages, libraries can carry these styles over to the bibPager class as well. For every .browsePager declaration, tack on .bibPager; e.g.:

    .browsePager, .bibPager {…}
    .browsePager a, .bibPager a {…}
    etc.

    (The one exception might be .browsePager strong; I don’t think the strong tag ever appears within .bibPager, so there’s no need to add ‘.bibPager strong’)
  2. Emily Clasper Says:
    February 4th, 2008 at 11:02 am

    Thanks so much for the tip! The little details like that make such a big difference in presenting a polished product to our users. I feel like I just gave my OPAC a two-minute makeover!
  3. Janet S Says:
    February 5th, 2008 at 7:17 am

    I love the use of this blog for tips/ideas. Keep going!
  4. Kevin Moffat Says:
    February 11th, 2008 at 12:23 pm

    Great tip! Would really love to see more like this!

Leave a Reply