Octopress Categories with Different Styles

| Comments

As I use the code blocks for ingredient lists on my recipe pages I wanted to have a different style, lighter background instead of black.

I currently manually set a different layout in the _post header:

layout: post
- Tech

layout: recipe
- Cooking

The layout will then look for a matching layout in source/_layouts

Manually create your new layout (instructions from top level Octopress site):

cp source/_layouts/post.html source/_layouts/recipe.html

Edit source/_layouts/recipe.html changing the role to recipe:

layout: default
single: true

<article class="hentry" role="recipe">
  \{\% include article.html \%\}
    <p class="meta">

This will now pick up the styling that post also gets but we can target our modifications to article[role="recipe"]. For custom stylings apply changes in to the relevant file in sass/custom/.

To modify the background colour of a code block
sass/custom/_styles.scss add:

// Customise the recipe layout
article[role="recipe"] pre {
  background-color: $sidebar-bg;

NB: $sidebar-bg is defined in sass/base/_theme.scss