T3 Framework FAQs

The answers for most questions asked about T3 Frameworks

Installing Google Analytics in Joomla template developed by T3 Framework can be done in a multiple way. Here is how we can manage to get that is gonna take you maximum 5 minutes.

Here are the 2 steps how-to:

Step 1: Get your Google Analytic code

Step 2: Add the Google Analytic code to your site

From the back-end of your site, go to Extensions >> Template Manager.

Open the template style setting panel of the template, in this example, we use T3 Blank as our template. So we're gonna open the template style setting panel of JA_V3-Home

Navigate to tab Injection then add the Google Analytic Code to the field Before

Now please open tab Injection then add the Google Analytic Code to the field Before .

These settings in the Injection tab are set as the global settings. That means you can add the google anlytic code to any style without go back in each style and add it manually.

If you weren't able to find these settings in the administration panel, that means you are using the older version of T3 Framework that is anywhere lower than version 1.3.0. You can upgrade to the latest version of T3 Framework (please always back-up before proceeding to any updates, it's highly recommended) or you can install the Google Analytics code manually (by adding code to a file that can be used in all pages). For more in-depth in the manual installation, please check the Video Tutorial for more info.

When it comes to Live Chat services, it really depends on which Live Chat services you are using. Each has its own requirement on adding its scripts. But no worry, we have those common places listing out in the Injection tab, so you can just go ahead to copy & paste them accordingly.

These settings are applied to the site's global settings as well, so you can only need to add the scripts once.

Problem

If you find trouble to display com_content in homepage whatever the menu type is assigned to, this thread would be useful for you.

The explaination for this problem is, in some templates, the home layout has no Component position and you assigned the home layout for Homepage.

List of templates that doesn't have Component position in home layout.

  1. JA Hawkstore
  2. JA Fubix
  3. JA Mitius
  4. JA onepage

How to Fix ?

Each template could have one or many layouts, but all the templates always have default layout, in the default layout, the Component is always loaded.

There are 2 ways to fix this issue

1. Add position "Component" to "home" layout

Step 1: open home layout file (it should be home.php) located in templates/ja_template/tpls/blocks.

<body>
	<?php $this->loadBlock ('header') ?>		
	<?php $this->loadBlock ('slideshow') ?>		
	<?php $this->loadBlock ('spotlight-1') ?>
	<?php $this->loadBlock ('mainbody-home') ?>
	<?php $this->loadBlock ('spotlight-2') ?>
	<?php $this->loadBlock ('footer') ?>
</body>

Step 2: Open block file that you want to add Component to, we suggest to add to mainbody-home block. So open file mainbody-home.php located in templates/ja_template/tpls/blocks/.

Add the following code.

<jdoc:include type="component" />

Inside <!-- MAIN CONTENT --> ... <!-- //MAIN CONTENT -->

<!-- MAIN CONTENT -->
<div id="t3-content" class="t3-content">
	<jdoc:include type="message" />
	<jdoc:include type="component" />

	<?php if ($this->countModules('home-2')) : ?>
	<section class="featured-products">
		<jdoc:include type="modules" name="<?php $this->_p('home-2') ?>" style="T3Xhtml" />
	</section>
<?php endif ?>

</div>
<!-- //MAIN CONTENT -->

2. Change layout for Home style

Open the Home template style and choose the default layout that has Component position.

Note: by choosing a different layout, it will change the existing layout/structure of your homepage.

T3 Framework integrates Bootstrap and utilizes LESS (dynamic stylesheet language). It is required to develope your site with LESS. If you develop with CSS, when compiling, the CSS files will be overridden.

So what happen when you don't know LESS files? And all you want to do is styling with CSS? The custom.css file is here to save the date. Whatever CSS you add in this file will NOT be overridden when compiling.

Then, where can you find the custom.css file? It is located in: templates/ja_fixel/css. If you don't see it there yet, feel free to create a new one.

Where can I find my Custom.css File

Open the file and start styling your site with CSS.

Since T3 Framework was first released, there is this on-going question on "How to upgrade JA T3v2 Framework to the latest version of T3 Framework?" We have answered this many times before, and the answer still remains a big NO.

Why not ?

T3 Framework has been rebuilt completely. T3 Framework integrates Bootstrap and utilizes LESS, while JA T3v2 Framework doesnt. T3 Framework also supports ThemeMagic, Layout Configuration, and much more, but these are not supported in JA T3v2 Framework. To use T3 Framework, you have to install T3 Framework from scratch, no upgrade is possible.

1. Change the Logo image

There are 2 ways to change the logo for a Joomla template developed with T3 Framework.

#1: Change logo from the Template Manager

For JA Template, each style can go with a different logo. To set style for the logo, go to Extensions >> Template Manager, now open the JA Template style you wish to work on then navigate to Theme Settings.

#2: Change the Logo from the variable.less file

Another way to change thelogo is changing the logo image path in variables.less file, which is located in the templates/t3_blank/less fodler.

// T3 LOGO
// --------------------------------------------------
@T3logoWidth:     60px;
@T3logoHeight:    50px;

@T3LogoImage:     "../images/logo.png";

You can also change the logo block size, by changing the value of the @T3logoWidth: and @T3logoHeight: variables.

2. Logo styling

To customize style for the logo, open the file style.less that is located in the templates/t3_blank/less folder. Search for the logo text, you'll find the style where you can either add more styles or customize it as is.

// Logo
// ---------------------------------------------------------
.logo {
float: left;

a {
display: inline-block;
line-height: 1;
margin: 0;
}

}

// Logo Image
// ----------
.logo-image {
overflow: hidden;

a {
background-image: url("@{T3LogoImage}");
background-repeat: no-repeat;
width: @T3logoWidth;
height: @T3logoHeight;
}

//hide sitename and slogan
span, small {
display: none;
}

}

Step 1: Add the font package(s)

Upload your font package(s) to templates/template_folder/fonts.

Step 2: Define font(s)

Now open file assets.xml located in the templates/template_folder/etc folder.

Define the font(s) you just added

<stylesheets>
<file>fonts/novecentowide/stylesheet.css</file>
</stylesheets>

Google Fonts

T3 Framework supports Google fonts, all you have to do is define the google font you would like to use in the assets.xml file (located in the templates/template_folder/etc folder).

<stylesheets>
	<file>http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300</file>
</stylesheets>

Since Bootstrap 3 beta version was out, everyone is questioning us on whether or not T3 Framework will compatible with Bootstrap 3. Yes, we will.

We are currently busy with other projects as well as trying to keep up with our commitment for the monthly release. If there is only one thing we can't control over, it's time. Hence, we'll definitely keep you guys in the loop, whenever we can.

To add new style sheets and Javascripts to T3 Framework, there are 2 ways to do that. You can either declare the new style sheets and Javascripts to head.php file or assets.xml file.

#1. Use head.php file

Open file head.php in the templates/t3_blank/tpls/blocks folder, then declare the new style sheets and Javascripts as you wish with the format as below.

Add CSS style sheets

<?php 
// CUSTOM CSS
if(is_file(T3_TEMPLATE_PATH . '/css/custom.css')) {
$this->addStyleSheet(T3_TEMPLATE_URL.'/css/custom.css'); 
}
?>

Add Javascripts

<?php
if(is_file(T3_TEMPLATE_PATH . '/templates/your-temp-name/js/slider/lofslidernews.mt11.js')) {
$this->addScript(T3_TEMPLATE_URL.'/templates/your-temp-name/js/slider/lofslidernews.mt11.js'); 
}
?>

Just copy then correct the path to the CSS and Javascripts files.

Joomla provides addStyleSheet, addScript, addScriptDeclaration functions, which are the ones you should be using.

#2. Use assets.xml file

Another method to add new the CSS, Javascripts is embedding them to assets.xml, which is located in the templates/t3_blank/etc folder.

CSS style sheets & Fonts

Add the path to the style sheets & fonts you want to embed to your site. Use the format as below:

<stylesheets>
<file>fonts/novecentowide/stylesheet.css</file>
<file>http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300</file>
</stylesheets>

Javascripts

Add the path to the Javascripts files you want to embed to your site. Use the below format:

<scripts>
<file>js/jquery.mousewheel.js</file>
<file>js/iscroll.js</file>
<file>js/script.js</file>
</scripts>

T3 Framework is a responsive framework template, that means all the templates developed with T3 Framework are responsive at core.

So how T3 does with Third party extensions like K2, Virtuemart ... in term of responsive ?

It does not intervene the 3rd extensions, hence if the 3rd extensions are not responsive by itself, then it's a huge chance they won't be responsive when you install in any of the templates developed with T3 Framework. Now it's up to you to consider if you want them in your site or not. If you still decide to go with it, you probably have to do the customization to make it responsive, and it sure does take a lot of time and effort. Please be wise here.

1. Customize the 404 Page

Normally, each JA Template goes with its own 404 page style. If you would like to customize it, this will guide you through the quick how-to:

Step 1: Open file error.php

The file error.php is located in the templates/ja-template-folder/ folder.

Open this file and you will be able to get the CSS file that has all the style of the 404 page.

<head>
<title><?php echo $this->error->getCode(); ?> - <?php echo $this->title; ?></title>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/error.css" type="text/css" />
<?php if($theme && is_file(T3_TEMPLATE_PATH . '/css/themes/' . $theme . '/error.css')):?>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/themes/<?php echo $theme ?>/error.css" type="text/css" />
<?php endif; ?>
<link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
</head>

The CSS file is error.css located in the templates/ja-template-folder/css/ folder. Open the file and start your customization.

Please note that the file is NOT overridden when you compile LESS to CSS. As we don't have error.less file.

2. Customize Offline Page

To customize the Offline Page, you only need to go through the same procedure as you do for the 404 page customization

Each JA Template also has its own Offline page style.

Step 1: Open file offline.php

The file offline.php is located in the templates/ja-template-folder/ folder as well.

Open this file and you will find the CSS file that has all the style of the Offline page page.

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/offline.css" type="text/css" />
<?php if($theme && is_file(T3_TEMPLATE_PATH . '/css/themes/' . $theme . '/offline.css')):?>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/themes/<?php echo $theme ?>/offline.css" type="text/css" />
<?php endif; ?>
</head>

The CSS file is offline.css located in the templates/ja-template-folder/css/ folder.

Please note that the file is NOT overridden when you compile LESS to CSS. As we don't have offline.less file.

The "Back to top" button allows you to quickly navigate to the top of your site.

To add this button in your site, open the file footer.php located in the templates/ja-template-name/tpls/blocks/ folder

Now add the following code to the bottom of the footer.php file.

<!-- BACK TO TOP -->
<div id="back-to-top" class="back-to-top t3-hide">
  <i class="icon-long-arrow-up"></i>
</div>
<script type="text/javascript">
  //<![CDATA[
  (function($){
    $(document).ready(function(){
      $('#back-to-top').click(function(){
        if($(this).hasClass('reveal')){
          $('html, body').stop(true).animate({
            scrollTop: 0
          });
        }
      });

      $(window).scroll(function(){
        $('#back-to-top').toggleClass('reveal', $(window).scrollTop() > (Math.min($('#t3-mainbody').length ? $('#t3-mainbody').offset().top : 0, 150)));
      });
    });
  })(jQuery);
  //]]>
</script>
<!-- //BACK TO TOP -->

Now add style for the button, using any LESS file in the templates/ja-template-name/less/ folder .

We suggest to add style to file style.less

For example

// BACK TO TOP
// ---------------------------------------------------------
.back-to-top {
  background-color: @T3primaryColor;
  bottom: 15px;
  height: 40px;
  margin: 0;
  position: fixed;
  right: 15px;
  width: 40px;
  z-index: 1000;
  .opacity(0);
  .transition(opacity 350ms);

  &.reveal {
    .opacity(30);
    cursor: pointer;
    &:hover, &:focus, &:active {
      .opacity(100);
    }
  }

  i {
    color: @white;
    font-size: 12px;
    line-height: 1em;
    left: 50%;
    margin-top: -7px;
    margin-left: -3px; 
    position: absolute;
    top: 50%; 
  }
}

T3 Framework supports Megamenu, when you run a multilingual site, you have to configure multi-language for Megamenu. Follow this guide to make it work.

Please make sure all the steps in setting up a multilingual site are done completely. If these steps weren't not done yet, there are 2 ways to build up a multilingual site: manual setup or auto setup with JA Multilingual Component. It's up to you to go either way.

Manual Setup Guide   JA Multilingual Guide

Create menus for languages

Step 1: Create menus for languages

For each language, you will need to create a menu system based on the default language menu system. For example, your site is curently in 2 languages: English and Arabic. Then you should create menus for Arabic language based on the existing menus of theEnglish language.

In fact you don't need to translate all the menus, you just need to translate all the menus that are being used.

Step 2: Duplicate the default template style

Go to Extensions >> Template Manager then duplicate the default template style.

Step 3: Rename and assign language for the duplicated template style

Next, open the duplicated template style to rename it. Then assign to the desired language.

Step 4: Assign menu for Megamenu

Now open the Navigation tab, enable Megamenu then assign the created menu in the Menu field.

Step 5: Save mengamenu settings

Now all you have to do is SAVE the Megamenu settings, please keep in mind that this step is required even if you haven't change anything as it aims to detect your Megamenu.

Open the Megamenu setting panel and then make sure you select the right menu - Mainmenu for Arabic language.