Joomla Video Tutorials

Basic Joomla video tutorials Series for Joomla 1.6 and Joomla 2.5

Joomla templates video tutorial

New to Joomla templates? Watch our Joomla 2.5 video tutorial here and we will walk you through Joomla template back-end management. You will learn how to work on Joomla template. The video also shows you the the font-page of each default Joomla Template and T3 blank template.

Video Transcript

Hi. I’m Robert Vining. I will give you an overview of Joomla 1.6 template today.

Joomla 1.6 comes with a built in Templates Management System that allows you to configure the look and feel of your website.

You can access the Template Manager in the Joomla control panel or in the Extensions menu at the top. In this administration section, you can manage the templates and their styles to be used for your website.

Notice the toolbar at the top of this screen? This allows you to set styles as default, edit, duplicate and delete styles. Joomla 1.6 comes with 4 templates for your front-end and 2 for the administrator back-end. Each of them have various settings and default styles.

When managing a large amount of styles and templates the search and filter feature can be very helpful. In the Templates tab, you can check the version, release date and information about the author for each template.

Templates Management

OK! Let's see what these buttons can do! First, we will set a style as default. This default style will be used for all pages in the front-end. As you can see, just select the style and click the Make default button. Now let's duplicate one of the template styles. Select one and click the Duplicate button.

You can use this new one for specific settings you might need for a specific page. To delete it, select it and click the Delete button.

To edit a template style, select one and click the Edit button or simply click on the name. This will open the template administration panel. The Atomic template does not have any additional parameters. Still, you can set it as default from this panel,or assign it to the menu items. This means that when browsing the pages linked in the assigned menu items, Joomla will use this template.

Other templates provide various settings to customize the look and feel of the website. For instance, the Beez template allows you to set a minimum and a maximum template width, logo, site title (if no logo image is selected) and description. Also, you can set the position of the main navigation and the template color. Let's have a look at each of the templates in the front-end on the sample websites distributed with Joomla 1.6.

The Atomic template is very light weight with a clean design which makes it easy to customize. The Beez template provides additional styling for menus, content and a text-resize feature. The FruitShop sample website in Joomla 1.6 uses a custom style with a different color scheme for the Beez template.

Here is another sample website in Joomla 1.6 using a different custom style for the Beez template. Let's have a quick look at the administrator templates. The template you have seen so far is called BlueStork. Let's select the Hathor template and make default. With this template, the toolbar is closer to the items list for handy management.

The Hathor template was designed during the Google Summer Code 2009 by Andrea Tarr to be accesible with a keyboard or screen reader for those with disabilities. That is why the menu has been moving inside a tab and the addition of submitting button next to the dropdown boxes. Let's have a look at the Hathor template settings. Again with the accessibility in mind, Hathor offers a high contrast color option as well as a bold text for those that need it.

Let's have a look at the BlueStork template settings now. This template allows you to disable the rounded corners of the administration panel, display the site name in the header, enlarge the text size and even enable the high contrast mode. Let's have a quick look.

T3 Template Framework

Template frameworks extend the basic functions of a Joomla template by adding various options and features. One of the most powerful is the T3 Framework. The framework provides CSS & JS Compression options, a powerful presets feature called Profiles to hold all layout design settings of the front-end such as: font to be used for specific elements and titles, navigation settings theme settings and layout settings. The T3 Framework provides a multiple layouts feature so you can use a special design for each of your pages. There are also Mobile Ready layouts to be used for iPhone devices and other Android or Windows Mobile devices. Every panel comes with guides, video tutorials and hints for parameters settings. Let's explore the T3 Blank template.

This is a sample website created with the T3 Blank QuickStart package so you can easily get to know all the features. The Explore menu will help you switch the layout, menu system and color theme. First, let's switch the layout design. Now let's check the menu systems. Now let's load the blue color theme. You can do the same with the cPanel when you are not using the T3 Blank sample data.

The T3 Framework is the first to introduce Mobile Ready capability. Here is the T3 Blank template on the iPhone. This is a special layout designed for iPhone devices. It's optimized for the latest standards and provides a handy user interface to browse your website. How does it work? T3 Framework can detect your mobile device and load a designated layout optimized for your handheld or iPhone device. As part of the user interface, the menu system was designed to made navigation easy for iPhone users. This interface also makes search possible for your content items. The interface provides a special Log in form for your registered users to get access to your website content.

That’s it for the overview of Joomla 1.6 Templates video by JoomlArt. I’m Robert Vining. Thanks for watching!