This theme was created to demonstrate the customisation possibilities for BlockPress. My intention was to make it quite different from the Dark Theme currently featured on the BlockPress website. There are some nice features in this theme but before I walk you through them, have a look at my code on GitHub:

GitHub commits

• Theme Update
• Responsive Design
• Support for Responsive Design

Sidebar menu

This is a screenshot of the homepage. As you can see the menu isn't visible. There is a menu button in the upper left corner. Once you click it, the sidebar pops out and the page rearranges itself slightly.

This is the most advanced feature of Dana's theme. Implementing it required writing a jQuery function.

To close the sidebar just press the x button and the page comes back to how it was before.

Colour palette

Because this theme is implemented on my BlockPress site, I decided to pick some colours from my current profile image and banner. It was an easy thing to get inspiration from and results in an elegant look.

Currently the banner image is hard coded in the header. Eventually, I would like it to load from the steem account of the user. I added a gradient layer with some opacity to visually integrate the image into the rest of the page.

I also customised the colours of the social media icons to fit the palette.

Responsive Design

Implementing the responsive design feature for this theme was quite straightforward. I allowed the content area to span the width of the screen. I also removed the sidebar and placed the menu at the bottom.

Thank you for reading.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---