# Is paginering onmogelijk of gewoon moeilijk?
**URL:** https://meta.discourse.org/t/is-pagination-impossible-or-just-hard/231838
**Category:** Development
**Created:** [3 juli 2022 om 23:51 UTC](https://meta.discourse.org/t/is-pagination-impossible-or-just-hard/231838 "2022-07-03T23:51:48Z")
**Posts on this page:** 1
**Showing post:** 16
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [28 oktober 2022 om 14:21 UTC](https://meta.discourse.org/t/is-pagination-impossible-or-just-hard/231838/16 "2022-10-28T14:21:56Z")
**To create navigation from Topic to Topic (and auto insert Back/Prev and Forward/Next buttons on each Topic in the sequence), I’m doing it this way**…
I’m repurposing the “ **Reply as Linked Topic** ” and then CSS styling the links like so …
And adding some CSS in the Theme Settings …
> **MINIMAL CSS JUST FOR THE BUTTONS**
>
> ```plaintext
> .post-links-container {
> margin-left: var(--topic-body-width-padding);
> position: absolute;
> top: 37px;
> right: 30px;
> }
>
> .post-links-container ul li .d-icon {
> display: none;
> }
>
> .post-links-container .post-links {
> margin-top: 0;
> padding-top: 0;
> border-top: 0;
> }
>
> .post-links-container .post-links li:last-of-type {
> margin-bottom: 0;
> }
>
> .post-links-container ul li a[href] {
> align-items: center;
> border: 1px solid var(--primary-low-mid);
> background: var(--primary-very-low);
> border-bottom-width: 2px;
> border-radius: 3px;
> box-sizing: border-box;
> color: #009a49;
> display: inline-flex;
> font-family: monospace, monospace;
> font-size: var(--font-down-1);
> justify-content: center;
> line-height: var(--line-height-large);
> margin: 0 0.15em;
> min-width: 24px;
> padding: 0.15em 0.6em;
> }
>
> .post-links-container ul li a::after {
> content: " ->>";
> padding-left: 0.15em;
> }
>
> kbd {
> align-items: center;
> border: 1px solid var(--primary-low-mid);
> background: var(--primary-very-low);
> border-bottom-width: 2px;
> border-radius: 3px;
> box-sizing: border-box;
> color: var(--primary);
> display: inline-flex;
> font-family: monospace, monospace;
> font-size: var(--font-down-1);
> justify-content: center;
> line-height: var(--line-height-large);
> margin: 0 0.15em;
> min-width: 24px;
> padding: 0.15em 0.6em;
> }
>
> kbd a {
> padding: 0;
> }
>
> kbd a::before {
> content: "<<-";
> padding-right: 0.15em;
> }
>
> ```
> **INSTRUCTIONS AND THE FULL CSS I'M USING**
>
> ```plaintext
>
> / **Prev and Next Buttons for Books or other Topic Sequencing - this feature is built by repurposing** /
> /**the native Discourse feature "Reply As A Linked Topic" selector in the composer (top left).**/
> / **TO SET THIS UP ON YOUR DISCOURSE** /
> / **Paste %{postLink} in /admin/customize/site_texts/js.post.continue_discussion.** /
> /**Then create 2 categories: BOOKS (for Blog Style topic sequences) and STORIES (for Regular Topic Style topic sequences).**/
> / **Install the https://meta.discourse.org/t/blog-post-styling/110841 theme component** /
> /**In the Blog Post Styling Theme Component Settings, assign the BOOKS Category (but not STORIES) as a Blog Category.**/
> / **Then create a tag: BOOK and assign that as a Blog Tag in the Blog Post Styling Theme Component Settings** /
> / **Then don't forget to paste in the below CSS! It goes in your Theme Header.** /
> / **Of course the CSS here will need tweaking to work right in other themes.** /
> / **Now you can create sequences of Topics in the STORIES Category which will have the nav buttons,** /
> /**but those Topics will otherwise appear in the Regular Topic Style).**/
> / **If you can add the Blog Styling to these STORIES Category Topics by simply adding the BOOK tag.** /
> / **A new Topic you compose in the BOOKS CATEGORY using "Reply as a Linked Topic" will already have both the nav buttons** /
> / **as well as the Blog Styling.** /
> / **See a Demo at https://meta.discourse.org/t/is-pagination-impossible-or-just-hard/231838/16** /
>
> .tag-book,
> .category-books {
> aside.sidebar,
> .topic-meta-data,
> .tag-book .topic-category .badge-wrapper,
> .category-books .topic-category .badge-wrapper {
> display:none !important;
>
> }
> }
>
> .tag-book .container.posts,
> .category-books .container.posts {
> justify-content: unset;
> justify-items: unset;
> padding-left: 0;
> display: block;
> }
>
> .tag-book .container.posts .topic-post .row,
> .category-books .container.posts .topic-post .row {
> display: block;
> justify-content: center;
> }
>
> .tag-book #topic-title .title-wrapper,
> .category-books #topic-title .title-wrapper {
> display: block;
> margin: 0 auto;
> }
>
> .tag-book #topic-title,
> .category-books #topic-title {
> display: block;
> margin: 0 auto;
> }
>
> .tag-book #topic-title h1,
> .category-books #topic-title h1 {
> font-size: 2em;
> padding-right: 20px;
> }
>
> .tag-book #post_1 .topic-body,
> .category-books #post_1 .topic-body {
> padding-top: 1em;
> border-top: none;
> max-width: 100%;
> }
>
> .tag-book #post_1 .topic-body .contents,
> .category-books #post_1 .topic-body .contents {
> border-top: none;
> margin-left: 0;
> padding: 0;
> }
>
> .tag-book p,
> .category-books p {
> /* put styles here for the main text in the Book pages */
> }
>
> /* Position the Forward button at the top right of the page */
> .tag-book .post-links-container,
> .category-books .post-links-container {
> margin-left: var(--topic-body-width-padding);
> position: absolute;
> top: 1em;
> right: 30px;
> }
>
> /* Position the Back button at the top left of the page */
> .category-stories .post-links-container {
> margin-left: var(--topic-body-width-padding);
> position: absolute;
> top: 2.5em;
> right: 30px;
> }
>
> /* Remove the link symbol from the Forward button */
> .tag-book .post-links-container ul li .d-icon,
> .category-books .post-links-container ul li .d-icon,
> .category-stories .post-links-container ul li .d-icon {
> display: none;
> }
>
> .tag-book .post-links-container .post-links,
> .category-books .post-links-container .post-links,
> .category-stories .post-links-container .post-links {
> margin-top: 0;
> padding-top: 0;
> border-top: 0;
> }
>
> .tag-book .post-links-container .post-links li:last-of-type,
> .category-books .post-links-container .post-links li:last-of-type,
> .category-stories .post-links-container .post-links li:last-of-type {
> margin-bottom: 0;
> }
>
> /* Style the Next/Forward button */
> .tag-book .post-links-container ul li a[href],
> .category-books .post-links-container ul li a[href],
> .category-stories .post-links-container ul li a[href] {
> align-items: center;
> border: 1px solid var(--primary-low-mid);
> background: var(--primary-very-low);
> border-bottom-width: 2px;
> border-radius: 3px;
> box-sizing: border-box;
> color: #009a49;
> display: inline-flex;
> font-family: monospace, monospace;
> font-size: var(--font-down-1);
> justify-content: center;
> line-height: var(--line-height-large);
> margin: 0 0.15em;
> min-width: 24px;
> padding: 0.15em 0.6em;
> }
>
> /* Add arrows pointing right to the Forward button */
> .tag-book .post-links-container ul li a::after,
> .category-books .post-links-container ul li a::after,
> .category-stories .post-links-container ul li a::after {
> content: " ->>";
> padding-left: 0.15em;
> }
>
> /* Alternatively Use an Image for the Right Arrow */
> /*
> .tag-book .post-links-container::after,
> .category-books .post-links-container::after,
> .category-stories .post-links-container::after {
> content: url('../../media/arrow-right.svg');
> display: inline-block;
> width: 12px;
> height: 12px;
> }
> */
>
> /* Style the Back/Previous button*/
> .tag-book kbd,
> .category-books kbd,
> .category-stories kbd {
> align-items: center;
> border: 1px solid var(--primary-low-mid);
> background: var(--primary-very-low);
> border-bottom-width: 2px;
> border-radius: 3px;
> box-sizing: border-box;
> color: var(--primary);
> display: inline-flex;
> font-size: var(--font-down-1);
> justify-content: center;
> line-height: var(--line-height-large);
> margin: 0;
> min-width: 24px;
> padding: 0.15em 0.6em;
> }
>
> .tag-book kbd a,
> .category-books kbd a,
> .category-stories kbd a {
> padding: 0;
> }
>
> /* Add arrows to the back button */
> .tag-book kbd a::before,
> .category-books kbd a::before,
> .category-stories kbd a::before {
> content: "<<-";
> padding-right: 0.15em;
> }
>
> /* Alternatively Use an Image for the Left Arrow */
> /*
> .tag-book kbd a::before,
> .category-books kbd a::before,
> .category-stories kbd a::before {
> content: url('../../media/arrow-left.svg');
> display: inline-block;
> width: 12px;
> height: 12px;
> }
> */
>
> ```
Here’s the result …
You can test it live here …
> **[A Collection of Stories](https://noobish.me/t/a-collection-of-stories/359)**
>
> This series of Topic posts is to demonstrate a way to provide Next/Forward and Prev/Back buttons for navigating from Topic to Topic – like a book – as a way of displaying a series of ordered content in a Discourse forum. \>\> I posted about it on...
---
_[View the full topic](https://meta.discourse.org/t/is-pagination-impossible-or-just-hard/231838)._