Dynamically Selecting a Theme

Most social sites these days offer the ability to theme or "skin" their appearance. It's also common to offer different layouts and appearances for accessibility reasons.

There's a couple ways to address this problem, the first and simplest being to simply select a different set of CSS stylesheets based on some variable, for example:

# index.b

html [
    head [
        link ( href = '%s.css' % c.theme,
               rel = 'stylesheet', type = 'text/css' )
    ],

    body [
        div ( id = 'content' ) [
            c.content
        ]
    ]
]

This method is fine if all you want to do is change fonts or do minor layout alterations. However, as anyone who has done much CSS layout know, doing a full layout rearrangement using only CSS can be something of a pain. Usually it's much easier to be able to change the HTML a bit as well. This is where Brevé's inheritance mechanism can come in handy.

First let's create a file for a "blue" theme:

# index-blue.b

html [
    head [
        link ( href = '/css/themes/%s/style.css' % c.theme,
               rel = 'stylesheet', type = 'text/css' )
    ],

    body [
        div ( id = 'navigation' ) [ slot ( 'navigation' ) ],
        div ( id = 'content' ) [ slot ( c.content ) ]
    ]
]

and an alternate "brown" theme:

# index-brown.b

html [
    head [
        link ( href = '/css/themes/%s/style.css' % c.theme,
               rel = 'stylesheet', type = 'text/css' )
    ],

    body [
        div ( id = 'content' ) [ slot ( c.content ) ],
        div ( id = 'navigation' ) [ slot ( 'navigation' ) ]
    ]
]

And finally, our content.b template:

# content.b

inherits ( 'index-%s' % c.theme ) [
    override ( 'content' ) [
        "You've selected the %s theme" % c.theme
    ],

    override ( 'navigation' ) [
        ul [
            [ li [ a ( href = i ) [ i ] ]
              for i in ( '/home', '/about', '/contact' ) ]
        ]
    ]
]

Because the inherits directive can be dynamic, a different CSS file and a different HTML layout can be selected based on whether the variable c.theme contains the values 'blue' or 'brown'.

Using this arrangement makes it quite simple to create skeleton index files with different arrangements (i.e. themes) and place content dynamically.

You should also review this article regarding fragments and "master templates" if you plan to use AJAX in your site.