I updated a theme

Published:
By jeffmackinnon



I did it! One of my kids passed along their cold and I really have some brain fog. I took a rapid-test and know it isn't covid, but still sucks.

Anyway, developing a theme for pelican is actually really easy. What you are seeing right now is my alpha at best, but I'm surprised how easy it was to go through the process.

It was a post titled How to write a Pelican theme for your static website by The Digital Cat that gave met he confidence that it isn't really hard to figure out.

Of course, the web and HTML5/CSS has come a very long way since I was heavy in the design, so I browsed the web and found one from HTML5UP called Editorial.

What I changed

I started off by downloading the HTML5UP theme and browsing the HTML and CSS to get a lay of the land. Then I re-read the Digital Cat article and figured out where I will go from there.

1 Create the structure

The first step was to get the files in the right folder structure.

Using the simple theme that is included in the pelican build as the starting point for the templates.

2 Build the base

Next I opened the simple base and started to make the changes needed to make it look like the Editorial theme. This included making the sidebar work, adding the proper CSS links, etc.

3 Build the index.html file

For this I just wanted something that would work, so I didn't spend a lot of time messing around with the various sections, and added the article to the last section.

I used the following code based on the photos plugin how to use in templates. Then I added the more button.

4 Build the article.html file

The only change that I made to the simple template file was to add the artile image code.

And profit

That is all the work that I'm going to be doing for now, so if you see something broken let me know @jeffmackinnon.



This post is part 2 of the "How I Pelican" series:

  1. Installing Pelican for the first time again
  2. I updated a theme
  3. EXIF data with a pelican-photos Gallery
  4. Custom CSS per page or article with pelican

Click Here to Comment on Mastodon.

If its your first time commenting, click here to figure it out.