-
Hi Morten,
I think the tutorial is easy to follow, even for the non coder. However, as I told that it required paid registered account to have access to this guide.
I wonder how you could download our JA Bookshop template with your current expired membership. Anyway, as you joined us in the past, I still include below the tutorial above so you can give it a try.
It will be better if you renew the current membership to get further assistance and especially to have permission to use our commerce templates.
Below are the details of the tutorial:
——————————————————————–<blockquote>This basic tutorial will focus on how to create a new module position on our recent templates (T3 blank, JA Mero, JA Brisk, JA Mitius, JA Onepage…) running our new T3 framework (T3v3). </blockquote>
For an example of this tutorial, I am going to add a new position called “banner” for a Joomlart banner (Custom HTML module) within the Header section (block) of T3 blank template between our default T3 logo and the search module. (**)
Step one: Decide where you want to create new position?
Tom had explained in details how you can preview the current positions within the template, so that i just want to summarize his few key steps below:
1. Login to your Joomla administrator backend.
2. Open the Template Manager, and then click on the “Options” on the top right.
3. Under Templates tab, set “enabled” to Preview Module Positions option of Global Configuration for Templates. Then save.
4. Append your website url with “?tp=1” within the browser address bar. i.e: http://www.yourdomain.com/?tp=1Step two: Which layout block for new position.
After deciding where you want to lay the new position, you need to find out within which block files to add the necessary php codes for calling a new position.—————————————————————————————
Notes: Blocks are the php files to hold the module positions, perform specific script calls and prepare the HTML generation of the content. As we know, the most popular blocks: head, header, main-body, spotlight, footer … etc which are generally located in templates/ja_template/tpls/blocks path on your server.To learn about how template layout blocks are structured within our new T3 framework, please see our T3 official document – Layout system. (http://t3-framework.org/documentation/layout-system.html#about-layout)
—————————————————————————————Step three: Adding php codes for calling new module position
As I stated that we will create new position for a banner (Custom HTML module) at (**). In this case, we will need to work with header.php file which is located within the file path: templatest3_blanktplsblocksheader.php. Then the modified header.php file should be:
<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/defined('_JEXEC') or die;
$sitename = $this->params->get('sitename') ? $this->params->get('sitename') : JFactory::getConfig()->get('sitename');
$slogan = $this->params->get('slogan');
$logotype = $this->params->get('logotype', 'text');
$logoimage = $logotype == 'image' ? $this->params->get('logoimage', '') : '';
if ($logoimage) {
$logoimage = ' style="background-image:url('.JURI::base(true).'/'.$logoimage.');"';
}
?><!-- HEADER -->
<header id="t3-header" class="container t3-header">
<div class="row"><!-- LOGO -->
<div class="span3 logo">
<div class="logo-<?php echo $logotype ?>">
<h1>
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</h1>
</div>
</div>
<!-- //LOGO --><!-- Banner -->
<?php if ($this->countModules('banner')) : ?>
<div class="span6 <?php $this->_c('banner')?>">
<jdoc:include type="modules" name="<?php $this->_p('banner') ?>" style="bannerraw" />
</div>
<?php endif ?>
<!--//Banner --><?php if ($this->countModules('head-search')) : ?>
<!-- HEAD SEARCH -->
<div class="span3 head-search<?php $this->_c('head-search')?>">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
<!-- //HEAD SEARCH -->
<?php endif ?></div>
</header>
<!-- //HEADER -->
——————————————————————-
Notes: On T3 templates, We use the Bootstrap grid system to organize the width of defined positions in a block. You can assign the span (1-12) directly in php codes or customize these in templatest3_blanketclayoutyour_selected_layout.The green texts are my selected span witdh for module positions (3+6+3 = 12 columns).
——————————————————————–Step four: Styling your css styles for new position.
In this step, we need to create basic CSS properties for new position which make it look fitted with other positions. Especially, our new T3 framework is integrated with Twitter bootstrap which contains the powerful LESS technology. Each loading time, the LESS files will be automatically compiled to CSS files when the Development Mode is turned on in Template Manager. Then the template will load the compiled css files to display layout styles of website. By that reason, It will be quietly risky if you put your modified css styles of new position (i.e banner) into relevant compiled css files, they will be easily overwritten by compiling less files. So that, I suggest two methods which can make your modified css styles of new position “alive”:Method 1 . Using our defined custom.css file (Not familiar with Less files)
The custom.css file is located in templatest3_blankcss path. Lets open this files & put your modified css styles into (i.e css styles of banner):/*Banner css styles*/
.banner {
padding: 0;
background:#fff
}.banner img {
max-height: 70px;
width: 100%;
}.banner img:hover {
-webkit-transform: scale(1.15) rotate(0.00deg); /*Tiny hover css effect */
}Method 2. Adding the variables of new position in less file.
Firstly, we need to define the banner css variables in templatest3_blanklessvariables.less by adding below lines (i.e):
// Banner styles
//--------------
@BannerBackground: #fff
@BannerImageHeight: 70px;
@BannerPadding: 0;
Then open templates/t3_blank/less/style.less and add css styles with defined css variables (i.e):
// Banner
//----------------
.banner {
padding: @BannerPadding;
background: @BannerBackground;
}.banner img {
max-height: @BannerImageHeight;
width: 100%;
}.banner img:hover {
-webkit-transform: scale(1.15) rotate(0.00deg); //Tiny hover css effect
}Lastly, we need to go Template Manager >> Click Compile Lss to Css button on the top bar. That is all we need to do in this step.
——————————————————————
Notes: I will try to create a small tip of how to use Firebug to find out the responding .less files in coming time.
Not css, but I want to remind that our T3 framework supports multiple layouts system which allows you simply to control the layout positions. Pls see our official document at: http://t3-framework.org/documentation/layout-system.html#layout-configuration
—————————————————————–Step four: Adding new position to templateDetails.xml
Now, we need to add new position to templateDetails.xml file which can be found in templates/ja_template/ path. After adding, you can see & select the new position in position selection list of module backend.
The new codes should be:
<positions>
<position>head-search</position>
<position>banner</position>
<position>mainnav</position>
<position>navhelper</position>
<position>breadcrumbs</position>
<position>sidebar-1</position>
<position>sidebar-2</position>
<position>mast-col</position>
<position>footer</position>
<position>home-0</position>
<position>home-1</position>
<position>home-2</position>
<position>home-3</position>
<position>home-4</position>
<position>home-5</position>
<position>position-0</position>
<position>position-1</position>
<position>position-2</position>
<position>position-3</position>
<position>position-4</position>
<position>position-5</position>
<position>position-6</position>
<position>position-7</position>
<position>position-8</position>
<position>position-9</position>
<position>position-10</position>
<position>position-11</position>
<position>position-12</position>
<position>position-13</position>
<position>position-14</position>
<position>position-15</position>
<position>footer-0</position>
<position>footer-1</position>
<position>footer-2</position>
<position>footer-3</position>
<position>footer-4</position>
<position>footer-5</position>
<position>footer-6</position>
<position>footer-7</position>
<position>footer-8</position>
<position>footer-9</position>
<position>footer-10</position>
<position>debug</position>
</positions>——————————————
Notes: You can put the red lines at any places you want within <positions></positions> block.
—————————————–Step 5: Assigning module to new position
As mentioned above, I am going to assign a Custom HTML module with a banner image to new position. While creating a new module in Module Manager is quietly a basic Joomla function, I also just remind the key steps:
1. Go to Joomla Administration backend >> Extensions >> Module Manager.
2. Click “New” icon
3. Select “Custom_HTML” in the list of module types
4. Name your module
5. Click “Select position” and scroll down to find new position (in this case, “banner”)
6. Configure your module parameters as needed.The result:
This topic contains 6 replies, has 2 voices, and was last updated by 
We moved to new unified forum. Please post all new support queries in our New Forum