Dynamic CSS with ColdFusion
ColdFusion
Quick little shout-out here...simple and cool way to have dynamic stylesheets.
We are developing an application that will be used by many different companies, each with their own set of colors and styles.
Basically there is a Company object, which has a handle on its own set of Style attributes.
In the link to the style sheet, I just changed the extension to .cfm (instead of .css)...
<link rel="stylesheet" href="/themes/style.cfm" type="text/css" media="screen" />
And then in the style.cfm sheet, just add a cfcontent tag...
<cfcontent type="text/css" >
Then go on about your cfoutputting...
body{
background-color: <cfoutput>#Style.getBodyColor()#</cfoutput>;
color: <cfoutput>#Style.getDefaultFontColor()#</cfoutput>;
font-size: <cfoutput>#Style.getDefaultFontSize()#</cfoutput>;
font-family: <cfoutput>#Style.getDefaultFontFamily()#</cfoutput>;
text-align: center;
}
We are developing an application that will be used by many different companies, each with their own set of colors and styles.
Basically there is a Company object, which has a handle on its own set of Style attributes.
In the link to the style sheet, I just changed the extension to .cfm (instead of .css)...
<link rel="stylesheet" href="/themes/style.cfm" type="text/css" media="screen" />
And then in the style.cfm sheet, just add a cfcontent tag...
<cfcontent type="text/css" >
Then go on about your cfoutputting...
body{
background-color: <cfoutput>#Style.getBodyColor()#</cfoutput>;
color: <cfoutput>#Style.getDefaultFontColor()#</cfoutput>;
font-size: <cfoutput>#Style.getDefaultFontSize()#</cfoutput>;
font-family: <cfoutput>#Style.getDefaultFontFamily()#</cfoutput>;
text-align: center;
}
Cutter said:
I've used this technique before. It's actually used in our production environment at work right now (1,000+ sites on a shared templated system). One gotcha to mention, and check for.
There may come a time when a value is not returned from a column in your database. Something that a user didn't set in the admin, or intentionally left blank. Unless you are writing default values of your object's properties it could be bad (and even then, depending on how your 'read' method operates in your DAO). The end point is, if the value returned is blank, then your rendered code could read like this:
body {
background-color: #990000;
color: #000000;
font-size:;
font-family: serif;
text-align: center;
}
Now, you and I might think this doesn't matter, but try it. All style declarations for the object, after the 'color' attribute, will be ignored. You might not miss the font on first glance, but you just might beat your head in trying to figure out why your content won't center align. Something to consider...
There may come a time when a value is not returned from a column in your database. Something that a user didn't set in the admin, or intentionally left blank. Unless you are writing default values of your object's properties it could be bad (and even then, depending on how your 'read' method operates in your DAO). The end point is, if the value returned is blank, then your rendered code could read like this:
body {
background-color: #990000;
color: #000000;
font-size:;
font-family: serif;
text-align: center;
}
Now, you and I might think this doesn't matter, but try it. All style declarations for the object, after the 'color' attribute, will be ignored. You might not miss the font on first glance, but you just might beat your head in trying to figure out why your content won't center align. Something to consider...
Aaron said:
Thanks for the tip...that will definitely help avoid some strange layout bugs that would have been hard to diagnose
~AJL
~AJL
Dave said:
So.. how do you validate this css then when its a .cfm file and not .css? How is accessibility taken care of?
James said:
Since you are using this for different companies, try passing the name of the company (or any variable) in the URL. NOTE: It also makes the file look like a regular CSS file and validation programs won't care.
<link rel="stylesheet" href="/themes/style.cfm/company1.css" type="text/css" media="screen" />
(or replace style.css with anything else.... keep it the same for caching or rename it breaking caches.)
You can parse this value by using:
ListFirst(ListLast(CGI.Request_Path,"/"),".")
Adding CFCONTENT (as you recommend) at the top of your CFM file is critical so the MIME TYPE is the same as expected otherwise security programs like Norton Internet Security will block the file from being downloaded.
<cfcontent type="text/css">
<link rel="stylesheet" href="/themes/style.cfm/company1.css" type="text/css" media="screen" />
(or replace style.css with anything else.... keep it the same for caching or rename it breaking caches.)
You can parse this value by using:
ListFirst(ListLast(CGI.Request_Path,"/"),".")
Adding CFCONTENT (as you recommend) at the top of your CFM file is critical so the MIME TYPE is the same as expected otherwise security programs like Norton Internet Security will block the file from being downloaded.
<cfcontent type="text/css">
Mark said:
How are you pulling your variables into the css file. I can't seem to get variables I set in the file calling the css to populate.
Aaron Lynch said:
So, what happens when you navigate directly to the path? Like paste that in your browser address bar?
Mark said:
It just dies at the point I insert the variable. I'm wondering if the variables need to be in the request scope to be used in the css file.
Aaron Lynch said:
I haven't had to do anything like that. Are you setting variables in your main page and expecting them to be available in the stylesheet?
The css call to your stylesheet is a completely different thread . You will need a way to set your variables in that thread.
Does that make sense?
The css call to your stylesheet is a completely different thread . You will need a way to set your variables in that thread.
Does that make sense?
Aaron Lynch said:
There are several different ways to do this but one easy way would be to pass some indicator of which company you want to use.
For example:
LINK REL="stylesheet" HREF="/sites/momentum/lib/css/m-styles_css.cfm?CompanyId=12345" TYPE="text/css"
Or, if you have the companies on different domains, you might use CGI.SERVER_NAME as a way to load up different style attributes.
For example:
LINK REL="stylesheet" HREF="/sites/momentum/lib/css/m-styles_css.cfm?CompanyId=12345" TYPE="text/css"
Or, if you have the companies on different domains, you might use CGI.SERVER_NAME as a way to load up different style attributes.
James said:
You could also pass the company id variable as part of the path string and retrieve it using the "cgi.path_info" variable. This is safer and deemed more reliable by security software as no perceived parameters are being passed. (Just make sure that your webserver allows "dot in path". The default IIS Lockdown Tool setting disables the ability to have multiple periods in the URL.)
HTML EXAMPLE:
/sites/momentum/lib/css/m-styles_css.cfm/12345.css
CFM/CSS EXAMPLE:
{cfset customCSS = "default"}
{CFIF right(CGI.Path_Info,3) IS "css"}
{CFIF listFirst(ListLast(CGI.Path_Info,"/"),"." IS "12345"}
{cfset customCSS= "12345"}
{/CFIF}
{/CFIF}
{!--- switch CSS based on "customCSS" value ---}
HTML EXAMPLE:
/sites/momentum/lib/css/m-styles_css.cfm/12345.css
CFM/CSS EXAMPLE:
{cfset customCSS = "default"}
{CFIF right(CGI.Path_Info,3) IS "css"}
{CFIF listFirst(ListLast(CGI.Path_Info,"/"),"." IS "12345"}
{cfset customCSS= "12345"}
{/CFIF}
{/CFIF}
{!--- switch CSS based on "customCSS" value ---}
Steven said:
Hi I'm trying to implement dynamic style sheets in my site. Problem is though I am using fusebox. When use .css extension styles are fine, but when i rename to .cfm I get an unstyled page.
.: HIDE REPLIES :.
fusionteam said:
You should link to a valid fuseaction, that produces just css output. E.g.
http://localhost/index.cfm/fuseaction/js.add/pagei...
If this is a valid fuse, then the return should be CSS content returned
http://localhost/index.cfm/fuseaction/js.add/pagei...
If this is a valid fuse, then the return should be CSS content returned
James Moberg said:
For the best compatibility, I recommend ending the complete URL with ".css".
Also ensure that you are generating the correct MIME type. I've been noticing the following error on websites (using Firefox) where existing CSS files aren't loaded due to incorrect MIME types.
[ The stylesheet http://www.yourdomain.com/styles.css was not loaded because its MIME type, "text/plain", is not "text/css". ]
Also ensure that you are generating the correct MIME type. I've been noticing the following error on websites (using Firefox) where existing CSS files aren't loaded due to incorrect MIME types.
[ The stylesheet http://www.yourdomain.com/styles.css was not loaded because its MIME type, "text/plain", is not "text/css". ]
Loading....