Launch Date: 
Sunday, Dec 22nd, 2019

My blog was already running on Backdrop, but I recently decided that I wanted it to have a new look. It all started with a template I came across when looking for a new design for my sister's website. I loved the layout, and so when my sister ultimately picked a different template to go with for her site, I decided to use this template for my own.

I created a new layout for Backdrop called 'Bamboo' which provided the layout I wanted. It features only two regions: Sidebar and Content. The sidebar is fixed and stays in place as you scroll through the site. If the contents of the sidebar are too long to fit on the screen, you can scroll the sidebar separately from the content (though the scrollbar's been hidden for aesthetics). On smaller devices, the sidebar is hidden off-screen and appears when you click a menu button.

Once I had the new layout working, it was time to theme the site. I'm somewhat of a minimalist, and since my username online is 'BWPanda', I decided to go with a black and white design (the 'BW' in 'BWPanda' stands for 'Black & White'). The theme is written specifically for Panda.id.au, and since contributing it to Backdrop would require making it work for all core layouts, I decided against it. But it's a sub-theme of my custom base theme, PackWeb, which is publicly available if you're interested. I like the separation of layouts and themes in Backdrop. It means that a theme is generally just basic CSS changes (colours, hover effects, etc.). At least that's the case here.

Some notable things in my theme include:

  • The main header/hero image. It's a photo of a street in Tallinn, Estonia that I got from Pixabay. I chose it because Tallinn is where I'm currently living, but I'll be moving back to Australia in a few months and so I wanted to keep a piece of this beautiful city on my site. I simply cropped it a bit and made it greyscale to fit the theme of the site.
  • The scroll button at the bottom of the header on the homepage. I realised after making the header take up the full height of the screen that people may not realise they need to scroll down to see the content. I looked around for a library/module that would do this for me, but couldn't find anything simple enough and so just made my own using template overrides and the Smooth Scroll module.
  • Adding a '#' in front of all tags on the site. This was simply a matter of using CSS pseudo selectors to display a '#' before any place where a tag (taxonomy term for categorising content) was shown. And in order to do it for the page title on pages such as '#backdrop', I just added a 'tag' class to the body element on 'tags/*' URLs in a preprocess function.

I guess that's all there is to it. Being just a theme/layout change made it pretty simple/easy. However I recently tried to create a more Github-like editing experience on the site (using a Markdown parser, adding automatic permalinks to headings, etc.), and more about that can be found here: https://panda.id.au/posts/creating-github-editing-experience-backdrop