Joomla Blog

Tutorials, reviews, case studies and other tips to help website owners and website developers master the Joomla content management system.

K2 templates

This week's newsletter will explain how you can get a custom K2 template working for your Joomla website. It's a bit more involved in terms of file manipulation, but we'll look at it from a very general point of view, give you some tips and explain why we think this is a really nice feature. You will need either good knowledge of and access to cPanel or a good command of FTP. You will also need to know a bit about CSS, and remember that you can always get professional help when you need it.

Currently, K2 runs natively on Joomla 1.5, but there is a 2.5 RC version available for all three levels of Joomla at the moment. This means that if you're comfortable using software that's still in development, you can start playing with it now. Just don't install it on your production 1.6 and 1.7 sites yet. It also means that we should be getting pretty close to a production stable version of K2 for versions 1.6 and 1.7.

One of the main benefits of using Joomla is that you can change the look and feel very easily with a new template. And just like Joomla, K2 comes shipped with its own default template for displaying categories and items. Of course, we'd like to be able to have the option of changing that default template and customizing the look and feel the way we want. The steps for making this possible include copying and pasting some files into specific directories, assigning the new template in the K2 administrator area and then modifying the files like you would any template files.

Here are the specifics:

Copy this: /components/com_k2/templates

Paste here: /templates/YOURTEMPLATENAME/html/com_k2/

Here's what you'll find in there to begin with:

Rename the default folder within /templates/YOURTEMPLATENAME/html/com_k2/templates to something more meaningful for you. We'll call ours /uke_template.


Copy this: /components/com_k2/css/K2.css

Paste here: /templates/YOURTEMPLATENAME/css/

Copy this: /components/com_k2/images

Paste here: /templates/YOURTEMPLATENAME/com_k2/

So you will end up with this:

And as you can see in the picture above, some templates will be "K2 compatible" meaning they have already gone through this process, and you will find their custom templates right here as well, along with a couple of extra php files. You'll see those templates available in the drop down box in the K2 administrator.

This allows you to modify the php code of the template for layout and behavior if you know how to do that. It also allows you to modify the CSS code for layout and display, which is normally a bit easier. You can copy, paste and rename the folders inside /templates/YOURTEMPLATENAME/html/com_k2/templates as many times as you'd like to come up with new templates to use in K2. However you can only modify the CSS code once for all of your custom created templates.

Once you have these files copied and pasted into the correct places, you simply go to the back end of the Joomla Administrator and navigate to the Categories page of the K2 section, find your category that you'd like to apply your new template to and set it in the pull down like this:

Now you can see the template we just created along with the Joomla template creator's K2 templates in the drop down.

With this method, all of your custom templates will use that same CSS file you copied earlier. There is a method similar to this that also takes advantage of a plugin called CSS4K2 from that allows you to have numerous CSS layouts/designs as well, but that is a bit more involved and something advanced users might benefit from.

By going through this process, you have a lot more control over the look and feel of each category within K2. And you can style the overall look of K2 to match your website exactly. One of the best things about this method is that you insulate yourself from doing "real" damage to the layout, because if things go wrong with the files you are changing, you can always reset your template in K2, copy the default template back in again and start over.

As always, before you make changes like this, back up your site! Good luck and have fun.

Rate this blog entry:
Joomla language files
How to create Joomla sliders

Related Posts



No comments made yet. Be the first to submit a comment

Free Joomla TutorialLearn Joomla for free with our 16 lesson, 2 hour course.

Get Started