Customizing LifeFlow Quickly with Skins

January 7, 2008. Filed under lifeflow 20 skinning 1

Customizing the appearance of LifeFlow is easy.

Take a look at the difference between this:

A picture of a very minimalistic and white webpage.

and this:

A picture of a earth-toned webpage.

Getting from one to the other is remarkably simple, thanks to the idea of LifeFlow skins... other people call them css files, but what the hell, lets be absurd for a second here. Before that though, please note that all skins that come with LifeFlow are released under a Creative Common Attribution license.

So lets take a look at what it takes to get from the first to the second.

The Grand Transformation

It requires one line of python, which goes in the settings.py file for the Django project hosting LifeFlow.

LIFEFLOW_CUSTOM_CSS = "/media/lifeflow/skins/lethain.css"

This skin is included with LifeFlow (mostly as an example for others to modify to their own liking), but you can easily add your own css files to the skins directory and change the path to lead to them instead of lethain.css.

You can look at lethain.css in any checkout of the SVN code, but its short enough to post here as well.

body {
    background-color: #613536;
}
ul {
    list-style: none;
}
div.heading {
    background-color: #363942;   
}
.heading a {
    color: #ff7f24;
}
div.content-main {
    background-color: #eeb4b4;
    overflow: hidden;
}
div.content-main-internal {
    padding-top: 18px;
    padding-left: 9px;
    padding-right: 9px;
}
div.content-sidebar {
    padding-top: 18px;
    margin-left: -10px;
    padding-right: 10px;
    background-color: #ff7f24;
}
a {
    text-decoration: none;
    color: #940505;
}
a:hover { 
    text-decoration: underline;
}

Just some basic CSS styling. Almost all the html elements in the templates are named, so you just have to open up a template and figure out the correct class of the div or other element you want to modify, and then modify it in a custom CSS sheet.

Anyway, I realize this could be more indepth, and I'm sure that an indepth skinning guide for LifeFlow will eventually work its way into existance, but this should be enough to get you started.

In the near future I'll start providing more layout choices (single column with meta content at bottom instead of a sidebar, etc): I want to make customizing LifeFlow an enjoyable and pleasant experience.