OK - how do I use a CSS stylesheet and CFDocument?
Right now I have several very simple .cfm pages - a print.css file and my print.cfm - which pulls in my various pages via cfinclude:
-
<cfdocument format="pdf">
-
<cfdocumentitem type="header">
-
<h4>Waste Pickup Request System Manual<h4>
-
</cfdocumentitem>
-
-
<cfdocumentsection>
-
<cfinclude template="createrequest.cfm">
-
</cfdocumentsection>
-
</cfdocument>
This works and gives me my un-styled content.
OK. But where do I include my stylesheet?
I tried:
-
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
-
<cfdocument format="pdf">
-
...
-
</cfdocument>
Doesn't work. Digging around in the live docs - someone mentions including it inside the cfdocument:
-
<cfdocument format="pdf">
-
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
-
...
-
</cfdocument>
Nope. Doesn't work.
If I include it within each cddocument element - it works - but I get weird CSS scaling issues:
-
<cfdocument format="pdf">
-
<cfdocumentitem type="header">
-
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
-
<h4>Waste Pickup Request System Manual<h4>
-
</cfdocumentitem>
-
-
<cfdocumentsection>
-
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
-
<cfinclude template="createrequest.cfm">
-
</cfdocumentsection>
-
</cfdocument>
If I include the stylesheet withing my cfincluded page - it works -and I guess that is going to be my solution unless someone can tell me what I'm doing wrong here! 
Update - August 17
My final solution - which seems to work OK... I include the stylesheet within the main cfdocument - and that seems to style the cfincluded templates. Then I call the stylesheet again within each cfdocumentitem to style the header and footer.
-
<cfdocument format="pdf">
-
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
-
-
<cfdocumentitem type="header">
-
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
-
<h4>Manual: HSB Waste Pickup Request System</h4>
-
</cfdocumentitem>
-
-
<cfdocumentitem type="footer">
-
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
-
<cfoutput><p>PAGE: #cfdocument.currentpagenumber# of #cfdocument.totalpagecount#</p></cfoutput>
-
</cfdocumentitem>
-
-
<cfinclude template="createrequest.cfm">
-
<cfdocumentitem type="pagebreak"/>
-
<cfinclude template="selectchemical.cfm">
-
<cfdocumentitem type="pagebreak"/>
-
<cfinclude template="checkout.cfm">
-
</cfdocument>
Update - August 20
Tried Julian's suggestion (see comments below) of using the file protocol:
-
<cfdocument format="pdf">
-
<link rel="stylesheet" type="text/css" href="file:///#expandPath(".")#\print.css">
But oddly enough this didn't work at all - no styles were applied...
You May Also Enjoy Reading:
8 Comments
What would be nice is if I could do:
cfdocument stylesheet = “print.css”
You’re not doing anything wrong there. What you’re doing is exactly what you should be
An alternative is to have a generated HTML page and then use cfhttp to get that page and then use it to create the cfdocument. You might find this produces more reliable results and allows you to use a stylesheet
The problem is these pages are just content - there is no HTML header/footer, etc. I could maybe generate a printer friendly index.cfm and call that with CFDcoument - but that seems like extra work I shouldn’t have to do.
agreed. Are you perchance running CF8? I found cfdocument far better with CF8 than 7, even with existing apps.
First off Jim is correct, you need to have a fully valid HTML page in order to get cfdocument to even remotely render correctly.
I would recommend (and what I personally do) is create your page statically first with some dummy data and then validate it against the w3c validator. Make sure your using XHTML 1.0 Transitional, that seems it to work best.
The final step is DO NOT use link on inline styles within your cfdocument, you MUST use import to load your css. This was mentioned to me a long time ago and I’ve always remembered it. It’s saved me a bunch of time and frustration.
Not running CF8 (yet)… Tony - I’ll try using an import vs. a link to call my CSS. I’ve updated the post above with my final solution - and it seems to work OK. And FWIW - none of my cfincluded documents include any doctype, head/body, etc…
OK - FWIW - I get the same behavior with @import. I still have to include it within each cfdocumentitem, etc - no different than using link…
Jim, try using the file protocol with a file system path to the stylesheet:
[link rel=â€stylesheet†type=â€text/css†href=â€file:///#expandPath(myCssDirectory)#docstyles.cssâ€]
Note the 3 slashes, not 2. This is vital.
Also, my understanding is that only html 4.0 is supported in cfdocument (ie not xhtml).