Setting Up Templates in Open Source CMS

From ThemesWiki

Setting Up a template for CMS

Source Book

ISBN	978-1-847196-22-4
Publisher	Packt Publishing
Author(s)	Nirav Mehta

1 Using templates
2 How to find a good Template?
- 2.1 Template selection criteria
- 2.2 Where to find templates
3 Setting up a template
- 3.1 Different CMSs have different templates
- 3.2 Free, paid, or custom
4 Additional References
5 Source

[edit] Using templates

Templates are design blueprints. A CMS takes a template and generates site pages from it. This unifies the graphical look of the entire site, since all pages are derived from a common template. Everyone customizes the graphical design of their site with a CMS template. We too can change our site's design just by changing its template.

We can hire a professional designer to create a template for us, but the Web is full of readymade templates both free and paid that we can use. Templates (sometimes called themes) are available for all major CMSs. A Google search for free joomla templates tells us that there are thousands of templates available for Joomla!.

The problem then is finding a good template. How do we find a good template for our Yoga Site? Let's get cracking!

1. Open your favorite web browser and go to Google.

2. Search for free joomla templates. You may get results similar to the following image.

3. There are some sponsored results at the top and on the right-hand side of the page. Scan through the results. It looks like there are many interesting links that we can follow.

4. Let's check the site Joomla! Shack. Click on the result and it will take you to www.joomlashack.com. The web site shows that it provides both free and paid designs. The site's own design looks good. Let's click on the Free Joomla Templates link under the Products menu.

5. I am feeling lucky! The very first template looks interesting. Click on the Live Demo link to try it out.

6. Jamba is a good template. Its typography is crisp, the color scheme aligns with our site's purpose, and the overall content organization looks good. View a few other templates as well. Evaluate how they fit our needs.

7. Jamba is certainly a design we can use for our Yoga Site. Come back to the demo. In the righthand column there is a link to Download the Jamba Template. Let's go ahead and click on the DOWNLOAD button.

8. This brings us to a page with more information about this template. The actual download link is just below the JambaLive Demo link on this page. Click on it.

9. We are now on a page with download links for all free templates Joomla! Shack is offering. Click on the Jamba thumbnail to begin the download. If you prefer another template, you may download that as well.

10. This will download a ZIP file package. Congratulations, we got a template we like!

What just happened?

We searched Google for free Joomla! templates, reviewed a few templates, and downloaded the one that we liked the most. It was easy for us since we liked the first template we saw. There are lots of template sites, and not all designs are good. In fact, most templates just have a good header image and the rest of the page is a standard CMS design. Things can get boring if you have to keep looking at mediocre designs over and over.

[edit] How to find a good Template?

[edit] Template selection criteria

Prefer designs that have readable text. Large headings, distinct colors, and enough whitespace make textual content readable.
Select templates that follow a consistent design alignment, matching colors, and an overall coordination between different screen elements.
Always select standards-compliant templates. Look for templates that follow XHTML and CSS.
Take a live demo of the template. Don't just go by how good a template's thumbnail looks.
Go with simple yet attractive designs.

Applying these checks on thousands of templates can be daunting. So, it makes sense to start at a place where you will find good templates.

[edit] Where to find templates

Here are some sites to get started.

Here is a site where you can get 10 free templates and 400+ commercial templates: http://www.joomladesigns.co.uk.
For a complete list of Joomla templates, visit: http://www.joomla.org/content/blogcategory/19/51/.
To access 1500+ templates, go to: http://www.joomla24.com/.
ThemeBase templates for major CMSs can be found at: http://www.themesbase.com/.
Wordpress Themes Directory http://wordpress.org/extend/themes/.
For great Wordpress Themes, visit: http://www.templatesbrowser.com/wordpress-themes/.

Before using any CMS, do a few searches on Google before you narrow down. Sites that offer thumbnails and live demos are more useful. Some bloggers evaluate and post a list of their favorite templates. Review them first.

Go ahead and try some other template sites. Review more templates and evaluate their suitability for your site. Check out paid templates too and see if they are worth their price.

At this stage we have downloaded the templates of our choice. How do we see them working in our site? We will need to install them using Joomla! our CMS. Let's do that now.

[edit] Setting up a template

1.We have a .zip file of the Jamba template. Unzip it.

2.This results in two folders and one HTML file. These two folders show that the ZIP file actually contains two different versions of this template: one for Joomla version 1.0 and another for 1.5.

3. Let's find out which version of Joomla! do we have. Go to the Joomla! administration panel and look for the version number. If you have Joomla 1.5, it shows at the top right of the page. If you have version 1.0, it is shown in the page footer. For our installation, it shows like this.

Your version may be different

Joomla! (like other open source CMSs) is upgraded regularly. Your Joomla! version may be higher than 1.5.5. Your Jamba template may also be newer. If you do not find the exact links and options we describe here, look around for something similar. Basic functionalities will stay more or less the same across different versions of a CMS.

4. Select Extensions | Install/Uninstall from the main menu. This will show you an interface to upload and install a package.

5. Click on the Package File field. Navigate to the folder where you unzipped the Jamba template, and pick up the js_jamba.zip file from the Joomla1.5 folder, or a folder that corresponds to your version. Click on Upload File & Install.

6. If everything goes well, you will see a success message as shown here.

Do you have permissions?

A security mechanism that most operating systems have is restricting permissions on drives or folders. When you upload something from your browser, your server needs to save that file in a folder. If it cannot do that, you will get a Permission Denied error. Please ensure that folders that you want your CMS to save files into (and only those folders), have sufficient permissions. You should be able to manage this by right-clicking on a folder name and checking its properties. On the Mac/Linux command line, this can be done via the chmod command.

7. From the main menu, select Extensions | Template Manager. This will show you a list of installed templates. Our newly installed js_jamba template shows up on the list!

8. You could have another template set as default. We have rhuk_milkyway as the current default.

9. Click on the radio button near js_jamba. Click on the Default icon, which is at the upper right.

10. This will activate our new template. At this stage, your template listing may look like this.

11. We are now ready to see how our site looks with this new template. Click on the Preview link in the top right menu.

12. Voil ! The new design is live, and it indeed looks very good.

What just happened?

We installed a new template on our Joomla! site. We determined the Joomla! version we had, and used Joomla! package installer to upload the appropriate ZIP file of the Jamba template. Joomla! did the unzipping and installation on the server automatically. We then set the new template as default, which activates it, and we can see it live on our site via preview.

It's very easy to set up a new template with Joomla!. Download a ZIP file from a template site, upload it to Joomla!, and you are done. You can make a template default, and it will be used for the whole site. Or, you can assign specific sections that will use a template.

You can set up as many templates as you like, and can easily switch back and forth to understand which one will work best for your needs.

It's also important to understand that a template may not look exactly like what you saw in the live demo. This is because a live demo has different content. It may also have had different modules configured. You can go to the Module Manager menu option and manage active modules. For any customizations to a template, refer to its documentation.

This was all about Joomla templates. How about other CMSs? Do they have a similar system?

[edit] Different CMSs have different templates

Some CMSs call these designs templates, while others call them themes. Some CMSs will allow you to upload a zipped package of a template (like Joomla!). Some will need you to unzip those files and upload them in a particular folder writing services (such as Wordpress). There will also be a system to select an active template, and you can apply your own customizations to a template if you want.

Templates for one CMS will not work with another. At the same time, many popular templates of one system have been ported to other CMSs. Look around template sites and you will find a lot of useful information.

[edit] Free, paid, or custom

If you want a unique design for your site, you will have to get it custom-designed. If you are looking for higher quality, less common templates, you can go for paid templates. If you are OK with common yet good designs, and can squeeze in a few customizations of your own, you can be happy with free templates.

Unless you are running a blog (where common templates are a norm), you want a specific look for your site. Dig around the template a bit and modify it to suit your needs. Change colors, positioning, and font styling and you can create a new design for yourself.

Paid designs come with source files (Photoshop, or Illustrator, or Flash, and so on), so you can do whatever modifications you want with them. There are even subscription-based sites that allow you to download as many paid templates as you want, for a small fee.

Consider your needs and limitations, and go for one of these options. You can always change the template later on.

Setting up a template in your favourite CMS

We saw how to add a template in Joomla!. If Joomla! is not a CMS you are planning to use, go ahead and try setting up a template in your favorite CMS. Search on the CMS's site for a list of available templates and Google them. Download a few templates custom writing and try them out with your CMS. See how it goes and keep a note of what you learn along the way.At this stage, we have learned enough about giving a professional look to our site with templates.