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:
The result of different selections is shown below.
For the “Basic Blue” selection:
For the “Basic Red” selection: