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:

#stylesheetLinkTag("TechJunkie")#

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.

Advertisements
  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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: