Chapter 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 a different template in a few minutes, giving your site a fresh look and feel is really a breeze. There are hundreds of templates available on the Web, making it possible to apply any style imaginable to your site. Moreover, you can easily customize templates to meet your needs. If you're a Web building wizard yourself, you can create your own template from scratch.

In this chapter, we'll explore the power of templates further. You'll learn about the following topics:

• Changing the settings of the default template

• Applying different templates to different pages

• Downloading and installing third-party templates

• Customizing templates—tweaking CSS and HTML

What do templates do?

A Joomla template is a set of files that contain the HTML and Cascading Style Sheets (CSS) code that defines 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.

Without any CSS styles applied, your web browser would display a typical Joomla site as shown in the following screenshot. Although the screenshot is too small for you to be able to discern the screen text, you'll notice that just plain text and images are shown here with minimal styling.

The same content is shown with CSS styles applied in the following screenshot. Through CSS codes, the overall page layout and design is added.

Actually, a template contains more than pure HTML and CSS codes. After all, Joomla has to know where the dynamic content should be placed within the HTML page structure. That's why a template...

Why are templates so much fun?

Artsy, basic, flashy, grungy, playful, corporate, or clean—whatever your taste in templates may be, you're very likely to find a template that meets your needs. The following screenshots are a tiny selection of the free Joomla templates on offer on the Web. These are showcasing just a few of the great designs possible. The 2066 template is shown in the following screenshot:

The Ol anteez template is shown in the following screenshot:

The BaseLine template is shown in the following screenshot:

The Music template is shown in the following screenshot:

The details of these examples can be found at http://astemplates.com (2066 template), www.olwebdesign.com/ (Ol anteez), http://joomlatemplates.youjoomla.info/ (BaseLine), and www.gavick.com (Music).

It isn't hard to find Joomla 3.x (often free) templates on the Web. However, you should be picky; it's not just about good looks. A template should be easy to customize and it shouldn't slow down your site, which basically...

Changing the settings of the current template

Your starting point to manage and customize the current templates is the Template Manager screen (which can be found by navigating to Extensions | Template Manager). The Template Manager screen consists of two main screens that can be accessed through the menu on the left-hand side: Styles and Templates. In the Template Manager: Styles screen shown in the following screenshot, you can select which of the available templates you want to use. The current default frontend template is called Protostar. The default template for the backend of the site is called Isis. If you've followed along with the exercises in Chapter 4, Web Building Basics – Creating a Site in an Hour, your current default template should be called protostar_copy - Default. You've created this copy to avoid the risk of your customized template being overwritten by a new version of the default Protostar template when you update Joomla.

The function of template styles

Why is the first...

Time for action – changing the site color and layout options

We'll first have a look at some settings that affect the overall color scheme and the layout.

1. Navigate to Extensions | Template Manager. The Template Manager: Styles screen is displayed.

2. In the list of available templates, click on protostar_copy - Default as shown in the following screenshot:

   

3. You're taken to the Template Manager: Edit Style screen. Click on the Advanced tab to reveal the available template settings, as shown in the following screenshot:

   

4. We'll have a look at the effects of these customization options. The Template Colour option allows some quite powerful changes to the look and feel of the site. Click on Template Colour to select the color for accents on the website: the colored line at the top of the page and the color of menu links and headings. A color palette appears that allows you to pick a color of your choice (in this example, I picked the red color). Click on Select inside the palette pop up to confirm your...

Switching to a different template

Until now, we've worked with Protostar, the default template in Joomla. However, there are more templates available in the Joomla package. To see an overview, navigate to Extensions | Template Manager and click on the Templates link in the menu on the left-hand side to go to the Templates Manager: Templates screen. This is shown in the following screenshot:

Here, all available templates are displayed with thumbnail images, giving you a quick impression of the page design. In the Location column, you can see if it's a frontend or a backend template. Joomla comes with two frontend templates (Location is Site) and two templates that can be used in the backend (Location is Administrator). To get a better impression of what any of the installed templates look like, click on the template thumbnail in the Template Manager: Templates screen to see an enlarged image.

The templates that come with Joomla!

A main change since Joomla 3 is the use of Bootstrap, a framework...

Time for action – activating a different template

Let's try a different template on for size. In this example, we'll choose the Beez 3 template. This can be done as follows:

1. Navigate to Extensions | Template Manager.

2. Click on the star in the Default column of the Beez3 - Default template. This sets Beez3 as the default template. Click on View Site to see the result shown in the following screenshot:

   

   As this template uses other module positions than Protostar, the module contents are displayed in different screen positions. Another effect of the new template is that the default site name (Joomla! Open Source Content Management) is displayed in the header. First let's fix this.

3. Click on the template named Beez 3 - Default in the Template Manager: Styles page. In the Template Manager: Edit Style screen, click on the Advanced tab. As the Logo Image, select the CORBA logo image file that you've used previously. Enter the appropriate site title (in our example, we used corba) and description (Collectors...

Applying template styles to individual pages

Most websites probably use just one template. However, in Joomla, it's possible to assign specific templates to style individual pages or groups of pages. If your site is divided into five main categories, why not use five different styles—each with their own set of options selected.

Time for action – creating a template style for one specific page

Let's assume your client has a few special pages on the site about a special event. They want to make this event page stand out from the rest of the site. To create this effect, we'll create and apply a template style. We'll create a copy of a template and use it to style only the pages that are linked through one specific menu link. This can be done as follows:

1. First, we'll make a dummy page and a menu link that points to it. In this example, we'll create an article page named Visit the Bad Art Event and a Main Menu link of the Single Article type, which is named Bad Art Event.

2. Go to Extensions | Template Manager to access the Template Manager: Styles screen.

3. We'll use the Protostar template and create a copy of it. Select protostar - Default by ticking the select box to the left-hand side of the template name. Then, click on the Duplicate button. This is shown in the following screenshot:

   

4. A copy of the template appears in the...

Downloading and installing a new template

Of course, the templates that are shipped with Joomla are only a few examples of the possible designs. Do you need a really different layout or do you want a more attractive design? There are tons of templates available on the Web. You can download the template files as one compressed file and install this compressed template file through the Extension Manager screen. Once it's installed, you can activate it through the Template Styles screen as described earlier in this chapter.

Tip

Physically, a Joomla template is a bunch of files. When you download a template, these files are packed together in a compressed format (usually a ZIP file). Joomla provides you with a powerful one-click-method to upload and unpack the ZIP file, installing all of the required template files on the web server, ready for use.

Imagine your client wants something really different, a site with its own specific layout. In that case, you probably don't want to settle for any of...

Time for action – downloading and activating a new template

For your site's redesign, you've hit upon a great looking template on the Web. In this example, we'll use the Future template developed by IceTheme. It is a clean and basic template that offers enough opportunities to customize the layout and appearance. This can be done as follows:

1. Navigate to http://www.icetheme.com/Downloads/Joomla-Templates/Free-Joomla-Templates/Future/View-Category.

2. Click on the Download button. The compressed template file (IT_Future_V.3.0.1-(unzip-first)-9544626154.zip) is saved on your computer.

3. Navigate to the ZIP file on your computer and unzip it. The ZIP file contains several other ZIP packages: the template, an installation guide, and several free extensions that come with the template. After you've decompressed the ZIP file, the files shown in the following screenshot should be available:

   

4. After you've uncompressed the main ZIP file, you should also unzip the following files: IceMegaMenu_Unzip_First.zip...

Time for action – adding the logo file

Let's add the CORBA logo to the new template and set a few template options.

1. Navigate to Extensions | Template Manager and open the Ice Future template.

2. Click on the Select button next to the Site Logo field. Then, upload and select the new graphic logo file for the CORBA website (corbalogo_restyled.png). This is shown in the following screenshot:

   

3. The template options also include the possibility to add Facebook and Twitter buttons to the site. As we won't add these buttons, set the Facebook and Twitter options to No. It's also a good idea to set the Style Switcher option to No, as we don't want our site visitors to be able to switch between template styles.

4. Set the IceTheme Logo option to No if you want to hide the logo and the link to the template developer.

5. Save the changes and preview the output. It is shown in the following screenshot:

   

What just happened?

You've added a graphic logo file and changed a few settings. However, this is just the first step...

Time for action – adding a menu module

The template we've downloaded, Ice Future, comes with a couple of free modules. You don't really need them in order to be able to use the template. However, they can add useful functionality to your site. Especially the IceMegaMenu module has many advantages in comparison to the Joomla menu module, and it renders a menu that blends in nicely with the template design. Let's add this module.

1. Navigate to Extensions | Extension Manager and click on the Upload Package File button. Then, click on Browse to navigate to the downloaded menu module, that is, the mod_icemegamenu_v.3.0.2.zip file. Install this module.

2. Next, select the plg_icemegamenu0.zip plugin and install this plugin too.

3. Enable the plugin. Go to Extensions | Plug-in Manager and locate the IceMegaMenu plugin. Click on the red cross in the Status column. It will change into a check mark, which means that the plugin is now active.

4. Now, we can also enable the menu module and change its settings. Navigate...

Time for action – placing modules in new template positions

After you have installed a new template, not all module blocks will show up. This is because different templates contain different (and differently named) module positions. As you saw in the previous chapter, templates contains positions that are referred to as left, position-1, position-2, and so on. In this case, the new template positions are different from the positions in the Protostar template. The next step is to assign modules that we have used in the example site to their new template positions.

1. To find out what module positions are available, navigate to Extensions | Template Manager | Templates and click on the Preview link for the Ice Future template. The positions available in the current template are shown in the following screenshot:

   

2. Navigate to Extensions | Module Manager. Open the following modules and assign them to the appropriate positions:

   Customizing a template – tweaking CSS styles

   In this chapter, you saw how to customize templates using the built-in options. However, as not all templates contain the same set of options, sometimes you'll have to dive under the hood to change a file or a few lines of code to get the template to look just the way you want. You've experienced this in Chapter 4, Web Building Basics – Creating a Site in an Hour, when you wanted to change the tagline of the Protostar template and had to change a line of CSS code.

   In the beginning of this chapter, you learned that CSS take care of your website's look and feel. If you want to change the way the site looks, you'll edit the styles in their CSS file (or CSS files, as the template designer often splits the necessary code in different style sheet files).

   If you're not familiar with CSS and what it does, have a look at the basic explanation in the following section. After that, we'll see some examples of how tweaking the CSS code of a Joomla template works...

   Time for action – customizing the background color using CSS

   Customizing the CSS code of the template can be relatively easy, especially when it comes to changing properties such as colors, font types, and images. You can edit the template style sheets from within the Joomla backend. The steps are as follows:

   1. Navigate to Extensions | Template Manager. In the menu on the left-hand side, click on Templates.

   2. Now, click on the link of the template you want to edit. In this example, click on Ice_future Details and Files as shown in the following screenshot:

      

   3. In the Template Manager: Customise Template screen, you can see the template folders and files. Click on the css folder and then click on the template.css file. This will open the source code of the style sheet in an editor screen, as shown in the following screenshot:

      

   4. In the Editor screen, locate the body style declaration. It should look like the following code:

      body {
        background:#e5e5e5;
        line-height:26px;}

      Change the highlighted line as follows...

   Backing up and restoring a customized template

   Editing a template directly in Joomla is a great way to tweak the layout as you go. You're able to apply changes in the backend and immediately preview the effects of every adjustment you've made. However, there is a drawback; all changes in the template files are only stored on the web server. If for some reason you were to reinstall the template, these changes would be lost.

   To prevent this from happening, back up the template as soon as you've finished customizing it. The steps are as follows:

   1. Start up your FTP program and browse to the folder that contains the template you want to back up (for more information on using FTP software, please refer to Chapter 2, Getting Joomla! Up and Running). In case of the Ice Future template, the location would be something like /httpdocs/templates/ice_future. Here, httpdocs is the root folder of the Joomla installation on the web server; in your situation, the root folder might have another name, such as...

   Where can you get a new template for your site?

   If you search the Web for Joomla 3 template, you'll get a dazzling number of results. It can take hours to find 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 starting places are template sites such as www.joomla24.com, www.bestofjoomla.com, and www.cmslounge.com. These sites offer hundreds of templates. Browse the collections and check out live previews of the templates you like.

   • Check the collections of professional Joomla template developers, such as www.rockettheme.com, www.joomlashack.com, www.gavick.com, www.yootheme.com, and www.joomlabamboo.com.

   How do you find the perfect template that has the quality and the design approach that suits your needs? It's good to be picky; after all, the default template Protostar is already pretty versatile. It's suitable for smartphones and tablets, you can customize colors and fonts, and it contains...

   Creating your own template

   Using an existing template (and customizing it) will help you get great results while saving lots of time, compared to creating your own template from scratch. However, if you want full control or need a unique layout, you can make a Joomla template all by yourself. It isn't complicated, but it does require a good deal of HTML and CSS coding skills. If you know how to build a website using HTML and CSS, then you won't experience any problems converting your design into a Joomla template. Most of your time and effort will go into creating a page design from the ground up, rather than into the adjustments needed to adapt that design for Joomla.

   As it is mainly a question of HTML and CSS coding, we won't cover template creation in full detail here. To get you started, here are a few pointers. These are the five main steps it takes to create your own template.

   • Sketching: In this step, design an overall layout for your website. Where do you want the main content, the...

   Using a template framework as the base for your own template

   Instead of downloading a ready-made template or creating your own template from the ground up, there's also a third option: using a template framework. A framework is basically a template with a huge number of built-in options, which allows you to define the layout, module positions, menu styles, colors, fonts and sometimes much more directly from the template control panel. You'll find more information on template frameworks on the website that accompanies this book, www.joomm.net.

   Pop quiz – test your knowledge of Joomla! templates

   Q1. What does a Joomla template actually do?

   1. It changes the colors and the header graphic.

   2. It determines the overall layout and design.

   3. It allows you to set all sorts of layout options.

   Q2. After installing a new template, you notice some empty spaces in your site layout. What does this mean?

   1. Something went wrong and you should reinstall the template.

   2. You have to assign modules to the available (empty) positions...

   Summary

   In this chapter, you learned much about the power of Joomla templates. A Joomla template is a set of files that contain the HTML and CSS code that defines what your web page looks like. Joomla comes with a few different templates. Most templates have built-in options that allow you to tweak their look and behavior.

   If you want a different layout, there are tons of templates you can download from the web, and a good many of them are available for free. Customizing an existing template is a great way to personalize the look and feel of the website. Joomla's Template Manager allows you to change the CSS styles that the template uses, for example, when you want to change the color scheme or replace the default logo image.

   If you need a customized template for your site, you can consider either building your own template from the ground up or using a template framework as a base for your own design.

   As far as content, functionality, and looks are concerned, your site is about finished; but...

   The rest of the chapter is locked

   Unlock this book and the full library FREE for 7 days

   Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

   Renews at $15.99/month. Cancel anytime

   Start free trial

   Previous Chapter

   Chapter 1 of 22

   Next Chapter

   You have been reading a chapter from

   Joomla! 3 Beginner's Guide Second Edition

   Published in: Jul 2014 Publisher: ISBN-13: 9781783981502

   © 2014 Packt Publishing Limited All Rights Reserved

   Register for a free Packt account to unlock a world of extra content!

   A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

   Sign up now

   Unlock this book and the full library FREE for 7 days

   Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

   Start free trial

   Renews at $15.99/month. Cancel anytime}

   Authors (1)

   Eric Tiggeler

   Eric Tiggeler has authored several books on Joomla!, such as the highly successful Joomla! 2.5 Beginner's Guide  and Joomla! 3 Beginner's Guide, both by Packt Publishing. He has also written several Joomla! guides in Dutch. His books have received excellent reader reviews. He also writes tutorials for several computer magazines and Joomla! community websites. Over the last ten years, he has developed numerous websites, big and small, using Joomla!. He is fascinated by the Web as a powerful, creative, and ever-changing means of communication, as well as by the revolutionary software Joomla!, which enables anybody to create beautiful and user-friendly websites. On a daily basis, he works as a consultant and copywriter at a communication consultancy company affiliated to the Free University of Amsterdam. Over the last few years, he has written more than 20 books in Dutch on writing and communication. His passion lies in making complex things easy to understand. He is married, has two daughters, and lives and works in Hilversum, the Netherlands. On the Web, you'll find him at www.joomla.erictiggeler.nl(in Dutch) and www.joomm.net(in English).

   Read more

   See other products by Eric Tiggeler

   Personalised recommendations for you

   Based on your interests and search pattern

   

   Modernizing Drupal 10 Theme Development

   Modernizing Drupal 10 Theme Development covers everything a frontend developer or a Drupal developer needs to know about the Drupal 10 theme layer. Using real-world examples, this book will help you to build up from an empty theme to a fast, responsive, maintainable, and accessible Drupal website in both monolithic and decoupled ways.

   Aug 2023 12 hours 0 minutes

   

   Full Stack Development with Spring Boot 3 and React

   Full Stack Development with Spring Boot 3 and React contains a wealth of practical guidance for picking up full stack development. The step-by-step exploration of everything from dependency injection, ORM with Hibernate, and JWTs to RESTful APIs, UI styling, and TypeScript will help you to develop the Spring Boot and React skills you need.

   Oct 2023 15 hours 8 minutes

   

   Modern API Development with Spring 6 and Spring Boot 3

   This practical guide teaches inexperienced Java programmers and web developers how to design, develop, test, and deploy highly scalable and maintainable APIs using REST, gRPC, GraphQL, and reactive programming paradigms with Java and Spring Boot. Complete with real-world examples, it will guide you to build enterprise-level APIs and services.

   Sep 2023 16 hours 28 minutes

   

   Hands-On Web Scraping with Python

   This book guides you to discover and extract quality data from the web using Python libraries such as requests, lxml, pyquery, scrapy, and to use effective scraping techniques. It’ll help you master the fundamentals and advanced concepts of web scraping and apply your skills to real-world data extraction tasks, with analysis and visualization.

   Oct 2023 10 hours 48 minutes

   

   Mastering Blazor WebAssembly

   Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

   Aug 2023 12 hours 20 minutes

   

   Mastering Blazor WebAssembly

   Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

   Aug 2023 12 hours 20 minutes

   

   Full Stack Web Development with Remix

   Unlock the power of the web platform and cutting-edge technologies for your React applications using Remix to take advantage of the full stack to create a great user experience. This book is a complete resource covering the conventions, levers, and primitives of Remix and illustrates concepts through a real-world project.

   Nov 2023 10 hours 36 minutes

   

   Real-World Svelte

   This book is a must-have guide to unlocking Svelte's true potential. You’ll learn about advanced component development, efficient coding, and powerful UI patterns using actions. With a focus on state management, custom stores, and renderless components, this book equips you to build exceptional web apps with lightning-fast performance.

   Dec 2023 9 hours 24 minutes

   

   Building Micro Frontends with React 18

   This book is a step-by-step guide to building production-grade, highly scalable, and performant web apps using multi-SPA and micro apps patterns, where you’ll learn to deal with complexities related to micro frontends. The book is a full life cycle guide to building, deploying, and managing micro frontends in a cloud-native environment.

   Oct 2023 7 hours 16 minutes

   

   Drupal 10 Masterclass

   This all-in-one guide helps you get up and running with building Drupal applications using the latest Drupal 10 features. You’ll develop a complete practical understanding of Drupal frontend, backend, architecture, content management, themes, and modules to deliver a rich user experience by creating custom Drupal apps.

   Dec 2023 10 hours 20 minutes

   

   Full-Stack Flask and React

   This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

   Oct 2023 13 hours 36 minutes

   

   Full-Stack Flask and React

   This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

   Oct 2023 13 hours 36 minutes

   Machine Learning Kubernetes React Python Cybersecurity Unity Game Development Power BI Azure Web Development

   Legal

   Terms and Conditions Privacy Policy Cookie Policy Shipping Policy Cancellation Policy Return Policy

   Support

   Help Contact Us

   Business

   Partnerships

   Sponsored eBooks Custom eBooks

   Careers Become an author

   Packt+ Membership

   Subscription DataPro SecPro TechLeaders

   United States

   Company Address: Packt Publishing Ltd, Grosvenor House, 11 St Paul's Square, Birmingham, B3 1RB © 2024 Packt Publishing Limited All Rights Reserved

   Module name	Type	New position
   Visit the Bad Art Museum	Custom HTML ...

Customizing a template – tweaking CSS styles

In this chapter, you saw how to customize templates using the built-in options. However, as not all templates contain the same set of options, sometimes you'll have to dive under the hood to change a file or a few lines of code to get the template to look just the way you want. You've experienced this in Chapter 4, Web Building Basics – Creating a Site in an Hour, when you wanted to change the tagline of the Protostar template and had to change a line of CSS code.

In the beginning of this chapter, you learned that CSS take care of your website's look and feel. If you want to change the way the site looks, you'll edit the styles in their CSS file (or CSS files, as the template designer often splits the necessary code in different style sheet files).

If you're not familiar with CSS and what it does, have a look at the basic explanation in the following section. After that, we'll see some examples of how tweaking the CSS code of a Joomla template works...

Time for action – customizing the background color using CSS

Customizing the CSS code of the template can be relatively easy, especially when it comes to changing properties such as colors, font types, and images. You can edit the template style sheets from within the Joomla backend. The steps are as follows:

1. Navigate to Extensions | Template Manager. In the menu on the left-hand side, click on Templates.

2. Now, click on the link of the template you want to edit. In this example, click on Ice_future Details and Files as shown in the following screenshot:

   

3. In the Template Manager: Customise Template screen, you can see the template folders and files. Click on the css folder and then click on the template.css file. This will open the source code of the style sheet in an editor screen, as shown in the following screenshot:

   

4. In the Editor screen, locate the body style declaration. It should look like the following code:

   body {
     background:#e5e5e5;
     line-height:26px;}

   Change the highlighted line as follows...

Backing up and restoring a customized template

Editing a template directly in Joomla is a great way to tweak the layout as you go. You're able to apply changes in the backend and immediately preview the effects of every adjustment you've made. However, there is a drawback; all changes in the template files are only stored on the web server. If for some reason you were to reinstall the template, these changes would be lost.

To prevent this from happening, back up the template as soon as you've finished customizing it. The steps are as follows:

1. Start up your FTP program and browse to the folder that contains the template you want to back up (for more information on using FTP software, please refer to Chapter 2, Getting Joomla! Up and Running). In case of the Ice Future template, the location would be something like /httpdocs/templates/ice_future. Here, httpdocs is the root folder of the Joomla installation on the web server; in your situation, the root folder might have another name, such as...

Where can you get a new template for your site?

If you search the Web for Joomla 3 template, you'll get a dazzling number of results. It can take hours to find 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 starting places are template sites such as www.joomla24.com, www.bestofjoomla.com, and www.cmslounge.com. These sites offer hundreds of templates. Browse the collections and check out live previews of the templates you like.

• Check the collections of professional Joomla template developers, such as www.rockettheme.com, www.joomlashack.com, www.gavick.com, www.yootheme.com, and www.joomlabamboo.com.

How do you find the perfect template that has the quality and the design approach that suits your needs? It's good to be picky; after all, the default template Protostar is already pretty versatile. It's suitable for smartphones and tablets, you can customize colors and fonts, and it contains...

Creating your own template

Using an existing template (and customizing it) will help you get great results while saving lots of time, compared to creating your own template from scratch. However, if you want full control or need a unique layout, you can make a Joomla template all by yourself. It isn't complicated, but it does require a good deal of HTML and CSS coding skills. If you know how to build a website using HTML and CSS, then you won't experience any problems converting your design into a Joomla template. Most of your time and effort will go into creating a page design from the ground up, rather than into the adjustments needed to adapt that design for Joomla.

As it is mainly a question of HTML and CSS coding, we won't cover template creation in full detail here. To get you started, here are a few pointers. These are the five main steps it takes to create your own template.

• Sketching: In this step, design an overall layout for your website. Where do you want the main content, the...

Using a template framework as the base for your own template

Instead of downloading a ready-made template or creating your own template from the ground up, there's also a third option: using a template framework. A framework is basically a template with a huge number of built-in options, which allows you to define the layout, module positions, menu styles, colors, fonts and sometimes much more directly from the template control panel. You'll find more information on template frameworks on the website that accompanies this book, www.joomm.net.

Pop quiz – test your knowledge of Joomla! templates

Q1. What does a Joomla template actually do?

1. It changes the colors and the header graphic.

2. It determines the overall layout and design.

3. It allows you to set all sorts of layout options.

Q2. After installing a new template, you notice some empty spaces in your site layout. What does this mean?

1. Something went wrong and you should reinstall the template.

2. You have to assign modules to the available (empty) positions...

Summary

In this chapter, you learned much about the power of Joomla templates. A Joomla template is a set of files that contain the HTML and CSS code that defines what your web page looks like. Joomla comes with a few different templates. Most templates have built-in options that allow you to tweak their look and behavior.

If you want a different layout, there are tons of templates you can download from the web, and a good many of them are available for free. Customizing an existing template is a great way to personalize the look and feel of the website. Joomla's Template Manager allows you to change the CSS styles that the template uses, for example, when you want to change the color scheme or replace the default logo image.

If you need a customized template for your site, you can consider either building your own template from the ground up or using a template framework as a base for your own design.

As far as content, functionality, and looks are concerned, your site is about finished; but...