For a while I have been thinking of having my Django sites include CSS styling from a database; for instance having different themes that can be switched on and off at will. It took me a while - with some help from Django users & docs - to figure out how to do it.

My eventual solution uses a template file containing variable names where colours should go; the variables get their values generated at run-time from the database.

Designing and populating a database to manage the variables is pretty straight-forward; generating the CSS file is not a common feature it seems hence this posting.

The Template

Suppose we have a template containing CSS which we want to alter dynamically; something like this

#afc-portal-globalnav  {
  background-color: {{ globalnav_background_normal }};
  border: 1px solid {{ globalnav_border_colour }};
}

#afc-portal-globalnav ul {
  color: {{ globalnav_colour_normal }};
}

Here we have a few variable names (globalnav_background_normal, globalnav_border_colour, etc) we want to replace with colours picked from our database.

The View

We can create a Functional View which sets-up the page, queries the database, generates from the template and returns the page

In the first part, we make sure the response will be of the appropriate type. We need to do more here to make sure the page will be cached appropriately - we do not want to be generating this file for every query.

def themecss(request):
    # Create the HttpResponse object with the appropriate header.
    response = HttpResponse(content_type='text/css')

Now we can query the database and assemble the key, value pairs for the variables with their colours.

context = {}
for item in Tag.objects.all():
  context[item.tag] = item.colour

And finally we load the template with our variables and return the page.

t = loader.get_template('afc_skin_theme.css')
c = Context(context)
response.write(t.render(c))
return response

With this in place and our database populated with an appropriate structure, we can define an url to call the view and include this in our regular pages. Without any caching controls, the styling can be changed more or less immediately.

Dead easy when you know how, eh?

This blog post was posted to Technobabble on Thursday August 14th, 2014 at 3:25PM
 

Leave a Comment

All comments are moderated and hidden until reviewed; please preview before posting. You can use bbcode in the comment: e.g. [b]This is bold[/b], [url]http://www.willmcgugan.com[/url], [code python]import this[/code]
Preview Posting...
Previewing comment, please wait a moment...
Search for Posts
Possibly related posts
Tags
 
Popular Tags
 
Archives
2014
 
Recent Comments
As you mention, it is true that an unregistered record cannot be used in the (Select *) method of setting ...
 
© 2013 Andy Ferguson