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 acvate 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 capabilies. 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 capabilies 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 dening 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 Creang an Aracve 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 Creang an Aracve Design: Working with Templates [ 282 ] Actually, a template contains more than pure HTML and CSS. To the basic HTML, it adds some instrucons (wrien in the PHP language) that tell Joomla! what content it should place at which posion 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 instrucons on how to layout that page, what content to place at which posions, 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 posion 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 selecon of the free Joomla! templates on oer 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 sll 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 starng places are template sites such as www.joomla24.com, www.osskins.com, and www.cmslounge.com. These sites oer hundreds of templates. Browse the collecons and check out live previews of the templates you like. Check the collecons 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 Creang an Aracve 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, Compability, Developer, and so on). Many templates are oered by commercial developers; a number of template clubs allow members to regularly download new templates for a subscripon fee. However, you'll also be able to nd many quality templates completely free. Enough tempng template informaon for now—let's get into acon! First, you'll acvate one of the Joomla! default templates, aer 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 specic requirements: they have introduced a new visual identy and want their website to reect 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 lile experiment! Let's try a dierent template on for size. Joomla! comes with a few dierent 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 buon next to JA Purity. Click on the Default buon 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, dierent design; by seng 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 Creang an Aracve Design: Working with Templates [ 286 ] Have a go hero – adjust the template settings The JA Purity template has a many sengs (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 secon you can also enter a dierent Logo text and Slogan to display on the site header: Download at Wow! eBook WWW.WOWEBOOK.COM . the current version of Joomla! . There are sll 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 collecons 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!