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:
1 comments:
I did something similar, but included a recursive check on my CSS file field. In case the current item doesn't have this value set, it will go up the tree until it finds an item that does have it. That way it's easier to make area-specific CSS and one doesn't need to edit every page!
Post a Comment