Customizing Pelican Theme with CSS

Pat | | Updated on Jul 25 2023

I have been thourougly enjoying my pelican blog. It's pretty simple to use and I love the plan text files for posts. The one downside is my limited experience with HTML/CSS. I know a little but not much so It became a little difficult when I wanted to customize my blog. Pelican uses Python to process these text files and turn them into HTML files that can then be hosted with a standard web server.

I noticed some behavior in the way that my posts would render in the web browser and it took me a little while to figure out how to get it to display the way I want.

CSS is the problem and the solution

I needed to figure out what in my themes (atilla) style.css was causing the issues. The first problem was images getting stretched to fill the width of the blog post. This was causing a 64x64 icon to be streched to a horrible size.

feed-icon

You can see this is not a very attractive image. The problem can be fixed with a little css.

.no-stretch img {
    max-width: max-content;
    margin: 0.5em auto;
}

So I can add the following span with a custom class defined.

<span class="no-stretch">
[![feed-icon]({static}/images/rss-atom/feed-icon64.png)](https://eternaltinkering.com/feeds/all.atom.xml)
</span>

Now all we have to do is figure out how and where to put our custom css that defines the attributes for the no-stretch class. The theme I am using allows a setting that will take priority over the themes built in style sheets.

CSS_OVERRIDE = ['css/custom.css']

We need to get pelican to create output/css/custom.css each time it does a build on our site. Pelican has a setting that will help us with this. In the pelicanconf.py file we add STATIC_PATHS = ['images','css']. This allows us to create a css directory to store our custom style sheet in our content folder that will then be created in the root of the output directory. We can create content/css/custom.css and each time we do a build that will get copied to output/css/custom.css.

Now we can wrap our image we don't want strched in our span and we get the image in original size. feed-icon