Web development , php , ajax , symfony, framework, zend
In: web resources
21 Jul 2009In choosing a CMS, one thing you should consider is the theming or templating process. While some CMSs have very simple and easy-to-use theming systems, others can be a real bear to use.
Below are tutorials for some of the more popular CMSs out there. Some have tons of tutorials available (WordPress, Drupal, Concrete5) while others have limited documentation outside of the official site (Magnolia, Umbraco, TYPOlight). Some CMSs we’d planned to feature had little readily-available theming documentation and were left off the list entirely. In any case, whatever CMS you choose should have reliable, easy-to-understand instructions for creating custom themes, either in the official documentation or easily available within the developer community.
CMS Made Simple is an open source CMS built in PHP.
This page from CMSMS’s documentation covers all the basics for creating your own templates. It also includes information on customizing the default templates.
This tutorial shows three different ways to use custom CSS with CMS Made Simple. Methods included are using metadata in global admin settings, directly in the website templates, and using the native stylesheet mechanism of CMSMS.
Concrete5 is an open-source CMS released under the MIT software license.
This tutorial shows how to adapt a regular HTML template for use with Concrete5. The tutorial is illustrated and very simple to follow, with all the code you need included.
This multi-part tutorial shows you exactly how to create your own template for Concrete5. It covers the elements of a theme, the HTML structure, and more.
This is the official theming documentation for Concrete5 and includes both a basic introduction to themes and links to more advanced topics.
CushyCMS is a free, hosted CMS option.
While this tutorial covers a lot more than just theming, that’s what it starts with. And it does a great job of showing how to create a theme for CushyCMS, with very easy-to-follow instructions.
This is the official documentation for designers. It includes everything you’d want to know about designing or customizing themes for use with CushyCMS. Topics covered include overriding content types, using Cushy with dynamic languages, XML elements and more.
DotNetNuke is an open-source CMS for ASP.NET.
This is a very basic tutorial on how to create a skin for DotNetNuke. It’s a good starting point for learning to create skins, though it doesn’t really result in an end-product many people would want to use.
This is a thorough template on creating a skin that’s part of a series on creating websites in DotNetNuke. It includes tons of information on skin design and implementation. Additional tutorials after this one provide more in depth information on skinning and are linked at the bottom of this page.
This is a 9-part video tutorial on how to create CSS-based skins for DotNetNuke. It’s very complete and based on the Simple Red Leaf layout available from DNN Creative Magazine.
Drupal is a free, open-source, PHP-based CMS.
This is the theming guide available in the Drupal documentation. It covers everything you’d want to know about building Drupal themes, including information for both Drupal 5 and 6. Best practices and information on how to contribute themes are also included.
This tutorial is specific to band-sites, but the information it contains could easily be applied to other types of sites. It covers everything from designing the site in Illustrator to Drupal theming and admin. And it gives plenty of examples of similar sites running on Drupal.
This is a very simple but complete tutorial on how to create your own Drupal themes. It covers theme building based on the PHPtemplate theme engine and Drupal 6. It also covers the different files included in a Drupal theme and what each one does.
This multi-part tutorial covers everything you need to know to convert a PSD file into a Drupal theme. It’s another very complete tutorial that includes all the code you’ll need.
ExpressionEngine is a PHP and MySQL-based CMS.
This page gives a complete run-down of how templates in ExpressionEngine work. It covers everything from category headings and parameters to variables to RSS and mailing lists. It’s a good starting point for anyone interested in developing EE templates.
This video tutorial covers the basics of ExpressionEngine templates. It’s another good place to start if you want to design EE templates.
This series of tutorials covers the complete setup of a website in ExpressionEngine. It includes a few tutorials specifically on how to work with templates, though, all of which are worth a look.
Joomla! is a PHP-based, free CMS.
This tutorial shows how to create a CSS-based Joomla theme that’s completely standards-compliant and accessible. The end result is a basic, 3-column theme that can be adapted to different needs.
Here’s a five-step tutorial for turning just about any HTML template into a Joomla theme. The starting template should be (X)HTML and CSS-based and standards-compliant. This is really a very simple process and the tutorial outlines the steps very well.
This tutorial covers all the basics to creating a Joomla template, specifically geared to someone with no Joomla templating experience. It’s highly illustrated, making it really easy to follow. It’s also one of the most extensive Joomla theme tutorials out there.
This is a very basic tutorial covering creating your own simple Joomla theme. It consists of only ten steps and provides sample code.
Magnolia is an enterprise-level CMS built on the Java platform. There is a free, open-source edition available.
This is the templating tutorial from Magnolia’s official documentation. It covers the basics of creating a simple template.
MODx is an open-source “application framework” built on PHP.
This tutorial is from the MODx wiki and covers all the basics of theming with MODx. It includes all the sample code you’ll need and is broken down in easy-to-understand sections.
Here’s another wiki-based tutorial for creating MODx themes. Sample code is included, though this tutorial doesn’t seem to be quite as complete as the one in the official documentation.
This tutorial gives thorough instructions for customizing an existing template to work with MODx. Additional tutorials in the series get into more detailed customizations and other aspects of working with MODx.
Plone is a free, open-source CMS.
This is a very complete tutorial that covers all aspects of building a Plone theme from a Photoshop mockup. It shows how to do everything from creating the basic foundation for the theme to styling the individual elements.
This is another incredibly detailed tutorial for creating Plone themes. It covers everything from creating custom CSS to overriding visual elements.
Radiant is a free Ruby On Rails CMS.
This tutorial covers the basics of working with Radiant, including how the pages are set up and how to design around the basic page structure. It shows the basic divs used and how theme and template files are generally set up.
SilverStripe is built on the open source Sapphire development framework.
This is the theme development guide right from the SilverStripe Documentation. It’s a great place to start, as it explains all the basics of how SilverStripe themes are structured and the core files required.
This is a tutorial for creating a very basic SilverStripe theme. It includes three steps. In the end, you get a framework that allows for quick and easy theme development without compromising the capabilities of SilverStripe.
Here’s a tutorial that covers how to adapt just about any website template to work as a SilverStripe theme. It includes a sample template to work with (both the starting files and the completed ones). It also includes documentation for working with other templates in case you’d prefer to start with something different.
This is the tutorial in SilverStripe’s official documentation. It covers building templates in addition to other basic functionality of the CMS.
Textpattern is an open source CMS built on PHP and MySQL.
This is an 8-part tutorial on creating a Textpattern theme, specifically geared at beginners. It covers forms, pages, excerpts, secondary pages and forms, and tags, among other things. It’s very complete and easy to understand.
This page gives a complete overview of the tags used in building page templates (as opposed to form templates) for Textpattern. It’s a must-have resource for anyone building Textpattern templates.
TYPO3 is a GPL-licensed CMS built with PHP.
This is a very detailed tutorial from ThemesWiki that thoroughly explains how to create templates for TYPO3. It covers the elements of a template, objects and properties, using TypoScript, integrating design templates, using the auto parser template and more.
This is a rather short article on creating maintainable sites and templates in TYPO3. It includes hints for using TemplaVoila, too.
Here’s a very in-depth tutorial on creating TYPO3 templates. It includes sections covering integration of an HTML page template with TemplaVoila, creating additional page templates, “flexible content elements,” and information on TypoScript.
TYPOlight is a free, PHP-based CMS that uses Ajax and other “Web 2.0″ technologies.
This tutorial is from the TYPOlight documentation and covers all the basics of creating your own layouts. Topics included are creating basic modules, importing style sheets, creating page layouts and the site structure, adding content, and previewing and modifying your templates. You can also watch the tutorial as a narrated screencast.
Umbraco is an open source CMS built on ASP.NET.
This article from the official documentation offers the basics of how Umbraco builds pages and using templates. It’s a perfect starting point for learning how to build templates for Umbraco.
WordPress is a free blogging platform that can be modified to be used as a CMS.
This is one of the most complete WP theme-building tutorials out there. It consists of 25 separate lessons and covers how the WP templating system works, The Loop, post meta data, search forms, calendars, comment templates and pretty much everything else about themes in WP. If you want to build a theme completely from scratch, this is the tutorial to show you how.
This tutorial gives instructions for creating a basic, simple WP theme that includes the header.php, index.php, sidebar.php and footer.php template files, in addition to the style sheet. It’s very simple and straight-forward, but a great place to start if you’re new to building WP themes. The basic steps can easily be adapted to building more complex themes.
Here’s another very complete tutorial, offering up 11 lessons on how to create a WP theme. It focuses on creating a theme with good SEO, valid and logical semantic markup, separated trackbacks and comments, two widget areas, and all the basics you’d expect from a WP theme. The lessons are ordered logically and include theme development tools and information about the WP template and directory structure.
Sometimes you don’t want to design a theme from scratch. Maybe you’ve found the perfect theme (or designed one), but it’s just a regular web template, not a WP theme. This tutorial will show you how to convert that web template into a WP theme without too much trouble. It also includes a link to a video tutorial showing how one template was converted.
This tutorial shows how to take a basic HTML/CSS template and convert it to a WP theme. It’s incredibly complete, covering every aspect of WP theming. It also explains how themes are structured and how to create the core theme files.
Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She’s been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.
This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.