In Publii, access the Tools & Plugins page, then select "Custom CSS":
You'll find a text area to paste in your custom CSS rules.
These changes will be added after the theme's CSS rules, so they will override existing rules (see Publii's docs on their rendering proecess).
I find that the in-app code editor isn't ideal for major CSS changes and editing. As someone who heavily modifies Publii themes to create custom sites, I prefer editing the theme's CSS files directly.
This allows me to modify the stylesheet in its context and understand how the styling works. It also allows me to leverage my code editor's shortcuts and plugins to make the work more efficient.
To do this, find your site's theme folder. Click on the three vertical dots at the top-right, and click on App Settings:
Scroll down to "Files location", and open the Sites location in your file explorer.
In your file explorer, navigate to Publii > sites > [your site name] > input > themes > [theme-name] > assets > css.
Open the main.css file in the code text editor of your choice. I like using VS Codium.
From there, you can make the edits, modifications, revisions, etc. that you like.
If you're using one of Publii's themes, you may notice that Publii updates their themes a few times a year. Installing a theme update to Publii risks overriding any changes you've made directly to your theme files.
To avoid this, you can either:
a) Stick to using the Custom CSS page inside of Publii, or
b) Use theme overrides
Here's how to create a theme override:
In your site folder, go to [name of your site] > input > themes. There should be a folder named after your current theme. Let's assume you're using the Simple theme:
site-name
└── input
└── themes
└── simple
You're going to create a theme override folder. In the themes folder, add a folder with the same name as your theme followed by -override. So, if you're using the Simple theme, your new theme override folder will be called "simple-override":
site-name
└── input
└── themes
└── simple
└── simple-override
Create a series of folders to match the structure of the main.css file in the original theme folder:
site-name
└── input
└── themes
└── simple
└── simple-override
└── assets
└── css
Copy the original main.css file in your original "simple" folder, and paste it inside your theme override's respective folder:
site-name
└── input
└── themes
└── simple
└── simple-override
└── assets
└── css
└── main.css (copied from the original theme folder)
Make all of your changes in there. Typically, when I edit main.css, I make sure to add comments /* like this */ to track every new insertion and modification.
When a new theme version is released, I make sure to compare my theme override's main.css against the new one to see how updates impact my existing modifications.
To learn more about HTML, CSS, JS, I recommend:
Found these tips helpful? Consider supporting my work so that I can keep going. 😊