There is a simple approach on how you can accomplish user driven site design by letting them select different CSS files or skins.

What I did is put an XSLT rendering into the head section of the layout that will be reused across the pages:

<head>

<title>Some title</title>

<sc:XslFile ID="styleSelector" Path="/xsl/styleselector.xslt" runat="server" />

</head>

The source of the xslt rendering is looking for the “css” field of the “home” item which is a lookup pointing to the media library:

<!-- getting the id of the selected css asset -->

<xsl:variable name="cssAssetID" select="sc:fld('css',$home)"/>

<!-- getting the actual path of the css asset -->

<xsl:variable name="cssAssetPath" select="sc:fld('path',sc:item($cssAssetID,.))"/>

<!-- building the CSS link tag -->

<link href="{$cssAssetPath}" rel="stylesheet" type="text/css" />

The logic eventually outputs the link tag with the CSS file reference.

The “css” field is just a lookup field pointing to the media library repository with already uploaded CSS files and looks like:

css_field

The result of different selections is shown below.

For the “Basic Blue” selection:

blue_layout

For the “Basic Red” selection:

red_layout