QTT: Custom Templates in Kaizen CMS

First a brief intro into Kaizen. Kaizen CMS is still a relatively new (or at least new to the public) content management system that was started by John Hoover back in 2007. The cms that exists today is far from the initial and started to take shape in August of ’09 and released as open source to the public in January 2010. I’ve worked with John for over a year now (at DigiMedia and now at Crane|West) and joined him in development of this project in October ’09. It still has areas we are improving on but is the basis we start all of our sites with. The source is hosted on Github and the project is opensource so feel free to fork and explore the code. The project is in active development with lots of improvements in the works.

Now onto the quick tip for today. I’m going to show you how easy it is to create a custom template in Kaizen CMS. Its honestly as easy as one line of code and the cms already has an example of this in ./views/content/contact.tpl file. A custom template is a great way to provide a different look to different pages without affecting the overall site appearance. You might have a page that you don’t want the sidebar to show up on or a page with a completely different header and footer. Kaizen allows you to do this easily without almost no effort on your part. We use smarty for the templates as well. Lets look at the code for the main content template (./views/content.tpl).

1
2
3
4
5
6
7
8
9
10

{include file="inc_header.tpl" page_title=$aContent.name|clean_html menu=$aContent.tag}
 
	<section id="content" class="content">
		<h2>{$aContent.title|clean_html}</h2>
		{$aContent.content|stripslashes}
	</section>
 
	{include file="inc_sidebar.tpl"}
 
{include file="inc_footer.tpl"}

Line 1 does three things. First it includes your header file, in this case it’s inc_header.tpl, then it sets the page title using the content name (page title set in the admin) and last it sets the menu tag (this lets you tell what page your on and can then set a class on your menu to show that. Line 4-5 is displaying the content for the page, so nothing special. Line 8 & 10 are just including the sidebar and footer.
(more…)

QTT: CSS :hover Anchors

An attempt to not only post more but get back into posting code and design related articles, I’m labeling every Tuesday as Quick Tip Tuesday. I’ll post quick and easy tips on a wide range of topics including html, css, jquery, php, iphone dev, os x, wordpress, and kaizen cms. More code and design related posts will come along with the launch of a new site which I’ll be posting about soon.

:hover Anchors

Awhile back I started adding a little more to my anchors on some sites. I first saw this on Matt Brett’s site awhile back and have loved it since. I’ve gotten a few emails asking details on these links and they are actually pretty simple. This is basically a 3 state anchor. You can see this in action right here on PKR. Hovering over a post will cause the links in that article to stand out. Then hovering on the link itself causes a different style. Here is what the basic code looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13

.content a:link, .content a:active, .content a:visited {
	color: #888;
}
 
.content:hover a:link, .content:hover a:active, .content:hover a:visited {
	color: #888;
	border-bottom: 1px dashed #888;
}
 
.content:hover a:hover {
	color: #333;
	border-bottom: 1px solid #333;
}

Thats it, nothing else to it. The first set styles the links as your normally would. This shows when you are not hovering on the .content section. The second set styles the links when you hover on the .content section. Finally you style the link when you hover on it. I’ve setup a quick demo of this which you can check out. This demo styles the anchors on whether your hover on .content, the sidebar or the footer. If using for a blog I would normally change .content to .post (or article if your using html5). This would cause the links to change when you hover on that article and not all.

This is just a quick look at what you can do with :hover. Just think of the possibilities. A quick reminder though that this method will not work correctly on IE6. It works perfectly on IE7 and IE8 though (as you can see if you view the demo in those browsers). You can style the links as you normally would for IE6 to fall back to. So, the links would be styled, they just won’t change on .content:hover.