Video Transcript:

Hi this is Peter from JoomlArt. And today, we are going to talk about the T3 version 3 Framework.

This is one video in a multi serie part of videos showing you how to use the T3 Framework effectively and easily. So there are 5 main parts included in this tutorial:

1. Global Settings
2. Theme Settings
3. Customize Layout
4. Navigation Settings
5. And Menu Assignment

Once you install successfully, it's time to explore the framework. First, go to: Extensions then Template Manager. In this tutorial, we are going to use JA Argo as our template. JA Argo - the responsive Joomla template for both 2.5 and Joomla 3.0.

So this is the information page.

We can check to see if our version of the template is up to date, and also for the version of the framework is up to date.

OK, let's go to Global Settings. So we go in the General and go to enable the Development Mode.

This should be enabled when you are developing your site. When enabled, your site can load LESS files. Now let's save.

In the front-end, we can check by right-clicking and going to Inspect element and we can see the matched CSS Rules here and all the LESS path.

The LESS files of the template is located in "template/template_name/less".

When you finish your Development, you should turn off the Development mode. In this case, your site runs on CSS files. The CSS files are compiled from LESS files and they are located in Template/JA_Argo/CSS in this example.

OK, now go Compile LESS to CSS with a simple click of the button. We will get a blue bar saying, "Successfully compile LESS to CSS".

Next, we go work on ThemeMagic. First, we enable ThemeMagic by clicking Yes under General. Now, open the Theme Magic working panel.

There is a sidebar menu to the left. You can play with the theme here: you can change the colors, work on the grids, the layout. There are so many things you can do with ThemeMagic.

We can add unlimited groups and parameters. We can work on Navigation such as background color, text color, link color. So let's change the background color here to gray. And let's change the link color hover. How about green? Now let's preview it.

Go up to the top and click Preview. As you can see, the colors have now changed without having to go back into the back-end of the site.

Now we can either Save or we can Save As to make a new theme with this. So let's call this Dark-Cloned. Okay. Now it's saving. As you can see "Dark-Cloned Theme changes successfully saved".

As T3 is a responsive framework, all templates developed within the framework will be fully responsive. Now, to enable this feature, click Enable responsive. Also the T3 Assets folder is to store the cache to help improve site performance. Feel free to name whatever you would like as you can see here, it's named T3-assets.

Here is the T3 logo in the front-page. Feel free to enable or disable easily. Click Show T3 Logo yes or no.

JA Argo has a special feature where it’s using Ajax to load articles in the Article detail page and it is an extended setting in JA Argo only.

Okay. Next, we move on to the Theme Settings.

So, select the style first before we make any changes. So in this, we will select JA Argo green color. Go back to theme. Now, let's select the one we made in ThemeMagic - the "Dark-cloned". Now T3 supports 2 logotypes: image or text. We can change the site name to whatever we want or just leave "Argo" here, and then the slogan as well. You can change the logo image, just browse to the logo you want and replace it with the current one. Okay? Don't forget to save. Okay. Now let's go to the front-page. Great. We can see our settings have taken effect. Now, the style uses the dark-cloned theme with the logo changed as we made in back-end.

Okay. Next, go to Layout. The Layout settings allow you to change the structure of the layout and configure responsive layout. First, select your layout. All your layouts will be listed; please select the one you wish to modify. Also, note that the layout you are configuring is only applied for the current style. There are 2 parts in Layout Customization: Module Positions and Responsive Layout.

For Module Positions, you are allowed to change the number of positions in each spotlight block. You can change to any position that you want. If you don't want to publish any position in the front page, just assign it to none.

As you can see, there are 5 responsive layouts that you can configure. Select the one you wish to configure. In each layout, you can enable or disable any module position. In this example, we're gonna select mobile layout, and we're gonna disable positions in the spotlight block. Ok. Scroll down. Click on the position name to enable it. We can also drag to resize the module position. So go do that with 5 and 6. Pull 6 up to the 5.

Next, we will configure the Mega Menu. So, T3 supports Mega Menu feature. It is very easy for you to configure. We can see that, we have a great Mega Menu in the front-page. We also have a separate video tutorial for configuring Mega Menu.

The last part of this tutorial is the Menu Assignment. First, select style. Let's select JA Argo - Dark Color. Go back to the Assignment tab. Scroll down. Select the menu that uses to select the style. In this case - JA Argo dark color. And don't forget to save your settings. In the front page, we go to K2 menu. We'll see the menu uses JA Argo Dark color style that gives it a different look.

So, this's is the end of our tutorial today. We hope you enjoyed watching, and hope to see you soon. There are more videos available at http://www.youtube.com/joomlart. Feel free to choose new videos any time.