Robert Birming

Blog pagination styles

These styles make the Bear blog pagination plugin feel like a natural part of your blog.1

Preview

How to use

Add the blog pagination plugin script to your footer (Dashboard → Settings → Header and footer directives), then add the styles below to your theme. You now have a simple way for readers to browse your posts page by page.

Styles

/* Blog pagination | robertbirming.com */
body.blog .pagination {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1.2em;
  margin-block: var(--space-block) 0;
  font-size: var(--font-small);
}

.pagination #pageInfo {
  color: var(--muted);
  white-space: nowrap;
}

.pagination a[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.pagination #prevPage::before {
  content: "\2190\00a0";
}

.pagination #nextPage::after {
  content: "\00a0\2192";
}

Want more? Check out all available Bearming add-ons.

Happy blogging, one page at a time.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩