Customizing the Look and Feel of Blix

June 16th, 2007

Hi everyone, with the release of our new version of the Blix replacement, Blix Krieg, I thought I’d take a few moments to jot down a few Q and A’s about the upgrade process.

Q – I’ve customised the look of my theme – how do I keep these customisations?

A – If your customisations are simply CSS customisations, it’s quite safe to copy your old layout.css and spring_flavour.css right over the top of the new Blix Krieg installation.

You won’t break anything and it should make your Blix Krieg installation look exactly the same as before.

How did I achieve this? I added a new css, asides.css, which contains all the Blix Krieg 2.2 customisations rather than adding them to one of the pre-existing css files.

Q – I don’t like the header – I want a different image – how do I go about changing it.

A – The header image is contained in the /images/spring_flavour/ folder – the name of the image is header_bg.jpg.

If you want to change the header, just replace this with another picture, and call it the same thing.

This should be a jpg picture, should be at least 690px wide x 150 px high if you don’t want to have to modify the css.

Q – I’d like to make my site ‘look’ different, but I’m not sure where to start.

A- OK, common question. There are three files called css files in the Blix Krieg theme – if you go to your admin panel, then presentation, then theme editor, you’ll find them – one’s called layout.css, the other is called spring_flavour.css

layout.css contains the basic bare bones of the theme – things like column widths and font sizes etc.. Spring_Flavour.css contains things like font colours, button colours, header formatting etc.

If you want, you can remove the contents of spring_flavour.css alltogether and see Blix Krieg in it’s untamed glory (but make sure you keep a copy so you can put it back later).

In the majority of cases, if you wanted to change the look of Blix Krieg (colours etc), the file you’re going to want to play with is spring_flavour.css.

So, here’s some tips..

1. Click here to do a google search of other people using this theme, and check out the customisations they’ve done. We’ve got alot of talented designers using the theme, and having a bit of a browse at what they’ve done can be useful. Find one you like the look of.
2. For this step, you’ll need to download the latest version of a browser called firefox (it also has something called ‘google toolbar’ which is useful).

3. Download Chris Pederick’s web developer extension here.
4. Go to a site you like, and use the ‘CSS’ option in the web developer menu to check out the changes they’ve made to their CSS.
5. Adopt and adapt changes you like..

Have you got any other Questions you’d like answered? Feel free to leave them in the comments section below.

Cheers,

theDuck

Tags:
How to Customize Blix CSS
How do I change the header image in Blix?
How can I view other people’s CSS changes?

Entry Filed under: BlixKrieg Theme