candidexmedia

Option 1: Custom CSS in the Publii GUI

In Publii, access the Tools & Plugins page, then select "Custom CSS":

You'll find a text area to paste in your custom CSS rules.

candidexmedia

I'm working on a custom Publii theme that's derived from an existing theme, but doesn't make use of theme overrides. I'm making the changes directly to the theme files, because I want this to be a standalone theme by the end of my modifications.

As I learn new things, I'll add them to the list below. Let's assume we're starting from the "Simple" theme, and changing it to a new theme called "My-New-Theme"

1. Make sure the folder name for your theme and the name in config.json match:

Folder structure:

.
└── site name/

candidexmedia

Custom HTML Elements (via customElementsMode)

Custom Elements allow you to wrap selected text in the editor with the HTML tag and CSS class (optionally) of your choice <element>like this</element>. These wrappers can be given custom names and grouped in subfolders.

A huge thanks to @b0fh for guidance on this in the forum and GH discussion.

Instructions

candidexmedia

Deploy the new NocoDB template

1. Go to the dashboard

2. Click New Project

3. Click Deploy a template

4. Search for NocoDB

candidexmedia

(Response to: https://forum.getpublii.com/topic/post-modification-date-manual-editing/)

Just wanted to chime in on this topic:

You can modify the post mod date -- just not in the UI. You'll just need to edit the db.sqlite file in your site folder. I use SQLiteStudio. It looks like the modified_at value is based on Unix Time (from what I gathered with ChatGPT).

Tomasz Dziuda wrote: >

candidexmedia

Here's a 2nd fix for the forum topic Need Help with Publii Glitches in Author and Tag Descriptions, which uses the Simple theme. Demo of issue:

I'm assuming you're editing the main.css file in a theme override. If you're using "Custom CSS" inside Publii, try to override every rule that has to be deleted using "unset" (ex: .hero { position: unset; })

.hero Class

Delete or comment out the following three lines inside the .hero rule:

.hero {
  height: var(--hero-height); /*delete this line*/

candidexmedia

This is an explanation of how to achieve a Masonry gallery effect for Photoswipe galleries in Publii, in response to the forum post "Why a masonry layout for front pages, e.g. Mercury, but not for the galleries ?"

Credit: Yaroslav Khvorostyanenko - "Masonry gallery for Publii static CMS" and https://koolkat.photography/

Instructions

Go to your site folder > input > themes > [theme name] > css and edit the main.css file in the text editor of your choice.

Comment out (/*like this*/) or delete all the lines of code related to the gallery. These lines should be near the end of the file, around line 2,312. Next, paste the following code:

candidexmedia

UPDATE: This method seems to be working again. If it ever stops working again, try GTranslate instead

Google Translate Widget Script

This is an English expansion of the Google Translate widget script covered in this video: https://www.youtube.com/watch?v=5meQKQhGBZg. Thank you to Programming with Vishal !

To get started, place this script in Tools & Plugins > Custom HTML > Footer:

Basic

candidexmedia

(Code Snippets for: https://forum.getpublii.com/topic/where-should-the-font-files-be-put-if-self-host-google-fonts/#post-7040)

Update: it is now easier than ever to add custom fonts in Publii. See: How to Add a Custom Font (Publii Docs). You can still use the Google Webfonts Helper to download the woff2 files (or download directly from the Google Fonts, or the Font Foundry)

Here's a summary of what you'll want to do:

1. Download the .woff2 files for your font. Ideally, it should be a variable font file.

candidexmedia

Code snippets for: https://forum.getpublii.com/topic/looking-for-the-best-way-to-include-schema-markup/

Method 1: Custom Head + Post Template + Post Settings

1. Create a theme override
2. Duplicate the "head.hbs" partial and name it something new (ie "head-recipes.hbs")
3. Create a custom post template that you'll use for recipes (ie "post-Recipes.hbs"). In this custom template, swap out the old {{> head}} for the new head partial {{> head-recipes}}
4. Create a new version of "config.json" in your theme override. Edit this file, and add a custom post setting for this new template via the Theme Settings API (textarea type):