Editing the Theme Template in Publii

I've been tinkering with the template(s) for this website. It's slow work because I'm not a webdev expert and what little knowledge I do/did have hasn't been exercised much in the last decade. So I'm kinda feeling my way in the dark; changing something to see if it works, what it does and what it breaks.

It turns out that things are pretty easy to change in Publii, mostly. For most template changes you can set up "Override Files", take a copy of the original template file, edit it and have Publii use the override. Which means it's harder to permanently break anything. Just delete (or temp rename) the override file and you're back to the template standard.

Comments

So,  that's how I added the comments section to blog posts. I took a copy of the template for blog post pages (post.hbs), dropped it into the theme-override folder and inserted the code snippet from the comments service.

I'm using Remarkbox initially. It's simple, it's open source and doesn't have ads or tracking. Most importantly, its payment plan is "Pay what you can". I don't envision receiving more than a few comments a month, if that. But I don't want to be tied in to a system that would start charging lots if I had a single post that attracted more than that for a short while.

I discovered Remarkbox from Darek Kay's blogpost listing a number of ways to include comments on a static HTML site. The post was written in 2018 but looks to have been regularly update. If Remarkbox doesn't end up being what I need, then this post willb e the first place I look for an alternative.

(Yes, there is an option to add Custom HTML in the "Tools" section of the Publii CMS but I couldn't get it to add in the right place.)

Styling

Editing the theme colours in the CSS is a little more difficult.

The CSS for a Publii site (at least with the Theme I'm using, but based on forum chats I saw I think it's the same for all themes) sits in "style.css". But you can't edit or override style.css because it's generated each time Publii rebuilds your site.

Style.css is an amalgam of 

• main.css - You can edit/override this if you're changing an element in here. This is mostly the structural css.
• custom CSS - If you have additional CSS to add, it's best done in a custom CSS file that you can add to the override folder.
• GDPR popup CSS - mmm dunno.
• the output from visual-overrides.js  - haven't touched this one yet.
• the output from theme-variables.js - this is where, for the "Mono" template at least, the majority of the CSS for the colour scheme sits. And this file can be overriden.

In the Mono template part of the visual-overrides.js script sets the colour scheme css based on whether you select Dark Theme or otherwise in the Publii CMS. So, for the dark scheme it looks like (for the Dark Theme)

if (params.colorScheme === 'dark') {
output += `             
--yellow: 40, 100%, 64%;
--blue: 208, 100%, 50%;
  --green: 166, 100%, 34%;
  --red: 334, 100%, 56%;
  --white: #FFFFFF;
  --black: #000000;
  --background: hsla(214, 17%, 8%, 1);
  --background-transparent: hsla(214, 17%, 8%, .85);
  --background-pattern: radial-gradient(rgb(31, 37, 46) 1px, transparent 1px), radial-gradient(rgb(31, 37, 46) 1px, rgba(31, 37, 46, 0) 1px);
  --accent-light: hsla(${accentHSL}, .8);
  --accent-medium: hsla(${accentHSL}, 1);
  --accent-transparent: hsla(${accentHSL}, .5);
  --color-lighter: hsla(220, 11%, 15%, 1);
  --color-light: hsla(220, 11%, 17%, 1);
  --color-medium: hsla(220, 11%, 20%, 1);
  --color-dark: hsla(220, 11%, 60%, 1);
  --color-darker: hsla(220, 11%, 94%, 1);
`;
}

Editing the colour scheme values here lets you set colours for both light and dark themes.