We're trying to wrap up the styling of the forums here. One of the major navigation mechanisms on the forums is the pagination. At the bottom of the page, you can move on to the next page or jump to a more distant page. It also serves to show the user how active and deep the forums are.

Our wireframes have a style mocked up for how pagination should look, and it's pretty simple and usable. Due to some weird structural things in the view, it's far easier to put the pagination within the main content module rather than outside and below it like in the wireframe.

Our first deviation from the wireframe is that we make the background of the pagination black instead of white. This is because there is so much sub navigation on the site that uses the "black bar" style. Pagination is definitely sub navigation, so might as well be consistent. The choices we make here though can also go the other direction (update other sub navigation to look more like this), which I suspect will happen since this is such a pure and simple example of sub nav.

We then, as usual, spend time fiddling with spacing and such. We use a lot of percentages to that things space out and shrink according to the screen width available. We position the next and previous links toward the edges. Then we use the triangle technique we learned to indicate which page is active, by adding a black triangle right above it pointing the content.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag