I’ve always loved it when designers take the time to give their blog posts a little extra polish. Jason Santa Maria did this brilliantly on his old site, and my design hero, Trent Walton, made each post feel like a one-off. With my recent code overhaul, I thought—why not do the same?
My CSS is far less complex than it was a few weeks ago. I managed to reduce the code I use by around 50%. Most of the theming is now done using CSS Custom Properties, which is what made it so easy to make my Elvis-inspired about page design.
I wanted to extend that idea to my blog entries. To make this work, I added a custom CSS field to my Statamic CMS and used an {{ if }} statement in my post template to check for it:
{{ if custom_css }}
<style>{{custom_css}}</style>
{{/if}}Then, I added code to my CMS that adds a class attribute of custom to the body element of any customised posts:
{{ section:body_class }}{{customisation}}{{ /section:body_class }}This renders a <body> tag like:
<body class="custom">
…
</body>Most of the time, customisations will include a new colour theme. So I can now add overrides for my Custom Properties into the custom CSS field:
body.custom {
--color-accent: #9d181d;
--color-background-default: #000;
--color-base: #364461;
--color-border: var(--color-accent);
--color-text-default: #fff;
--color-text-link: var(--color-accent);
--color-button: var(--color-accent); }But I also like to change the colour of my logo to match the customised design, so I added another Custom Property which overrides the default red:
--color-logo-enamel: var(--color-accent);Occasionally, I’ll want to style the headlines of my custom posts, either by changing their typography or even replacing the plain text with a graphical headline. Remembering the days of the CSS Zen Garden and how Dave added extra elements for styling flexibility, I added a class attribute and an additional span element to the template header:
<h1 class="custom__title"<<span>{{title}}</span></h1>When I want a graphical headline—like the one on this page—I can hide the plain text headline (making sure it’s still accessible for screen reader users) and replace it with either a bitmap image URL or SVG code:
{{ if custom_headline }}
<div class="custom__headline" title="{{title}}">{{custom_headline}}</div>
{{/if}}I could even insert code for animated SVGs when I really want a post to pack a punch.
Customisations needn’t stop there, as I’ve added class attributes and extra elements to the page content container, post summary, and its content:
<div class="custom__page">…</div>
<div class="custom__summary">{{summary}}</div>
<div class="custom__content">…</div>But customisations could go even further. My post template contains several structural layout containers which I use across the website:
<div class="container">
<div class="layout" data-layout="muttley">…</div>
</div>Using that class attribute added to the body of customised posts, I’m even able to change the proportions and positions of those layout containers too:
<body class="custom">
…
</body>body.custom .layout {
… }Finally, to make custom posts easier to spot, I stuck little custom stickers onto their entries—on the blog home page, in categories, and even in search results.
These custom post designs let me tailor the mood and style of each article. And because everything’s driven by CSS Custom Properties and lightweight templating, it’s easy to manage. I’m excited to see how far I can push this, maybe even bringing back the spirit of CSS Zen Garden, one post at a time.