Poster Categories As Buttons

Poster, the rather brilliant and versatile stack from Instacks has an excellent facility for displaying categories and tags on the page. This code takes things one step further and turns them into buttons.

I use Poster a lot, an awful lot; it forms the core of many of my websites. I use it for content areas, product catalogues, photo galleries and even it's originally intended use, as a blog. This here blog uses it.

Within Poster each item you can be assigned to a category and also have tags attached to it. To display these, you use a little bit of code in an HTML stack.

It all works beautifully; there are even various ways to display categories and tags within Poster.

What has been missing though is the ability to display either the categories, tags or both as buttons. I recently needed such a thing and so a quick email to Jannis the developer soon had me sorted.

Within a few hours, Jannis fired me back the following code, that can be edited and adapted to display categories, tags or both as styled buttons which can perfectly match the design of your site.

What does it look like in use? This blog is powered by Poster, and I'm using the code to turn the category links into buttons.

To use the code… In the main Poster stack select the layout of categories and tags as required: RW, one line, list, etc. At the bottom of settings for the main Poster stack leave the setting for "Separator" blank. Add the code below to the CSS section in Inspector for the page. To turn categories into buttons leave the class in the code as it is. To turn tags into buttons change the word "categories" in the class to "tags". Style the buttons as required.

The code…

.poster-archive-categories a {
padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
line-height: 1.5;
margin: 2px !important;
    border-radius: 0px !important;
    color: #fff;
    background-color: #F34148;
    border-color: #F34148;
    display: inline-block;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    touch-action: manipulation;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

.poster-archive-categories a {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;

.poster-archive-categories a:hover {
    background-color: #fff;
    color: #F34148;
    border-color: #F34148;
Thanks for sharing > the both of you!
Cools. Thanks.
0 / 1000
2 + 5 = ?