I updated a theme

By jeffmackinnon

Published:

Updated:

EDIT:

This project has developed A LOT in the last 11 months (where does the time go). If you are interested in using it, the repository is here - git.jeffmackinnon.com.

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. V1 of the theme published
  5. Custom CSS per page or article with pelican
  6. Batch Files are your friend
  7. Jeff's Pelican SSG Theme

Comments