10 - Templates for New Content Types

In this installment the remaining unique content styles from the purchased template set are brought into ExpressionEngine templates and some additional coding tweaks are applied for better page structure, search engine optimization and accessibility.

Download the EE Code for 10 - Templates for New Content Types

OK - progress has slowed a bit this week, but I think after this installment we’ll be ready to (finally) get to some nuts n’ bolts ExpressionEngine integration rather than more prep work. 

What I’ve been able to do since the last post is essentially two things: create EE templates from the remaining unique content types in the template set I purchased for this project, and some HTML and CSS level tweaking so that I’m better satisfied with the results.

I don’t intend to walk you through step by step on each change but rather will give you an overview of each of those two areas and then just provide you with both the new and updated EE templates - essentially a complete update to where I’m at with the code.  I’m doing this because I don’t intend this tutorial series to focus on HTML and CSS issues; so I want to get through this step as efficiently as possible. The quicker I do that, the quicker we can get to the good stuff.

New EE Templates
What I did here is go back to the original template set as purchased from ChristianTemplatesOnline.com intending to pull them all into EE templates.  While looking through them I realized that in many cases they are very much the same, with just some different formatting options in the content. And, the way I’d already chunked up the index page template in EE made them destined to be even less unique.

So what I decided to do was create “catch-all” templates in EE for the content types that are significantly different.  Then in each of those catch-all templates I would put the different less significant content elements in as examples.  This way when I want to implement a new area on the the church site, I can grab a copy of the most appropriate EE page-comp and use it as a buffet table, choosing the elements that make sense for the content type at hand and deleting the rest.

What I ended up with is four new EE templates:

  • page-comps/one-column-content
  • page-comps/two-column-content
  • page-comps/two-column-directory
  • page-comps/contact

HTML/CSS Updates
While working through the templates I also decided to tweak the markup for more semantic page structure, better SEO and higher accessibility.  Here are the highlights of my efforts in that area:

  • Revamped embeds/page_header to put the site name in an h1 tag, logo graphic moves into the CSS as a background image. h1 text is hidden in the browser but displays in place of the graphic if the CSS is disabled
  • Worked h2, h3 and h4 tags into all content areas.  This required some minor styling changes but I felt it was worth it for the improved markup
  • Marked content up with paragraph tags, added styling for better paragraph spacing, this allowed me to remove many break tags
  • Fixed naggling main navigation issue where “current” main navigation text would disappear on hover.
  • Reworked the Contact form to remove markup in the HTML and got it validate as XHTML
  • Re-organized the CSS template so it more closely matches the overall page structure, letting me find styles more quickly

Companion Files
Attached to this post is a zip archive that includes all the EE templates that I currently have - since most of them were modified in this process it just made sense to bundle them all up for download.  Again, the folder names map to template group names, and text file names are EE template names.

What Next?
I’m anxious to get some content moved over into ExpressionEngine weblogs, so we’ll start at the home page and decide whether it gets a dedicated weblog, or just some entries from a Miscellaneous Content weblog.




Category Navigation

<< Previous Entry   

Next Entry >>


Previous Comments

Picture of cmalani

by cmalani

Date: Thursday, May 15th, 2008
Comment: #1

Just a heads up, this doesn’t appear to be in the “Building a Church Site” category…

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, May 15th, 2008
Comment: #2

Fixed - thanks!

Picture of Jan

by Jan

Date: Thursday, May 21st, 2009
Comment: #3

Hi Mike,
I’ve been using your business site tutorial, and now the church tutorial. You do a fantastic job. Everything has been going smoothly, but I ran into a snag and have spent 3 evenings going over everything to figure out where I messed up. I put the URL above to a test page where you can see the code with “Firebug”.  When I changed to your new/improved main_nav, the “banner” image won’t show up. It was fine just prior to the template changes made in Lesson 10. I’m making some relatively minor changes in the graphics, but nothing that I can see would interfere with the new navigation. I know you have little time and I hate to impose on it, but maybe you can quickly spot something that I’m blind to!?

Picture of Jan

by Jan

Date: Thursday, May 21st, 2009
Comment: #4

Wow, love it. I struggled for 3 nights, and as soon as I asked you for help I looked again and “saw” the problem!

Your style sheet code “body#home #banner {
  background:url({site_url}/images/interface” has a forward slash after {site_url}. Apparently for me, that slash is also accounted for in {site_url} making two of them! I was looking in the templates…I thought I’d gone through the Firebug Element Inspector with a fine tooth comb…but that’s where I went blind until just now.

So, thanks anyway. I got blessed just by asking! I hope it ricochets to you too!

Mike Boyink

by Mike Boyink (Author)

Date: Friday, May 22nd, 2009
Comment: #5

Hey Jan - good catch, thanks.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...