bennadel/code-1.cfm

## code-1.cfm
<link href="./css/vendor-#vendorID#.css" ... />

## code-2.cfm
<style type="text/css">
	<cfoutput>#GetCSSTheme( vendorID )#</cfoutput>
</style>

## code-3.cfm
<link href="./css/theme.cfm?vendor_id=#vendorID#" ... />

## code-4.cfm
<!---
	Param the URL theme. This will determine the look and
	feel of our site by linked to a dynamic style sheet.
--->
<cfparam name="URL.theme" type="numeric" default="1" />

<cfoutput>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
		<title>Database Driven CSS Demo</title>

		<!-- Include the generic CSS. -->
		<link rel="stylesheet" type="text/css" href="generic.css"></link>

		<!--
			Include data-drive CSS. Notice that this LINK tag
			links to a ColdFusion file, not to a standard .CSS
			file. This is how we can generate it dynamically.
		-->
		<link
			rel="stylesheet"
			type="text/css"
			href="override.cfm?theme=#URL.theme#">
		</link>
	</head>
	<body>

		<h1>
			Database Driven CSS Demo
		</h1>

		<p>
			This is a demonstration to show how you can have a
			static style sheet that is then overridden, in part,
			by a database driven style sheet that exhibits
			different look-and-feel style properties.
		</p>

		<ul>
			<li>
				There is once generic style sheet which is static.
			</li>
			<li>
				Then, there is a style sheet that links to a
				<strong>ColdFusion file</strong> that generates
				the look-and-feel styles <em>dynamically</em>.
			</li>
		</ul>

		<p>
			Check out the different looks:
		</p>

		<ol>
			<li>
				<a href="./?theme=1">Theme One</a>
			</li>
			<li>
				<a href="./?theme=2">Theme Two</a>
			</li>
			<li>
				<a href="./?theme=3">Theme Three</a>
			</li>
		</ol>

	</body>
	</html>

</cfoutput>

## code-5.cfm
<!---
	Param the URL theme. This will determine the look and
	feel of the style sheet to generate.
--->
<cfparam name="URL.theme" type="numeric" default="1" />


<!--- Tell the client (browser) that this a style sheet. --->
<cfcontent type="text/css" />


<!--- Figure out which style sheet to generate. --->
<cfswitch expression="#URL.theme#">
	<cfcase value="1">

		<!--- The default theme. No override. --->

	</cfcase>
	<cfcase value="2">

		body {
			font-family: arial ;
			}

		strong {
			background-color: gold ;
			}

		em {
			color: #FF0000 ;
			}

		ul {
			list-style-type: circle ;
			}

		ol {
			list-style-type: upper-roman ;
			}

	</cfcase>
	<cfcase value="3">

		body {
			background-color: #000033 ;
			color: #FFFFFF ;
			font-family: monospace ;
			font-size: 100% ;
			}

		strong {
			background-color: #FFFFFF ;
			color: #333333 ;
			}

		em {
			border-bottom: 1px dotted #FFFFFF ;
			}

		a {
			color: gold ;
			}

	</cfcase>
</cfswitch>
	<style type="text/css">
	<cfoutput>#GetCSSTheme( vendorID )#</cfoutput>
	</style>
	<!---
	Param the URL theme. This will determine the look and
	feel of our site by linked to a dynamic style sheet.
	--->
	<cfparam name="URL.theme" type="numeric" default="1" />

	<cfoutput>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<title>Database Driven CSS Demo</title>

	<!-- Include the generic CSS. -->
	<link rel="stylesheet" type="text/css" href="generic.css"></link>

	<!--
	Include data-drive CSS. Notice that this LINK tag
	links to a ColdFusion file, not to a standard .CSS
	file. This is how we can generate it dynamically.
	-->
	<link
	rel="stylesheet"
	type="text/css"
	href="override.cfm?theme=#URL.theme#">
	</link>
	</head>
	<body>

	<h1>
	Database Driven CSS Demo
	</h1>

	<p>
	This is a demonstration to show how you can have a
	static style sheet that is then overridden, in part,
	by a database driven style sheet that exhibits
	different look-and-feel style properties.
	</p>

	<ul>
	<li>
	There is once generic style sheet which is static.
	</li>
	<li>
	Then, there is a style sheet that links to a
	<strong>ColdFusion file</strong> that generates
	the look-and-feel styles <em>dynamically</em>.
	</li>
	</ul>

	<p>
	Check out the different looks:
	</p>

	<ol>
	<li>
	<a href="./?theme=1">Theme One</a>
	</li>
	<li>
	<a href="./?theme=2">Theme Two</a>
	</li>
	<li>
	<a href="./?theme=3">Theme Three</a>
	</li>
	</ol>

	</body>
	</html>

	</cfoutput>
	<!---
	Param the URL theme. This will determine the look and
	feel of the style sheet to generate.
	--->
	<cfparam name="URL.theme" type="numeric" default="1" />


	<!--- Tell the client (browser) that this a style sheet. --->
	<cfcontent type="text/css" />


	<!--- Figure out which style sheet to generate. --->
	<cfswitch expression="#URL.theme#">
	<cfcase value="1">

	<!--- The default theme. No override. --->

	</cfcase>
	<cfcase value="2">

	body {
	font-family: arial ;
	}

	strong {
	background-color: gold ;
	}

	em {
	color: #FF0000 ;
	}

	ul {
	list-style-type: circle ;
	}

	ol {
	list-style-type: upper-roman ;
	}

	</cfcase>
	<cfcase value="3">

	body {
	background-color: #000033 ;
	color: #FFFFFF ;
	font-family: monospace ;
	font-size: 100% ;
	}

	strong {
	background-color: #FFFFFF ;
	color: #333333 ;
	}

	em {
	border-bottom: 1px dotted #FFFFFF ;
	}

	a {
	color: gold ;
	}

	</cfcase>
	</cfswitch>