About this book

Joomla! is a free and open source content management framework for publishing web content. A Joomla! template is a multifaceted Joomla! extension which is responsible for the layout, design, and structure of a Joomla! powered website. Modern Joomla! 3 frameworks use the responsive layout based on Twitter's Bootstrap framework and its collection of utility classes to provide a great degree of flexibility for responsive web design.

This practical, hands-on guide will walk you through clear, step-by-step instructions to help you build your very own custom Joomla! template. Find out what steps you need to take to sell your template and learn some extra tips and tricks to make your templates stand out and improve the overall look of your website.

This example-oriented tutorial will show you how to quickly and painlessly create websites on your own and give them a professional look. You will begin by developing an understanding of how Joomla! templates work, how to install new ones, and how to configure them. You will also master the Joomla! template framework, which can be used as a foundation for creating your own templates. Having gained this insight, you will then begin building your own template from scratch. Advanced styling tricks and tips that will give your websites a unique look are also covered. Finally, you will learn how to modify an existing template to meet your own needs and prepare your Joomla! template for sale.

Publication date:
December 2013
Publisher
Packt
Pages
142
ISBN
9781783281299

 

Chapter 1. Joomla! Template System

Every website has some content, and all kinds of information is provided on websites; not just text, but pictures, animations, and video clips—anything that communicates a site's body of knowledge. However, visual design is the appearance of the site. A good visual design is one that is high quality, appropriate, and relevant to the audience and the message it supports. As a large amount of companies feel the need to redesign their site very few years, they need someone who can stand back and figure out what all that content should communicate. This could be you.

The basic principle of Joomla! (and other content management systems) is to separate the content from its visual form. Although this separation is not absolute, it is distinct enough to facilitate quick and efficient customization and deployment of websites. Changing the appearance of web pages built on CMS comes down to installing and configuring a new template.

A template is a set of files that determine the look and feel of your Joomla-powered website. Templates include information about the general layout of the site and other content, such as graphics, colors, background images, headers, logos, and typography and footers. Each template is different, offering many choices for site owners to almost instantly change the look of their website.

You can see the result of this separation of content from presentation by changing the default template (preinstalled in Joomla!). For web designers, learning how to develop templates for content management systems such as Joomla! opens up lots of opportunities.

Joomla! gives you big opportunities to build websites. Taking into account the evolution of web browsers, you are only limited by your imagination and skill set, thanks to a powerful and flexible CMS infrastructure. The ability to change or modify the content and appearance of web pages is important in today's online landscape.

 

What is a Joomla! template?


As in the case of traditional HTML templates, Joomla! template is a collection of files (PHP, CSS, and JavaScript) that define the visual appearance of the site. Each template has variations on these files, and each template's files are different, but they have a common purpose; they control the placement of the elements on the screen and impact both the presentation of the contents and the usability of the functionality. In general, a template does not have any content, but it can include logo and background images.

Note

The Joomla! template controls the way all information is shown on each page of the website. A template contains the stylesheets, locations, and layout information for the web content being displayed. Also each installed component can have its own template to present content that can overwrite the default template's CSS styles.

A template alone cannot be called a website. Generally, people think of the template as the appearance of their site. But a template is only a structure (usually painted and colored) with active fields. It determines the appearance of individual elements (for example, font size, color, backgrounds, style, and spacing) and arrangement of individual elements (including modules). In Joomla!, a single page view is generated by the HTML output of one component, selected modules, and the template.

Unlike typical websites, where different components of the template are duplicated throughout the website pages, in case of Joomla!, there is just one assigned template that is responsible for displaying content for the entire site. Most CMS's, Joomla! included, have a modular structure that allows easy improvement of the site's appearance and functionality by installing and publishing modules in appropriate areas.

Search engines don't care about design, but people do. How well a template is designed and implemented is, therefore, largely responsible for the first impression made by a website, which later translates into the perception that people have of the entire website.

Joomla! released Joomla! Version 3.0.0 on September 27, 2012 with significant updates and major developments. With the adoption of the Twitter Bootstrap framework, Joomla! has become the first major CMS to be mobile ready in both visitor and administrator areas. Bootstrap (http://twitter.github.com/bootstrap) is an open source JavaScript framework developed by the team at Twitter.

It is a combination of HTML, CSS, and JavaScript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. As a result, page layout uses a 1152 px * 1132 px * 1116 px * 1104 px grid, whereas previous versions of Joomla! templates used a 940 px wide layout. Default template stylesheets in Joomla! 3.x are written with LESS, and are then compiled to generate the CSS files.

Because of the use of Bootstrap, Joomla! 3.x will slowly begin to migrate toward jQuery in the core (instead of MooTools). mootools is no longer the primary JavaScript library interface.

Note

Joomla! 3.x templates are not compatible with previous versions of Joomla! and have been developed as a separate product.

Templates – download for free, buy, or build your own

I also want to show you the sites where you can download templates for free or buy them; after all, this book is supposed to teach you how to create your own sites. There are a number of reasons for this.

First, you might not have the time or the ability to design a template or create it from scratch for the customer. You can set up your website within minutes because all you have to do is install or upload your template and begin adding content. By swapping the header image and changing the background color or image, you can transform a template with very little additional work.

Second, as you read the following chapters in this book you will get acquainted with the basic principles of modifying templates, and thus you will learn how to adapt the ready-made solutions to the specific needs of your project. In general, you don't need to know much about PHP to use or tweak prebuilt templates.

Tip

Templates can be customized by anyone with basic HTML/CSS knowledge. You can customize template elements to make it suit your needs or those of your client using a simple CSS editor; your template can be configured by template parameters.

Third, learn from other template developers. Follow every move of your competitors. When they release an interesting, functional, and popular template, follow (but do not copy) them. We can all learn from others; projects by other people are probably one of the most obvious sources of inspiration. The following screenshot presents a few commercial templates for Joomla! 3.x. built in 2013 by popular developers, bearing in mind, however, that the line between inspiration and plagiarism is often very thin:

Free templates

Premade free templates are a great solution for those who have a limited budget. It is good experience to use the work of different developers and is also a great way to test a new web concept without investing much apart from your time. There are some decent free templates out there that may even be suitable for a small or medium production website. If you don't like a certain template after using it for a bit, ditching it doesn't mean any loss in investment.

Unfortunately, there are also some disadvantages of using free templates. These templates are not unique. Several thousands of web designers from around the world may have already downloaded and used the template you have chosen. So if you don't change the colors or layout a bit, your site will look like a clone, which would be quite unprofessional.

Generally, free Joomla! templates don't have any important or useful features such as color variants, Google fonts, advanced typography, CSS compression options, or even responsive layout. On the downside of free templates, you have the obvious quality issues. The majority of free templates are very basic and sometimes even buggy. The support for free templates is almost always lacking. While there are a few free templates that are supported by their creators, they are under no obligation to provide full support to your template if you need help adjusting the layout or fixing a problem due to an error.

Realize that developers often use free templates to advertise their cost structures, expansion versions, or club subscriptions. That's why some developers require you to leave a link to their website on the bottom of your page if you use their free templates.

Note

What was surprising to me was that not all the free templates for Joomla! 3.x are mobile friendly, despite the fact that even the built-in CMS are built as Responsive Web Design (RWD). In most cases, it was presumably intended by the creators to look like JoomlaShine or Globbersthemes.

The following is a list of resources from where you can download different kinds of free templates:

Quite often, popular developers publish free templates on their websites; in this way they, promote their brand and other products such as modules or commercial versions of templates. Those templates always have better quality and features than others.

Note

I suggest that you download free templates only from reliable sources. It is with a great deal of care that you should approach templates shared on discussion forums or blogs because there's a high probability that the code template has been deliberately modified. A huge proportion of templates available for free are in fact packaged with malicious code.

Premium templates

These templates provide solutions that the Joomla! community cannot provide without charging money. I always say that knowledge, quality, and time cost money. Besides, no one is forcing you to buy; you always have a choice.

Third-party template providers are of two types: clubs and individual template providers. Some of the companies that offer proprietary templates do not sell them by piece. Instead, the customer buys club membership, which guarantees them access, say for 3, 6, or 12 months, to all the templates available in this period and before. The terms of purchase for the templates vary depending on the terms and conditions of the license. Each package has different prices, durations, and number of supported domains. Usually, the cheapest package, which costs about 50 dollars, involves severe licensing restrictions, such as allowing only one template to be used for a given domain or no right to remove the copyright notice from the template footer. Even though there are restrictions, the greatest advantage is that you can almost always download all the available templates.

There is a difference between standard membership and developer membership. For people and companies who are professionally concerned with creating websites, this developer membership, although more expensive than other packages, entitles you to all features of the regular club membership with additional features such as unlimited site licenses and VIP support.

Note

When your membership expires, you can still use all templates and extensions downloaded during your membership period for your registered domains without paying any extra fee. It is worth noting that the price of renewal of membership in the club is usually less than 20 or 30 percent of the purchase price.

Technical support is usually one of the main features that is included with premium templates. This level of assistance is priceless, especially for beginners who lack much technical knowledge. Another feature is the Quickstart installer that comes with most commercial templates. These quick installers are prepackaged Joomla! installations that have the template already installed and modules set at appropriate positions.

Premium templates are updated on a regular basis; developers will release updates in order to ensure templates are compatible with most (if not all) major browsers, and they often come with extensive documentation. Generally, new club templates are added monthly.

You can expect compliance and responsive design. Premium templates are far more likely to be designed with current web standards in mind.They always have several unique features, but in the race to build feature-rich templates, developers will add a lot of functionality that you will probably never use.

Most commercial templates also have a style for selected components—for example, K2 or e-commerce—in addition to what the default template offers. This means that, as web developers, we have less to do because we do not need to additionally modify the style of the component to visually match the rest. Every page with commercial templates usually provides screenshots and demo preview, and explicitly specifies layout and other pertinent information. Read this information and comments carefully, if available, before buying. Do not buy a pig in a poke.

The thing I wondered about is the uniqueness of such templates; if they need to be bought, surely they are used by fewer people. Does this mean that there are fewer chances that the created website will be similar to other websites? Does the price—a factor — that certainly limits the number of possible buyers make a difference in terms of uniqueness of the website? The answer is, not necessarily. The majority of commercial templates can be, to the detriment of their authors, downloaded for free within a few days or even hours from their release. This means that many people use them without paying a penny. Furthermore, I believe that a lot of people, even if they have only bought the cheapest, license-restricted package, go ahead and ignore those restrictions and install the templates on more domains than allowed for the package.

The following is a list of popular websites (in alphabetical order) related to Joomla! offering commercial templates for years:

How to earn money per sale

There are many ways to make money online with Joomla!; one of them is by joining a Joomla! affiliate program from JoomlArt, GavickPro, JoomlaShine, Shape5, or Template Monster. As an affiliate, you can earn commissions on all qualifying revenue generated by textual links and banners. Basically, if a link on an affiliate site brings the merchant site money (a customer purchases something), the merchant site pays the affiliate site according to their agreement. Affiliate links contain unique identifiers allowing us to cookie anyone coming to our website. If you buy a template for your client you can also send him or use your own affiliate link to get extra money.

Affiliate programs work best when you choose products, services, and template developers that match the content of your website (blog) and interest your clients. If you choose affiliate programs well, everybody involved in the process wins.

Conclusion

Which element of a website makes the template unique? Pictures, content, logo, colors, and typography; each of these elements have an influence.

I've shown you the advantages and disadvantages of using premade templates, but ultimately it's going to depend on each person to determine what will work best for them. It should also be considered that some of these templates are universal, while some are dedicated to the implementation of specific web projects.

If you feel that both premium and free options have no answer for your needs, you have to build your own template. A custom designed template is a major investment but it can definitely give you a long-term solution and help your business stand out as a professional resource with unique branding.

Identifying templates

Ultimately, what people are excited about is the design, and all I'm offering here is a set of tools and tips that will help you to reach your goals.

While browsing various sites, you might come across a template that really suits you and one that you would like to use in your project if possible. It is possible. You need, however, to meet several conditions. First, you have to determine if it really is Joomla!.

Tip

Several well-known developers offer visually identical templates for both Joomla! and WordPress.

Wappalyzer is a browser add-on (for both Chrome and Firefox) that uncovers the technologies that are used on websites. 80 popular content management systems are detected by it, along with web shops, web servers, JavaScript frameworks, analytics tools, and many other technologies. Install the add-on and restart your browser. Now just browse to any website and you will see icons in the address bar of all the applications, software, or frameworks the site is using. The first step for you, once you've identified that a website is running Joomla!, is the need to determine the name of the template, to recognize the website and its developer. Of course sometimes, if you are lucky, the website includes a link to the site of the template creator. I recommend starting from there. Unfortunately, this is most often the case for free templates. In the lower, so-called copyright area, you may also find the name of the framework used to create the template. This can help in your search, but remember that many independent developers as well as many development companies use the same framework.

As the files of any template that was used in the creation of a site with any version of Joomla! are located in the /templates/name_of_template folder, you can view the source code generated by the browser (click on the left mouse button View source code) and look for tell-tale markers that indicate who made them, as shown in the following screenshot:

A similar effect can be achieved by clicking on any graphic element that is a part of the template (and not the text content) such as the background. Click on it and select Show background image. The full path of this element should be displayed in the address bar, together with the clues helpful in your investigation. In our example, it is the gk prefix—the abbreviated name of the creator, Gavick news—which is the full name of the template. Now just use Google to find who created the template or from where to download it. The following is a list of what text to look for in the code (prefix in name or classes) from some other popular template clubs:

  • Joomlart: ja_

  • Shape5: s5_

  • Rockettheme: rt_

  • Yootheme: yoo_

However, unlike for the earlier versions of Joomla!, for Version 3.x it is getting more and more difficult to decipher the template using this method. You can try to view the CSS styles attached to the template and look for copyright notices that provide information about the author of the style, and consequently of the template. This method is also useful to investigate the modules used since most of them employ their own additional CSS styles. Nonetheless, as more and more templates with the styles attached are getting compressed and optimized, they lose such information in the process.

Even if you find the creator's site and the specific template, you may still be disappointed because the original template might turn out to be different from what you saw on the site you came across. This is because the person implementing the template might have reworked it a lot to adopt the template as per the customer's requirements. You can also come across custom templates that have been designed from scratch and cannot be bought or downloaded because they were created upon an agreement.

Investigating design solutions

Sometimes you might be interested in a particular CSS style used on a website. A CSS style cannot be simply downloaded, unlike a picture, for example. You need to use an add-on to identify the CSS style of the selected element. Such tools are already available as a standard in Chrome and Firefox, and you can also install Firebug (getfirebug.com). Using this tool, you can easily get information about any page element, including its location in the page and styles that have been applied. It gives you the ability to edit CSS properties and attributes to test possible enhancements immediately. Using it, easily understand how the various aspects of the template being viewed work. These tools definitely fall under the "must have" category. By the way, I suggest you watch videos about capabilities and how to use Firebug from //docs.joomla.org/Using_Firebug_With_Your_Joomla_Website and youtube.com.

The Opera web browser also has its own developer toolbar, named Opera Dragonfly; a fully featured development and debugging tool integrated into the browser. That's why it requires no additional installation.

Additional information for this browser toolkit is available from: http://www.opera.com/dragonfly/.

 

Introducing the Joomla! Template Manager


The Template Manager is a component for managing the installed templates. It is available only in the Administration panel. As the site administrator, enter the address of your website and add /administrator to it in the address bar of the browser.

You can use it to set the default template for all or selected pages of a website, configure the appearance, or apply minor changes to the CSS and PHP styles.

Exploring the default templates

There are two templates for frontend included in the default distribution of Joomla! 3. These templates provide some basic variety in look and style, and by studying the defaults, you can learn from the functional examples they provide. By the way, the Protostar template has a fully responsive layout; you can check it by resizing the browser window.

Installing a new template

Hundreds of attractive templates built for Joomla! are available both for free and commercially from third-party developers. Templates are available from a variety of places, at different prices. Many are licensed under the GPL and are available for free; that's the beauty and freedom of the Joomla! community.

One of the phenomenal innovations already introduced in Joomla! 1.5 was a common installer for modules, components, and plugins, as well as for templates. While logged in to the Admin panel, from the top menu, navigate to Extensions | Extension Manager. The System option provides three convenient methods to install a Joomla! template.

Unloading a package file

Unloading a package file is a typical method; however, it sometimes takes a long time to install the big template file to a hosted website (on a remote server). This can be done by performing the following steps:

  1. Download one or more archive files (normally in the .zip or tar.gz format) from the template provider's website to your local disk drive or pen drive.

  2. Click on the Browse button to specify the location on your disk to which the Joomla! template archive file is to be downloaded.

  3. Click on the Upload & Install button. Joomla! will unpack and read the contents of the archive file and install the template.

For the second method, Install from Directory, you should first upload the desired template via FTP (including files and subdirectories). The folder to which your template should be uploaded is the tmp directory found in the root folder of your Joomla! installation.

In addition, the third method allows the installation directly from the URL without the need for cumbersome download to your local drive.

Interestingly, the installer by analyzing the code (an XML file), automatically identifies the type of archive and assigns it to the appropriate group (templates or extensions).

When the installation is done, the screen displays the message Install Template Success. If the installation is not successful, an error message will be displayed. By default, the newly installed template is not set as default, so we need to set it as default from the respective manager, for example, from the Template Manager.

The Joomla! templates for the frontend are in a directory named templates. Each folder inside this folder, except system, is a different template. There are no limits except the server capacity and database capacity in terms of quantity. However, it is not recommended to leave the template that is not used by the CMS. When I create a website for my own needs or for a customer, I install the target template and uninstall all the unnecessary ones.

Note

Because Joomla!, since as far back as Version 1.6, does not include the add-on for switching to "legacy mode", extensions or templates created with earlier versions cannot be used without prior modification (fitting).

Typical errors during template installation

The most common mistakes during installation are a result of ignorance of the user or incorrect server settings, but rarely the fault of the template.

The first thing to do after downloading a template from any site is to see if the package includes more than just the template. If the archive includes additional folders with components and modules, the file size usually exceeds 2 MB. In this case, extract the archive and choose the appropriate folder.

A common mistake is to attempt to install the Quickstart package (which can be up to 35 MB in size) via the installation wizard.

Note

The Quickstart package includes complete Joomla! installations that have been personalized for the given template that you are trying to install. They include the Joomla! template, all used extensions (for example, modules), images, sometimes fonts, and of course demo content.

Such a package includes Joomla! and all the additional elements, thus making the installation impossible. This package is strictly to be used like a new Joomla! installation to provide you with a duplicate of our demo for that particular template. If you are not able to use the Quickstart package, then you need to install the template and extra extensions independently via the Joomla! installer.

Almost all template developers, such as GavickPro or YOOtheme, offer such a demo wizard. So, first check if the filename consists of a pre-upload call to action, such as "unzip first". If you see such a note the next time, do not hesitate and just unpack the archive before installing anything.

The mistake is attempting to install templates, components, or modules that are archived in the .rar format. Extract the archive first, otherwise, the system will continue to display this error: JInstaller: :Install: Cannot find XML setup file. The same message will appear if you try to install an archive that does not contain the file required by Joomla!—templateDetails.xml—that accompanies templates.

The third, also popular warning, particularly related to free servers, is Warning - Failed to move file. This issue is related to directory read/write permissions. To ensure that this is a directory permission-related problem, first click on System in the horizontal top menu and then on System Information. In the Directory Permissions tab, Joomla! will show you whether it is able to write to the specified directories. If one or more directories are marked Unwritable, you're potentially facing a problem with directory permissions. Now you can try to change the Change Mode CHMOD settings of folders such as templates and tmp yourself using the FTP client. On most of the servers that are already facing problems with directory ownership, the only CHMOD setting that will actually work is 777. However, it causes security problems. So after installation of the template, change CHMOD to the templates folder.

Say you have a template package (but not the Quickstart package) that you want to install in Joomla! that is larger than the maximum file upload size. Due to limitations of the web hosting environment, you have to use the Discover tool from the Extension Manager.Upload unzipped template folder with all included files under the /templates folder on your server.

Navigate to Extensions manager | Discover (the tab on toolbar). Select the newly discovered template in the Discover screen and click on the Install button.

Make it look like the demo

Firstly, if after installing a new template, the frontend shows only the Home menu item and one copyright module, you don't have to worry. This is not a problem with the template. This generally means that the template you're using has named its module positions differently from the template you were using before. Therefore, the modules are set to be shown on module positions that no longer exist in this template and you have to rename all your module positions associated with the current (default) template. You can follow the guidelines given in Module Position Guide, published (sometimes on the demo page) by the developer of the template.

In Joomla! Version 1.5, you could type ?tp=1 at the end of the URL to find all the module positions of a template. However, since this feature is disabled by default in Joomla! Version 1.6, we need to navigate to Extensions | Template Manager, click on Options, change Preview module positions from disabled to the enabled mode, and save the changes. When you are done examining module positions, remember to set Preview Module Positions to Disabled for security reasons.

Tip

You can view all the module positions in the current Joomla! template by appending ?tp=1 to the end of your current URL or by clicking on the Preview link found by navigating to Extensions | Templates | Manager |.

By navigating to Extension | Module Manager, you can assign one of these positions to any module. If you need the module at different positions, you can also copy it.

Secondly, the demo templates already contain sample content that consists of the category structure, text content, or pictures. There is no need to mention various types of published modules or components. Most commercial producers attach a so-called Quickstart package to their templates and frameworks. The Quickstart package includes all the files needed to install Joomla!, including the latest stable version of the CMS, template, components, modules and plugins, and also the SQL dump content included to set the template exactly as they show in the demo showcase. However, I recommend that you install it only for learning purposes (that is, on an extra subdomain) to find out where things are and how they did it, and not as a version that you will make available on the Internet at your primary domain.

Changing your default template

The default template (or more precisely, a style, if we follow the names of the Template Manager tabs) in Joomla! is Protostar. It is presented immediately after the installation of the CMS. To change the template, check the checkbox next to the name of your newly chosen template and then click on the Make Default button. If the template has been correctly installed and published, you can see how your site looks after the change. Bear in mind that the way the content is presented depends to a large extent on the arrangement of the published modules in the template.

Tip

Only one of the installed templates can have the Default status.

Customizing the current template

Editing a basic template in Joomla! Version 3.x is similar, in terms of function, to the previous versions; the only difference is some minor features and bug fixes. The Template Manager allows for simple editing of a template. This modification and/or setup may involve both settings, such as the color theme (depending on the template used) as well as editing the source code.

Most of the templates, commercial ones in particular, allow configuration of a few to several options, making it easy to use the Administration panel to adjust the appearance of many elements as per current needs. Even the default, preinstalled templates such as Protostar and Beez3 come with a few visual options that you can use to change the appearance of a website (for example, colors, background, logo, and layout width) as shown in the following screenshot:

The fact that more and more templates offer a wide range of configuration options allows you to use just one template to achieve distinct visual effects. Therefore, you need to use template styles. They offer the possibility of setting and using different versions of one template. Styles are variations of the same template. In this style, configurations can be made depending on the template, such as changing the colors, background or typography, adding social buttons, uploading a new logo, or more advanced changes such as changing positions of modules (covered in the next chapter), and much more without touching a single line of HTML or CSS code.

Note

Every template framework has its own specific set of options that allow you to use a minimum of three styles.

In the Details tab, you can also set different styles for different languages.

If you switch, you will see the thumbnails of the installed templates on the tab at the side to Templates in Template Manager, and next to it, the following additional function links:

  • Details and Files: These options allow you to customize the template by changing the stylesheets and edition of three important template files (main page, error page, and print view). Since all the templates do not contain the same set of options, this can be helpful, especially if you want to quickly lead some minor fixes. Use this feature with care because it doesn't have any validation tools.

  • Preview: This option allows you to view all the template module positions.

Changing the template used for specific menu items

While creating a complex website, you will often need to make a decision regarding which template to choose or ask yourself if it is possible to use different color schemas, width, layout, and so on, for different sections of the site (that is, sports, business, and entertainment).

The answer will surely satisfy all Joomla! administrators; it is possible and can be done by using the built-in features without the hassles of looking for additional extensions. Nonetheless, extensions can be very helpful in certain situations, as you will see in Chapter 4, Advanced Template and Styling Tricks, of the book.

Joomla! Version 3.x gives you the option of switching between two or more templates or template styles on the frontend. This is supported with Menu Assignment in Template Manager, so you can set different templates other than the default one for each menu or only a menu item. The system of placing different templates on different pages is based entirely on menu links.

These can include variants of the default template, such as color themes or other custom variants. You just need to click on the name of the additional template in Template Manager and then navigate to Menu assignment and you can choose on which menu links this template should appear. Finally, click on the Save button to save your changes as shown in the following screenshot:

This will overwrite the settings, and the default template for the site will be replaced with the templates selected for the respective menu items. The default template will be applied to the pages (menu items) with no selected template. In one of the projects I managed, this method was used to present one template exclusively for the home page and another as a common template for the rest of the site.

Only one template can have the Default status, but any number of templates can be assigned to pages. If you assign a template to a menu item that has already had a template assigned to it, the newly assigned template will replace the previous one.

At this point, it's worth reminding you again that changing the template will not change the content. However, it may change the module positions, especially if you use templates from different web developers.

By clicking on the Duplicate button in Template Manager, you can create as many versions (styles) of a template with different settings as you like and assign them to a menu link.

Removing unnecessary templates

Sometimes you have to do some cleaning, especially if you are planning to publish a website online that will be soon managed only by your client. Perhaps you may ask why; it's because fewer options always mean fewer questions. If you have a few or even several templates installed, you might not be using them all; you can remove them from the content management system. In an older version of Joomla!, physically deleting them from the server did the trick. This is not recommended for newer versions of the CMS due to the fact that during the installation an entry is added to the database. With regards to Joomla! Version 3.x templates, you should uninstall CMS using the extension manager. These actions can be performed only on templates that can be removed. Note that the current template cannot be removed; this protection seeks to ensure availability of the website.

To uninstall a template in the top menu, hover over Extensions and click on Extension Manager. On the left-hand column you'll see these tabs: Install, Update, Manage, Discover, Database, and Warnings. Ensure that you are on the Manage tab by clicking on it.

Now you may use the filter feature (you'll need to select the filter type) or browse and find the unnecessary template you want to remove. Then, check the box you want to remove next to the Joomla! and click on Uninstall in the top-right additional menu as shown in the following screenshot:

The Delete button in Template Manger is used to delete only the cloned style templates that you may have previously created.

 

Summary


If you need to install or modify a template for an existing site, consider the complexity of the task and either do it on a copy of the site or during the time when few people visit the site. Give yourself extra time. Usually, everything takes more time than originally planned. I know from experience that the little things drain most of the time, particularly if you are a perfectionist and cannot get over such things as a one-pixel discrepancy or mismatched color of the links.

Hopefully, after reading this chapter you will have a better understanding of the features of the Joomla! Template Manager and the types of problems it is able to solve. In the following chapters we will go through the process of planning and designing our template.

In the next chapter, we'll learn about what template frameworks are and how they can help speed up the process of creating a new template.

About the Author

  • Paweł Frankowski

    Paweł Frankowski is the author of nine books, including Joomla! Manual for users, Social networking, construction, administration and moderation, and Corporate Web site Ideas, strategy, implementation. Pawel also writes articles for his personal blog and for several computer magazines. He also helps Polish users in the Polish Joomla! Community Forum. He is a frequent speaker at IT conferences and Joomla! Polish Day. Pawel has been building sites since 2005, from corporate web sites to small personal sites, most of them using Joomla!. Currently, he is developing the GavickPro Knowledge database and helping clients to solve their problems.

    Browse publications by this author

Latest Reviews

(2 reviews total)
Very good book and is easy to use
Excellent
Book Title
Unlock this book and the full library for FREE
Start free trial