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.
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! 3.x templates are not compatible with previous versions of Joomla! and have been developed as a separate product.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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!.
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:
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.
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 Dragonﬂy; 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/.
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.
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.
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 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:
Download one or more archive files (normally in the
tar.gzformat) from the template provider's website to your local disk drive or pen drive.
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.
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.
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
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
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.
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.
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.
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.
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, conﬁgurations 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.
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.
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.
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.
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:
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.