| Comments

Pick a Theme for Only One Page

The magic will only happen when you read the post :)

As you can see on this page, it is possible to have a different theme for a given page or post (this one is the mighty flatty) !

The Trick

We will use a front-matter variable to select the theme to use. First, adapt source/_includes/custom/head.html:

source/_includes/custom/head.html 

1
2
3
4
5
6
7
8
9
10

<!-- ... -->

{% if page.bootstrap_theme_url %}
  <link href="{{ page.bootstrap_theme_url }}" rel="stylesheet" type="text/css">
{% else %}
  <link href="{{ root_url }}/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="{{ root_url }}/assets/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
{% endif %}

<!-- ... -->

Now, the Bootstrap theme will be choosen depending on page.bootstrap_theme_url. As an example, here is the front of this page:

example front 

1
2
3
4
5
6
7

---
layout: post
bootstrap_theme_url: http://bootswatch.com/flatly/bootstrap.min.css
title: "pick a theme for only one page"
comments: true
categories: octopress
---

Comments