Actions

J1.5

Difference between revisions of "Getting Started with Templates"

From Joomla! Documentation

m
m (Reverted edits by 之首 (talk) to last revision by Mvangeest)
(10 intermediate revisions by 7 users not shown)
Line 1: Line 1:
Ovaj uvodni vodić će vas upoznati s Joomla! sistemom predložaka i reći vam što možete s njim uraditi.
+
This introductory tutorial will give you an insight into the Joomla! templating system and what you can do with it.
  
{{:Koja je svrha predložaka?}}
+
== What is the purpose of a template? ==
 +
{{:What is the purpose of a template?}}
  
{{:Što možete učiniti s predlošcima?}}
+
== What can you do with a template? ==
 +
{{:What can you do with a template?}}
  
{{:Predlošci isporučeni s Joomla!-om}}
+
== Templates supplied with Joomla! ==
 +
{{:Templates supplied with Joomla!}}
  
{{:Kako promjeniti predložak}}
+
== Switching templates ==
 +
{{:Switching templates}}
  
{{:Kako instalirati predložak}}
+
== Installing a template ==
 +
{{:Installing a template}}
  
<noinclude>[[Category:Templates]] [[Category:Tutorials]]</noinclude>
+
<noinclude>
 +
[[Category:Templates]]
 +
[[Category:Tutorials]]
 +
[[Category:Template Management]]
 +
</noinclude>

Revision as of 06:36, 3 April 2012

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.

This introductory tutorial will give you an insight into the Joomla! templating system and what you can do with it.

Contents

What is the purpose of a template?

J3x-template-example-screenshot.png

A template controls the overall look and layout of a site. It provides the framework that brings together common elements, modules and components as well as providing the cascading style sheet for the site. Both the front-end and the back-end of the site have templates.

When Joomla! is first installed several templates are automatically included. You can find many more templates at other websites. Some are available without charge under various licenses, and some are for sale. In addition, there are many developers available who can make custom templates. You can also make your own template.

Templates are managed with the Template Manager, which is located on the Extensions menu in the back-end (administrator) area of your site.

Why does Joomla! use templates? [A real beginners guide!]

The way Joomla! is designed separates out the key tasks involved in producing a website for efficient maintenance of the software. One of these tasks is to create the aesthetic (the look, feel and layout) of the site. This includes making decisions such as which content elements (components, modules and plugins) you may want to place in any given page.

When producing a web page, the location of most elements will stay the same (menus, banner locations, sidebars etc.). Additionally, you will want to create the same look (fonts, header styles, colour scheme etc.) for every page. For some parts of the site you may want to alter the general feel to indicate a different purpose for those pages (such as a blog section). A little planning is required for this, but once you have settled on the overall layout for your site, you then have the task of producing each page of content.

And that’s where the template comes in. You can either write all the code for each page separately, or use a template for each major section of your site so that when you want to create a new page you simply “fill in the blanks”. Okay, perhaps it's not that simple, but this tutorial is designed to give you a step by step guide for effective template use, starting with how to use one and ending with how to create one for yourself.

  1. Use one of the templates supplied with Joomla!
  2. Download one of the many free offerings from the Internet.
  3. Pay for one to be modified or produced from scratch if your needs cannot be met any other way.

Summary – a template controls the look of your site and at the same time allows the website administrator focus more on the actual content.


What can you do with a template?

A template is used to manipulate the way content is delivered to a web browser or screen reader. Here are some ways you can employ this on your Joomla!-powered site.

Note the changes in content layout!

Layout

The template is the place where the design of the main layout is set for your site. This includes where you place different elements(modules). For example: You can control the placement of menus, a log in form, advertising banners, polls, etc. The main body(article) of the page can be altered in style(you can select from different styles of display such as typical blog layout, a news article, etc) depending on the templates layout. *See the example image. Note the differences in layout, but how the look is consistent. The sidebar of modules has been moved from left to right and it's order rearranged.

If the template is designed to provide choices, you can also "dynamically" alter the content placement on your site, perhaps putting the main menu on the right or left side of the screen.

Color Scheme

Using CSS within the template design, you can change the colors of your backgrounds, text, links or just about anything that you could within your ordinary HTML code. Some templates provide a method to change the color in template management, others require you to modify the template's .css file(s).

Images and Effects

You can also control the way images are displayed on the page, and even create flash-like effects or include AJAX applications such as drop-down menus.

Fonts

The same applies to fonts. The designs for these are all set within the template's CSS file(s) to create a uniform look across your entire site, which makes it fantastically easy to change the whole look just by altering one or two files rather than every single page.

Browser Specific Solutions

A template can be designed to alter how it displays on different web browsers, allowing you to take full advantage of the latest developments without making your site inaccessible to those who are not able to run "up-to-the-minute" system upgrades (such as certain companies who limit what software their employees can use).


Templates supplied with Joomla!

What is a template?

A template is a type of Joomla! extension that changes the way your site looks. There are two types of templates used by the Joomla! CMS: Front-end Templates and Back-end Templates. The Front-end Template controls the way your website is presented to the user viewing the website's content. The Back-end Template controls the way your website's administrative tasks are presented for controlling management functions by a Joomla! Administrator. These would include common tasks such as: user, menu, article, category, module, component, plugin and template management.

See also: Component, Module, Plugin


Joomla! Versions


Switching templates

What is a template?

A template is a type of Joomla! extension that changes the way your site looks. There are two types of templates used by the Joomla! CMS: Front-end Templates and Back-end Templates. The Front-end Template controls the way your website is presented to the user viewing the website's content. The Back-end Template controls the way your website's administrative tasks are presented for controlling management functions by a Joomla! Administrator. These would include common tasks such as: user, menu, article, category, module, component, plugin and template management.

See also: Component, Module, Plugin


Joomla! Versions


Installing a template

Install via Admin Panel (packed template file)

Log into the back-end of your site (www.your-site.com/administrator/)

Click on: Extensions -> Extension Manager

30-Installing-template-navigate.png

You see the page "Extension Manager"

From here you can install your Templates, Plugins, Modules, Components and Languages. You have three options:

  1. Upload Package File - (select a package from your PC, upload and install it)
  2. Install from Directory - (enter the path where the package is located on your webserver)
  3. Install from URL - (enter the URL to the package)

Option 3 does everything for you, your environment needs to be properly configured to allow this. Option 1 requires you to download the extension to your PC. Option 2 requires you to unzip and move the folders/files to your webserver. All option require the webserver to have write access to the webspace.

Here, we choose the first method: Upload Package File

Select the package from your PC and click the button "Upload File & Install"

30-Installing-template-upload-package-file.png


If the package contains no errors you are done and get a success message like the one below.

30-Installing-template-install-success.png

Verify installation

Go from Install to Manage, set the type filter to 'template'. The installed template should appear in the list. If it does, the template is properly installed. Now you can assign one of styles to a menuitem or set the style as default.
For administrator templates make sure you have two windows of the template manager. Activate the new template in one of them and reset it in the other one if something went wrong.

Install via FTP (unpacked template file)

Templates can also be installed via FTP without packaging them. Simply select the template folder on your PC and upload it to your server, using your favorite FTP software. Be sure you upload the template folder to the directory: /path_to_joomla/templates/ - where /path_to_joomla/ is the location of your Joomla! installation on the server. This method is mostly used when you have created a template yourself, and do not want to have to package it to install the template, or if you want to upload more than one template at once. You must then go into extension manager and click on Discover in the sub menu. Click on "Discover" in the toolbar if your template doesn't immediately appear. A list of uninstalled items in the FTP should then appear. Click the checkbox to the left of your template and click install.

Note: Do not try to use FTP to install Components, Modules and Plugins if you are a beginner/novice. These items need database entries which have to be inserted manually if you bypass the package installer.

Install Content From A Template [Advanced Topic]

30-Import content from template.png

Joomla Version 3.0 and above can import content along with templates. This is a means to develop content locally with programs like Artisteer so you can import your whole site in one go. To import your content; Install the template as above, then from the Template Manager: Styles page (Extension > Template Manager) Select your template name in the left hand column (with the heading style), Click the Options tab and find 'Import Content from Template' Button. Click the import button which will activate a pop up modal window then click import or cancel.