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.
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:
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
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.
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.