Public Forums 71,145 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#201160

Original (Updated) Tutorial ~ by Leo Burnetts

Original Tutorial: How to create a new module position ~ by Tom C.

<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=1

Step 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:

<blockquote>IT IS IMPORTANT TO UNDERSTAND, however, that the above steps are THE MOST BASIC WAY to create a new module position within a given template. This exact process may vary slightly depending on the kind of module position you are creating and/or the layout block in which you want to create the position. </blockquote> ~ Tom C.

<blockquote>As with most any new process one wants to learn, it’s going to involve elements of time, trial-and-error/experimentation and patience . . . so PLEASE DO NOT GET TOO FRUSTRATED OR GIVE UP if your fist try (or even first few tries) do not result in perfection right off the bat. Rest assured that most anything you can envision can be accomplished if you allow it the time and attention it takes to do so.</blockquote> ~ Tom C.

* @TomC : Thank you for your great post & your contribution.
@All: Hope my small tips have been helpful for you. Any comments of you are really appreciated !

2 users say Thank You to TomC for this useful post

1. joaotapuia
2. lndesigns

[Anonymous Friend wadewilsonJoin date: December 2017Posts: 3Downloads:0Uploads:0]

#1083391

good article, thanks for the information

[Author]

Posts