Custom backgrounds on Shi Wai Yuan

Text

Custom backgrounds on Shi Wai Yuan

One of the cool design elements of Shi Wai Yuan is the dynamically changing mood-setting background of the site. At this point the site has 6 different backgrounds (grapes, wood, leaves, sky, steel & carbon fibre), each supposed to be somewhat relevant to the section of the site being viewed; so you’ll find the background of the site is grapes when you’re viewing the wine and spirits section of the site, and greenery when you’re browsing the health section.

^ A couple of screenshots showing the different BG’s

This is actually pretty easy to do - we’re just applying different classes to the <body> tag of the site, so that different background graphics can be loaded via CSS.

body.leaf {
background:url(“../images/background_leaf.jpg”) repeat scroll 0 0 #EFEFEF;
}

^ This loads the site with leaves in the background.

body.sky {
background:url(“../images/background_sky.jpg”) repeat scroll 0 0 #EFEFEF;
}

^ This loads the site with clouds in the background

So the CSS is very simple, we just need to be able to define which class the page should load with, depending on the section of the site we’re in. This is also really simple using MODx Revolution, you can create a Template Variable for every template, set the type as ‘image’ so that your content editors can select images from the resource browser and you can then define your <body> tag in your templates as so:

<body class=”[[*BackgroundImage]]”>

For obvious reasons, you don’t want to have to do this to EVERY page on your site, that would be a painful chore (and your editors might forget)… So, there’s a few options, the simplest would be to use a default value for the template variable. For our needs we opted to use @INHERIT for the default value of the TV, meaning that we can define the image just once at the top level and all sub pages will inherit it’s parents’ field value (and so on up the tree). This means that by default, if we only set the field for pages at the root level of the site, then all pages beneath root level will have the same background as it’s ‘ultimate parent’.

^ TV config

(Evo is also capable of this in the same manner described above, but you should be using Revo by now =P)

The best part about this is the flexibility - it gives you the power to set a different background at the page level if you need to, but also allows you to change the background of an entire section by just setting one field (for those of us who are lazy).

More info on @INHERIT in these two links:

View comments

1
Notes

zaigham reblogged this from digitalbutter and added:

section backgrounds...MODx Revolution. :)
digitalbutter posted this

Digital Butter

Custom backgrounds on Shi Wai Yuan