Chapter 10 [ 277 ]  To add a third-party extension to your website, you download it from the Web and install it. When it's installed, you can adjust the extension in the backend and acvate it (enable it, in Joomla! terms).  Some extensions enhance the frontend of your site; they provide cool ways to present content. Others focus on extending the backend capabilies. Now that you've explored how extensions work and added a few to your site, it's about me to focus on one special extension type: templates! In earlier chapters, you've already made some changes to the default template. However, Joomla!'s template capabilies are much more powerful. In the next chapter, you'll learn how to nd and install templates and apply a brand new design to your site. Download at Wow! eBook WWW.WOWEBOOK.COM Download at Wow! eBook WWW.WOWEBOOK.COM 11 Creating an Attractive Design: Working with Templates You probably don't want to make websites that all look like "typical" Joomla! sites. That's where templates come to the rescue. Because Joomla! allows you to install another template in a few minutes, giving your site a fresh look and feel is really a breeze. There are thousands of templates available on the Web making it possible to apply any style imaginable to your site. Moreover, you can easily personalize templates to meet your needs. And if you're a web building wizard yourself, you can create your own template from scratch. Now we'll explore the power of templates further. In this chapter, you'll learn about:  Finding and installing a template  Customizing a template  Downloading and installing templates  Customizing templates: tweaking CSS and HTML This is what templates do A Joomla! template is a set of les that contain the HTML and CSS code dening what your website will look like. HTML is the code used to build web pages and CSS is the code used to style them. You could say that HTML is the bricks and mortar of your site, whereas CSS provides the wallpaper and paint. Let's see how this works. Download at Wow! eBook WWW.WOWEBOOK.COM Creang an Aracve Design: Working with Templates [ 280 ] Without any CSS applied, your web browser would display a typical Joomla! site as follows: Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 11 [ 281 ] With CSS styles applied, the same content is displayed—but now the overall page layout and design is added: Download at Wow! eBook WWW.WOWEBOOK.COM Creang an Aracve Design: Working with Templates [ 282 ] Actually, a template contains more than pure HTML and CSS. To the basic HTML, it adds some instrucons (wrien in the PHP language) that tell Joomla! what content it should place at which posion within the HTML page structure. This way, the template instructs Joomla! exactly where it should put the central content, menus, and other modules. So that's what a template does. Joomla! as such generates only the basic HTML; the template adds to this instrucons on how to layout that page, what content to place at which posions, and what all this content should look like. This powerful mixture of PHP, HTML, and CSS determines just about any part of the design, from the number of columns on the page to the posion of elements, the colors, the graphics, or the choice of fonts. This is why templates are so much fun Artsy, basic, ashy, grungy, corporate, or clean—whatever your taste in templates may be, you're very likely to nd a template that meets your needs. The following is a ny selecon of the free Joomla! templates on oer on the Web—showcasing just a few of the stunning designs possible: Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 11 [ 283 ] Make sure that the template you download is suited for the current version of Joomla!. There are sll many Joomla! 1.0 templates around that won't work in Joomla! 1.5. The previous examples are templates developed for Joomla! 1.5. The details of these examples can be found at: www.rockettheme.com (Quasar template), http://bamboopixel.com (Pluralism template), www.pure-joomla.com (PJEnchanted template), and www.veero.net (Paros Villas template). Where can you nd templates? If you search the Web for "Joomla! template", you'll get a dazzling number of results. It can take hours to nd the one template that's just right for your goals. Instead, you might want to start your template search in dedicated Joomla! template gallery sites.  Good starng places are template sites such as www.joomla24.com, www.osskins.com, and www.cmslounge.com. These sites oer hundreds of templates. Browse the collecons and check out live previews of the templates you like.  Check the collecons of professional Joomla! template developers, such as www.rockettheme.com, www.joomlashack.com, www.gavick.com, www.yootheme.com, and www.joomlabamboo.com. Download at Wow! eBook WWW.WOWEBOOK.COM Creang an Aracve Design: Working with Templates [ 284 ]  Another great resource is www.bestofjoomla.com; it makes nding the right template easier by allowing you to lter your search according to all sorts of criteria (License, Menu Type, Compability, Developer, and so on). Many templates are oered by commercial developers; a number of template clubs allow members to regularly download new templates for a subscripon fee. However, you'll also be able to nd many quality templates completely free. Enough tempng template informaon for now—let's get into acon! First, you'll acvate one of the Joomla! default templates, aer that, you'll download a new one from the Web. Changing the default template If you've followed along up to now you've built an example website using Joomla!'s default template. Let's assume your client has some more specic requirements: they have introduced a new visual identy and want their website to reect this. They've updated their logo and have chosen new corporate colors. It seems it's me for a general overhaul of the site's look and feel, let's establish a new layout and design for the SRUP site. Time for action – activating a different template Time for a lile experiment! Let's try a dierent template on for size. Joomla! comes with a few dierent templates. They're pre-installed; you only have to set them to be the new default template. In this example, we'll choose the JA Purity template: 1. Navigate to Extensions | Template Manager. 2. Select the radio buon next to JA Purity. Click on the Default buon in the toolbar to set JA Purity to be the default template. Click on Preview to see the results: Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 11 [ 285 ] What just happened? Same content, dierent design; by seng JA Purity to be the new default template you've given the site a completely new look. The ability to change templates in a few clicks is one of the things that really makes Joomla! stand out. Without needing any coding skills you can completely transform the site's appearance. Download at Wow! eBook WWW.WOWEBOOK.COM Creang an Aracve Design: Working with Templates [ 286 ] Have a go hero – adjust the template settings The JA Purity template has a many sengs (or Parameters, as Joomla! calls them). They allow you to tweak the template's looks and behavior. Navigate to Extensions | Template Manager and click on JA Purity to open the Template: [Edit] screen. The JA Purity template parameters allow you to change (among others) the menu style, the basic font size, and the template width. In the Parameters secon you can also enter a dierent Logo text and Slogan to display on the site header: Download at Wow! eBook WWW.WOWEBOOK.COM . the current version of Joomla! . There are sll many Joomla! 1.0 templates around that won't work in Joomla! 1.5. The previous examples are templates developed for Joomla! 1.5. The details. Working with Templates [ 280 ] Without any CSS applied, your web browser would display a typical Joomla! site as follows: Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 11 [ 281 ] With CSS styles. Check the collecons of professional Joomla! template developers, such as www.rockettheme.com, www.joomlashack.com, www.gavick.com, www.yootheme.com, and www.joomlabamboo.com. Download at Wow!