Actions

Help15

Difference between revisions of "Screen.templates.15"

From Joomla! Documentation

(Description)
m (Related Information: category reorganizing)
 
(35 intermediate revisions by 8 users not shown)
Line 1: Line 1:
{{inuse}}
+
==How to Access==
 +
Select '''Extensions → Template Manager''' from the drop-down menu in the back-end of your Joomla! installation.
  
 
==Description==
 
==Description==
[[Image:Screen_templates_15.png]]
+
The Template Manager is where you assign a default Template to your Joomla! web site. You can also edit and preview Templates here.
  
The visual experience of your site front-end and back-end can be controlled in the Template Manager by choosing an [[screen.installer.15|installed]] template. A default template is used on all pages, but different templates can be assigned to various pages. The Template Manager also provides editing capabilities for the main index file of the template and the style sheet (CSS) file.
+
In Joomla!, the visual layout of both the Front-end and Back-end of your site is controlled by the Template. Templates are extensions that contain layout and style information that tells Joomla! exactly how to draw each page of your site.
  
==Version Changes==
+
When you first install Joomla!, one Back-end Template and two Front-end templates are included. Other Templates can be installed from third-party developers as Extensions.
In Joomla! 1.0.x the Template Manager was available from Site -> Template Manager -> Site Templates and Administrator Templates menu item. The parameters of a Joomla! 1.0 template were hardcoded, but the parameters of a Joomla! 1.5 template can be configured easily on the ''Template [Edit]'' screen.
+
  
In Joomla! 1.5 a template is a type of extensions, so the Template Manager was moved to the [[screen.installer.15|Extensions]] menu.  
+
If you want to use the same Template for all of the pages on your site, you just assign one Template as the Default Template. You can also assign different Templates to different pages.
  
In Joomla! 1.0 you could have a look at the available template positions by clicking the Site -> Preview -> Inline with Positions menu item. In Joomla! 1.5 you are searching for this menu item in vain. Please click the ''Preview'' toolbar button on the ''Template [Edit]'' screen instead.
+
==Screenshot==
 +
[[Image:Template_manager.png]]
  
 
==Column Headers==
 
==Column Headers==
{{Help screen column header Number}}
+
{{colheader|Number}}
 +
{{colheader|Template name}}
 +
{{colheader|Default}}
 +
{{colheader|Assigned}}
 +
{{colheader|Version}}
 +
{{colheader|Extension Date}}
 +
{{colheader|Extension Author}}
 +
{{colheader|Display}}
  
{{Help screen column header Template name}}
+
==Toolbar==
 +
At the top right you will see the toolbar:
  
{{Help screen column header Assigned}}
+
[[Image:Template_manager_toolbar.png]]
 +
*'''Default.''' Select the Template that you want to be the default Template. Then click this button. The default star symbol will show in the Default column, indicating that this is now the default Template.
 +
{{toolbaricon|Edit}} See the section below called [[#Template - Edit|Template - Edit]] for information on the edit screen.
 +
{{toolbaricon|Help}}
  
{{Help screen column header Version}}
+
==Site and Administrator Links==
 +
At the top left, above the columns, you will see two links as shown below:
  
{{Help screen column header Date}}
+
[[Image:Template_manager_links.png]]
 +
*'''Site.''' Shows the Templates available for the Front-end of the web site.
 +
*'''Administrator.''' Shows the Templates available for the Back-end of the web site. These Templates will control the appearance of the administrator portion of the site.
  
{{Help screen column header Author}}
+
==Template - Edit==
 +
===How to Access===
 +
Navigate to the Template Manager. Then click on the Template's name or select a Template and click the Edit icon on the toolbar.
  
==Typical Usage==
+
===Description===
Template Manager can be opened from Extensions -> Template Manager menu item. The installed front-end templates are listed on the ''Site'' tab while the back-end templates are available by switching to the  ''Administrator'' tab.
+
This is where you can preview a Template, edit a Template's HTML and CSS files, and set parameters for a Template.
  
If you hover over the name of the template, a thumbnail image of that template is displayed.
+
===Screenshot===
Clicking on the template name will present the template configuration screen, which provides all the basic details of the template. Parameters available for configuration appear in the ''Parameters'' pane.
+
[[Image:Template_edit.png]]
  
[[Image:Screen_templates_edit_15.png]]
+
===Details===
 +
*'''Name.''' The Template Name. No entry is allowed.
 +
*'''Description.''' A description of the Template. No entry is allowed.
 +
*'''Menus.''' If the Template is not the default Template, you can assign it to specific Menu Items. To select multiple Menu Items,hold down the Ctrl key while clicking with the mouse.
  
Clicking the ''Edit HTML'' button will display the basic text editor, which was designed to allow minor adjustments.
+
'''Parameters'''
  
[[Image:Screen_templates_edit_html_15.png]]
+
Some Templates have parameters that allow you to change the way the web site will look. For example, the default rhuk_milkyway template allows you to choose a foreground color, a background color, and different Template widths. Other Templates may have different or no parameters.
  
If you click on the ''Edit CSS'' button on the template screen, the text editor will be displayed with the style sheet file of the template. For a template with multiple style sheets, you can select which one to edit.
+
===Toolbar===
 +
At the top right you will see the toolbar:
  
[[Image:Screen_templates_edit_css_15.png]]
+
[[Image:Template_edit_toolbar.png]]
 +
*'''Preview.''' Opens a preview window of your web site using this Template. This window shows the available Module Positions ("top", "left", and so on) indicated in red type. This is shown in the screenshot below:
 +
[[Image:Template_edit_preview.png]]
 +
:'''Note:''' The preview of an administrator template does not show you the administrator module positions.
 +
*'''Edit HTML.''' Opens the "index.php" file from the Template for editing using a simple text editor. Press Save or Apply to save any changes you make. Press Cancel to cancel any changes. You can also edit this file outside of Joomla! with any HTML editor. Note that the full name of this file is displayed above the edit window.
 +
*'''Edit CSS.''' Opens a list of the CSS files used in this Template. To open one of the CSS files for editing, select the file and press the Edit icon in the toolbar. This will open this CSS file for editing using a simple text editor. Press Save or Apply to save any changes you make. Press Cancel to cancel any changes. You can also edit this file outside of Joomla! with any editor. Note that the full name of this file is displayed above the edit window.
 +
{{toolbaricon|Save}}
 +
{{toolbaricon|Apply}}
 +
{{toolbaricon|Close}}
 +
{{toolbaricon|Help}}
  
If you are curious about the available module positions, click the ''Preview'' button on the toolbar and the site front-end will be loaded showing you the available positions.
+
==Quick Tips==
 +
*'''Important''': Do not delete the default template files using FTP because it generates an error in both the front-end and back-end!
  
[[Image:Screen_templates_preview_15.png]]
+
*Before editing the '''HTML''' and the '''CSS''' file of the template, it is a good idea to make a backup of the file you are editing. Also, you can edit these files outside of Joomla! using the HTML or CSS editor of your choice.
 
+
==Quick Tips==
+
You can switch between the already installed templates for the '''Site''' and the '''Administrator''' by selecting the desired template and clicking on the Default icon on the upper right part of the screen.
+
  
==Points to Watch==
+
*The '''Preview''' will only display positions that contain published modules. To make sure you can see all positions defined in the template, you can create custom modules for them.
'''Important''': Do not delete the default template files using FTP because it issues in error both frontend and backend!
+
  
Before editing the '''HTML''' and the '''CSS''' file of the template, it is a good idea to make a backup of the file you are editing.
+
*You cannot assign the default template to specific Menu Items. This is because it is already assigned to all Menu Items by default.
  
==Dependencies==
+
==Related Information==
The templates listed in the Template Manager can be installed in the [[screen.installer.15|Extension Manager]] from Extensions -> Install/Uninstall menu item. The unnecessary templates can be removed on the Templates tab of the Extension Manager. Only those templates that may be uninstalled are displayed as accessible, the default templates (site and administrator) cannot be removed.
+
*To install a new Template: [[screen.installer.15#Install Screen|Extension Manager - Install Screen]]
 +
*To uninstall a Template: [[screen.installer.15#Templates Screen|Extension Manager - Templates Screen]]
  
[[Category:DocCamp]]
+
<noinclude>{{cathelp|1.5|Template Manager Help Screens|Extensions Help Screens}}</noinclude>

Latest revision as of 22:22, 4 August 2012

Contents

How to Access

Select Extensions → Template Manager from the drop-down menu in the back-end of your Joomla! installation.

Description

The Template Manager is where you assign a default Template to your Joomla! web site. You can also edit and preview Templates here.

In Joomla!, the visual layout of both the Front-end and Back-end of your site is controlled by the Template. Templates are extensions that contain layout and style information that tells Joomla! exactly how to draw each page of your site.

When you first install Joomla!, one Back-end Template and two Front-end templates are included. Other Templates can be installed from third-party developers as Extensions.

If you want to use the same Template for all of the pages on your site, you just assign one Template as the Default Template. You can also assign different Templates to different pages.

Screenshot

Template manager.png

Column Headers

  • #. An indexing number automatically assigned by Joomla! for ease of reference.
  • Template Name. The name given to each Template by the Template author. Click the Name to open the Template for editing. If you hover the mouse over the Template Name, a small preview for the Template displays in a pop-up window. The Template Name normally corresponds to the sub-directory name that contains the Template in the <path-to-Joomla!>/templates/ directory. For example, the files for the "rhuk_milkyway" Template are in the directory "<path-to-Joomla!>/templates/rhuk_milkyway".
  • Default. Indicator of Default Template.
  • Assigned. Shows whether this Template has been assigned to any specific menu items. To assign a template to menu items, open the Template for editing.
  • Version. The version number of the Extension.
  • Date. The date this extension was released.
  • Author. The author of this extension.
  • Display #. The number of items to display on one page. If there are more items than this number, you can use the page navigation buttons (Start, Prev, Next, End, and page numbers) to navigate between pages. Note that if you have a large number of items, it may be helpful to use the Filter options, located above the column headings, to limit which items display (where applicable).

Toolbar

At the top right you will see the toolbar:

Template manager toolbar.png

  • Default. Select the Template that you want to be the default Template. Then click this button. The default star symbol will show in the Default column, indicating that this is now the default Template.
  • Edit. Select one item and click on this button to open it in edit mode. If you have more than one item selected (where applicable), the first item will be opened. You can also open an item for editing by clicking on its Title or Name. See the section below called Template - Edit for information on the edit screen.
  • Help. Opens this Help Screen.

Site and Administrator Links

At the top left, above the columns, you will see two links as shown below:

Template manager links.png

  • Site. Shows the Templates available for the Front-end of the web site.
  • Administrator. Shows the Templates available for the Back-end of the web site. These Templates will control the appearance of the administrator portion of the site.

Template - Edit

How to Access

Navigate to the Template Manager. Then click on the Template's name or select a Template and click the Edit icon on the toolbar.

Description

This is where you can preview a Template, edit a Template's HTML and CSS files, and set parameters for a Template.

Screenshot

Template edit.png

Details

  • Name. The Template Name. No entry is allowed.
  • Description. A description of the Template. No entry is allowed.
  • Menus. If the Template is not the default Template, you can assign it to specific Menu Items. To select multiple Menu Items,hold down the Ctrl key while clicking with the mouse.

Parameters

Some Templates have parameters that allow you to change the way the web site will look. For example, the default rhuk_milkyway template allows you to choose a foreground color, a background color, and different Template widths. Other Templates may have different or no parameters.

Toolbar

At the top right you will see the toolbar:

Template edit toolbar.png

  • Preview. Opens a preview window of your web site using this Template. This window shows the available Module Positions ("top", "left", and so on) indicated in red type. This is shown in the screenshot below:

Template edit preview.png

Note: The preview of an administrator template does not show you the administrator module positions.
  • Edit HTML. Opens the "index.php" file from the Template for editing using a simple text editor. Press Save or Apply to save any changes you make. Press Cancel to cancel any changes. You can also edit this file outside of Joomla! with any HTML editor. Note that the full name of this file is displayed above the edit window.
  • Edit CSS. Opens a list of the CSS files used in this Template. To open one of the CSS files for editing, select the file and press the Edit icon in the toolbar. This will open this CSS file for editing using a simple text editor. Press Save or Apply to save any changes you make. Press Cancel to cancel any changes. You can also edit this file outside of Joomla! with any editor. Note that the full name of this file is displayed above the edit window.
  • Save. Save it and return to editing the menu details.
  • Apply. Save it, but stay in the same screen. If you have been working on a screen for a long time and don't want to risk losing your work, pressing Apply saves your work and lets you continue working. If, for example, you lost your Internet connection, your work will be saved up this point.
  • Close. Return to the previous screen without saving your work. If you press Close while adding a new item, this new item will not be created. If you were modifying an existing item, the modifications will not be saved.
  • Help. Opens this Help Screen.

Quick Tips

  • Important: Do not delete the default template files using FTP because it generates an error in both the front-end and back-end!
  • Before editing the HTML and the CSS file of the template, it is a good idea to make a backup of the file you are editing. Also, you can edit these files outside of Joomla! using the HTML or CSS editor of your choice.
  • The Preview will only display positions that contain published modules. To make sure you can see all positions defined in the template, you can create custom modules for them.
  • You cannot assign the default template to specific Menu Items. This is because it is already assigned to all Menu Items by default.

Related Information