Home > ColdFusion, Web Application Development > LitePost on CFWheels pt. 2 – Integrating a Layout

LitePost on CFWheels pt. 2 – Integrating a Layout

Previously, I took care of most of the set up for the LitePost blog application.  The CFWheels core files are in place, the DB created, the Scaffold plugin installed and executed.  I also downloaded the TechJunkie layout from styleshout.com for the look and feel.  It’s time now to apply the layout to LitePost.

Inside the views/ folder is the layout.cfm which is the main layout for all my view files.  This is where I will be making my revisions.  Looking at the index.html file from the TechJunkie layout, I found where the body content begins and ends.  The author of the layout conveniently commented the exact spot and wrapped it in <div> tags for me.  Then, I copied and pasted everything above the <div id=”main”> into layout.cfm just above #contentForLayout#, while copying and pasting everything after the closing </div> after it.  I then added <cfoutput> tags around everything.

Now I needed to take care of a few last steps to get TechJunkie fully integrated into LitePost.  First, Icopied the entire contents of TechJunkie images/ folder into the images/ of LitePost.  Finally I added a stylesheet link tag just after the <title> tag in layout.cfm.  CFWheels has a nice helper function to get this done.  My code looks like this:


CFWheels knows automatically to look in the stylesheets/ folder for stylesheets.  Similarly, CFWheels already knows to look in the images/ folder for all the images I added from the layout earlier.

Thanks to CFWheels, I have spent more time writing this blog entry than I have coding so far.  Next I’ll start coding the main blog page, the entry listing page, and individual entry display page.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: