Joomla Templates Club 406,261 posts

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

#174850

One of the most frequent questions/issues we see from Members relates to creating – or even relocating — new module positions within their template structure. Adding a new module position inside a J1.7.x / J2.5.x template is actually a fairly simple process – with the most challenging step being figuring out where you want to put the new module position.

The following is a GENERAL tutorial for creating a new module position within a J1.7.x/J2.5.x template.

STEP ONE – Where Do You Want Your New Position?
Naturally, the FIRST STEP in the process is to figure out and decide where you want to position your new module. For this, it is helpful to see a map/schematic of how the current modules are layed out/positioned within the template.

Fortunately, JoomlArt provides Module Position Guides for each of our JATC Templates. You can most quickly find each Template’s Module Position Guide by going to the respective template’s information page and clicking on the “Position Guide” button for the particular template version you want to view.

However, there are times when one wants to view a particular template’s module positions, and a convenient template module map is not readily provided. So, this little trick is handy so that you don’t have to play the guessing game. So, for example if you wanted to find out what are the module positions for your template, here is how to do it:

1. Login to your Joomla Administrator backend.
2. Open your Template Manager and, on the right hand side, click “Options‘”
3. Under the Template Tab >> Global configurations for Templates >> set ‘Preview Module Postions’ to “Enabled”
4. SAVE the changes you’ve just made.
5. Within your browser address bar, you can now append your site url with “?tp=” – for example http://www.yourdomain.com/?tp=1.

After you press <enter>, you should see the template module positions. To turn off the template module positions you can follow through the same path and under the Template Manager >> Options >> Template Tab >> Global Configurations for Templates and set ‘Preview Module Postions’ to “Disabled”.

TIP:
For Joomla 1.5 based templates, you can see template module positions easily by just typing ?tp=1 following the URL path. For example – http://www.domainname.com/?tp=1 will enable you to see all the template module positions of your active template.

STEP TWO – Which Layout Block for New Position?
Once you have decided where you want to position your new module, you then need to figure out within which layout block file to add the necessary php code for your new position.

————————————————————————-
NOTE: Blocks are files to hold module positions, perform specific script calls and prepare the HTML generation of the content. As you know, the most popular elements: header, footer, left, right, spotlights, pathway, etc. these are now separate files, no longer HTML elements defined in the index.php file.

To learn about how layout blocks are structured within our JAT3 Framework, please see our JAT3 WIKI – BLOCKS of the DEFAULT LAYOUT –> http://wiki.joomlart.com/wiki/JA_Template_Framework/FAQs#Blocks_of_the_default_layout
————————————————————————-

For the purpose of this tutorial, I am going to add a new module position within the HEADER section of our JA TELINE IV (J2.5) Template – between the logo and the right banner . . . though the basic principles and steps can apply to creating a new module position most anywhere within the template blocks structure.

Okay, so since we’ve decided that we want to position our new module within our template’s HEADER section, we need to locate and open the appropriate layout file for this section. For our example, we will need to work with the header.php file, which is located within the following file path:

templatesja_teline_ivblocksheader.php

In its base/core form, the Teline IV header.php file looks like this:

[PHP]<?php
/*
* ————————————————————————
* JA Teline IV Template for Joomla 2.5
* ————————————————————————
* Copyright (C) 2004-2011 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
* @license – Copyrighted Commercial Software
* Author: J.O.O.M Solutions Co., Ltd
* This file may not be redistributed in whole or significant part.
* ————————————————————————
*/
// no direct access
defined ( ‘_JEXEC’ ) or die ( ‘Restricted access’ );

?>
<?php
$app = & JFactory::getApplication();
$siteName = $app->getCfg(‘sitename’);
if ($this->getParam(‘logoType’, ‘image’)==’image’): ?>
<h1 class=”logo”>
<a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($this->getParam(‘logoText’))==”) ? $siteName : JText::_(trim($this->getParam(‘logoText’)));
$sloganText = JText::_(trim($this->getParam(‘sloganText’))); ?>
<div class=”logo-text”>
<h1><a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $logoText; ?></span></a></h1>
<p class=”site-slogan”><span><?php echo $sloganText;?></span></p>
</div>

<?php endif; ?>

<div class=”ja-header-r”>
<jdoc:include type=”modules” name=”header-r” />
</div> [/PHP]

As I mentioned above, I want to place my new module position between the logo and the right banner image. As you can see from above, there is already a position called “header-r” within the header.php file structure. So, since I will want my new module position in the middle, I will call the new position “header-m”

The modified header.php file will now look like this . . .

[PHP]
<?php
/*
* ————————————————————————
* JA Teline IV Template for Joomla 2.5
* ————————————————————————
* Copyright (C) 2004-2011 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
* @license – Copyrighted Commercial Software
* Author: J.O.O.M Solutions Co., Ltd
* This file may not be redistributed in whole or significant part.
* ————————————————————————
*/
// no direct access
defined ( ‘_JEXEC’ ) or die ( ‘Restricted access’ );

?>

<?php
$app = & JFactory::getApplication();
$siteName = $app->getCfg(‘sitename’);
if ($this->getParam(‘logoType’, ‘image’)==’image’): ?>
<h1 class=”logo”>
<a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($this->getParam(‘logoText’))==”) ? $siteName : JText::_(trim($this->getParam(‘logoText’)));
$sloganText = JText::_(trim($this->getParam(‘sloganText’))); ?>
<div class=”logo-text”>
<h1><a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $logoText; ?></span></a></h1>
<p class=”site-slogan”><span><?php echo $sloganText;?></span></p>
</div>

<?php endif; ?>
<div class=”ja-header-m”>
<jdoc:include type=”modules” name=”header-m” />
</div>

<div class=”ja-header-r”>
<jdoc:include type=”modules” name=”header-r” />
</div>
[/PHP]

Basically, all I did was copy-and-paste the code for the “header-r” position, and then modified it as needed – pretty simple, right? This same concept can apply to adding/duplicating other module positions within other parts of your site – but you do need to make sure you are modifying the new position code sufficiently so all relative elements reflect the new position you are creating.

STEP FOUR – Adding New Position to templateDetails.xml
We now need to add our new position to our TemplateDetails.xml file, which can usually be found along the following path:

templatesja_purity_iitemplateDetails.xml

About halfway down the file (at about line 58), you will see the template position listing:

<blockquote>
<positions>
<position>hornav</position>
<position>breadcrumbs</position>
<position>search</position>
<position>banner</position>
<position>left</position>
<position>right</position>
<position>right1</position>
<position>right2</position>
<position>top</position>
<position>headlines</position>
<position>header-r</position>
<position>mega</position>
<position>mega-adv1</position>
<position>mega-item</position>
<position>mega1</position>
<position>mega2</position>
<position>mega5</position>
<position>mega6</position>
<position>mega3</position>
<position>mega4</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>user6</position>
<position>user7</position>
<position>user8</position>
<position>user9</position>
<position>user10</position>
<position>user11</position>
<position>user12</position>
<position>content-mass-bot</position>
<position>col-mass-bot</position>
<position>col-mass-top</position>
<position>col-mass1</position>
<position>col-mass1</position>
<position>ja-news-1</position>
<position>ja-news-2</position>
<position>ja-news-3</position>
<position>ja-news-mobile</position>
<position>sl1-l</position>
<position>sl1-r</position>
<position>ja-tabs1</position>
<position>ja-tabs2</position>
<position>menulist</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
</positions>
</blockquote>

Add our new position to the list:

<blockquote>
<positions>
<position>hornav</position>
<position>breadcrumbs</position>
<position>search</position>
<position>banner</position>
<position>left</position>
<position>right</position>
<position>right1</position>
<position>right2</position>
<position>top</position>
<position>headlines</position>
<position>header-m</position>
<position>header-r</position>
<position>mega</position>
<position>mega-adv1</position>
<position>mega-item</position>
<position>mega1</position>
<position>mega2</position>
<position>mega5</position>
<position>mega6</position>
<position>mega3</position>
<position>mega4</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>user6</position>
<position>user7</position>
<position>user8</position>
<position>user9</position>
<position>user10</position>
<position>user11</position>
<position>user12</position>
<position>content-mass-bot</position>
<position>col-mass-bot</position>
<position>col-mass-top</position>
<position>col-mass1</position>
<position>col-mass1</position>
<position>ja-news-1</position>
<position>ja-news-2</position>
<position>ja-news-3</position>
<position>ja-news-mobile</position>
<position>sl1-l</position>
<position>sl1-r</position>
<position>ja-tabs1</position>
<position>ja-tabs2</position>
<position>menulist</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
</positions></blockquote>

STEP FIVE – Creating CSS Styling for our New Position
Okay, we have created our new position and have entered it within our position listing (so that we can select it from the list of positions within our Module Manager). But we still have not established certain display parameters for our new position – i.e. height, width, margins/padding, background color, relative positioning within the header block, etc. For this, we need to create some basic CSS styling properties for our new position.

————————————————————————-
NOTE: LEARNING CSS
Now, I am not going to try to teach a lesson on CSS styling – this is something you will need to take some time to research and learn individually. However, there are a great many learning resources available throughout the internet – many of which are 100% FREE. While I will leave it to you to conduct a more thorough search, here are a few initial resources with regard to CSS basics:

http://www.free-css.com/free-css-tutorials/basic-css-tutorials.php

http://webdesign.about.com/od/xhtml/u/htmlcssxml.htm#s5

http://www.cssbasics.com/download-all-chapters/

http://www.w3schools.com/css/css_intro.asp

These resources should at least get you started.
————————————————————————-

We will be placing our CSS rule(s) within our template.css file à templatesja_teline_ivcsstemplate.css

TIP:
It really doesn’t matter where you enter your CSS – many simply add it at the end of the sheet. I tend to like to place any new CSS rules/classes I create within same general line area as other CSS for the particular section of the template – in this case, where the CSS for the “header-r” is (at/around line 748).

Our new position is going to be relatively simple, but we’re going to want to position it between the logo and the right side banner image.

<blockquote>
/* Header Middle —*/
.ja-header-m {
padding: 0;
border: 1px solid #ccc;
position: absolute;
right: 470px;
top: 40px;
width: 265px;
z-index: 999;
}
</blockquote>

Obviously, depending on how you are going to want to style and position your module, your CSS properties and parameters are going to be different. More likely than not, the process of getting it just as you want it will take a bit of time, trial-and-error and patience. In fact, for our example, I had to play around with the “right” positioning value several times until I was able to position the module exactly where I wanted it.

It’s all part of the process . . . and the more you experiment with various properties, the more you learn about how CSS affects website element display.

STEP SIX – Assign Module to the New Position
We’ve created our new position within the appropriate layout block . . . we’ve added the position to the position list within our templateDetails.xml . . . we’ve created the CSS to position and style our module . . . we’re now ready to assign our module to our new position (and see if our work has paid off).

As stated above, I am going to assign a custom_html module with a JoomlArt banner image to the new position. While creating a new module within the Module Manager is a basic Joomla function, I will quickly outline the steps for you . . .

1. Open your site administration backend >> open your Module Manager
2. Click the “New” icon
3. Select “Custom_HTML” from the list of module type choices
4. Name your new module
5. Click “Select Position” and scroll down until you find the new position (in our case, “header-m”)
6. Configure your module parameters as needed

In our example, I used one of JoomlArt’s Affiliate Program banners for the new module . . .
And here is the result . . . .

So, as you can see, creating a new module position within your site template is not as diificult or intimidating a process as you might have otherwise thought.

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.

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.

Always remember THE THREE Ps – PATIENCE, PRACTICE and PERSEVERANCE.

Hope this tutorial has been helpful to you . . . . All the best with your continuing site development.

😎

---

Attachments:

1. 
2. 

18 users say Thank You to TomC for this useful post

1. pofagyalu
2. dextormark
3. vsjuk
4. Rusell Cerrato
5. freissmann
6. zawwint
7. shafee_howard
8. creativesmythe
9. madmin22
10. nods
11. vipcory
12. smitheringale2
13. markkusq3po
14. phicts
15. mvitalm
16. Hans Zuidinga
17. webjwn
18. davisj

[dextormark Friend dextormarkJoin date: March 2012Posts: 9Downloads:0Uploads:0 Thanks: 2]

#442956

Dear Tom,
Thanks I am very happy to see the Instructions which will carry forward and enhance the user experience Not able to understand why Most of the Joomla Moderators do not explain in the same way the situations….

Now I am also Digging Joomla 2.5.x versions will contribute the forum as …

We get More Knowledge when we share it …some new facts we get….

Thanks ….once again..

Incase of any Issue I will let you know …

[dextormark Friend dextormarkJoin date: March 2012Posts: 9Downloads:0Uploads:0 Thanks: 2]

#442977

Dear Tom,
Please help me at this time I am very frustrated with the position if you would show me practically on my system it would help me a lot , I am pleased to ask you valued time …
I can provide you with the remote access of the system ..

Please this the only hurdel for me know ..

[freissmann Developer freissmannJoin date: February 2011Posts: 294Downloads:0Uploads:71 Thanks: 79 Thanked: 29 times in 1 posts]

#442981

Tom, great post!
Thanks

[Rusell Cerrato Friend Rusell CerratoJoin date: September 2014Posts: 220Downloads:0Uploads:41 Thanks: 120 Thanked: 8 times in 1 posts]

#442995

This is a great totorial, in fact I am working with teline iv, trying to create a new position to add a new megamenu look and feel on a different position. Im pretty sure this will work.

Thanks Tom for this excellent tutorial.

[ivsakopr Friend ivsakoprJoin date: February 2011Posts: 2Downloads:0Uploads:0]

#443021

Tom, excellent tutorial!
Thanks.

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

#443025

<em>@dextormark 306629 wrote:</em><blockquote>Dear Tom,
Please help me at this time I am very frustrated with the position if you would show me practically on my system it would help me a lot , I am pleased to ask you valued time …
I can provide you with the remote access of the system ..

Please this the only hurdel for me know ..</blockquote>
I will respond further to your previous post concerning your specific issue.

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

#443026

<em>@rcerrato 306656 wrote:</em><blockquote>This is a great totorial, in fact I am working with teline iv, trying to create a new position to add a new megamenu look and feel on a different position. Im pretty sure this will work.

Thanks Tom for this excellent tutorial.</blockquote>
Adding an additional mega-menu will take some additional steps – but it can absolutely be accomplished.

3 users say Thank You to TomC for this useful post

1. brookesy_au
2. creativesmythe
3. webjwn

[btreynolds1 Friend btreynolds1Join date: May 2011Posts: 51Downloads:0Uploads:2 Thanks: 2 Thanked: 2 times in 1 posts]

#443066

Great post! Thanks for the tutorial.

[brookesy_au Friend brookesy_auJoin date: January 2012Posts: 17Downloads:86Uploads:0 Thanks: 6 Thanked: 3 times in 1 posts]

#443554

Many thanks, Tom.
Excellent post and very much appreciated.

Linux & Open Source: FREEDOM!

1 user says Thank You to brookesy_au for this useful post

1. malibu63

[dextormark Friend dextormarkJoin date: March 2012Posts: 9Downloads:0Uploads:0 Thanks: 2]

#445810

Dear Tom,
hi please let me know can you help me in the position issue as I am still struct with the problem..

Warm regards,

[qbali JATC qbaliJoin date: October 2006Posts: 177Downloads:13Uploads:23 Thanks: 13 Thanked: 2 times in 1 posts]

#446104

Hi Toms, thanks for this greatest post,

in this case we are taught on how to add new module position into the header, then the header.php that we should dealing with,

so how if the case is to add new module position in the main content module position, as my case is using ja travel, then the module position that i want to add a new module position IS the CONTENT-MASS-TOP module position,
then what file should i edit to add the code for new module position, in my case i just find 5 file there in the folder template/ja travel/blocks/ that is = header.php, fixheight.php, mainnav.php, footer.php, index.html, so what file should i edit, ? there is no main.;php there, whereas the Content-Mass-Top module position must be dealing with this main.php

thanks for any help, regards

[creativesmythe Friend creativesmytheJoin date: January 2012Posts: 153Downloads:0Uploads:17 Thanks: 86 Thanked: 6 times in 1 posts]

#446660

Lots of great information here.

1 user says Thank You to creativesmythe for this useful post

1. TomC

[dextormark Friend dextormarkJoin date: March 2012Posts: 9Downloads:0Uploads:0 Thanks: 2]

#446749

Dear Tom,
As per my studies I conclude the STEPS:
1. search for template positions and Blocks
2. Copy the block file from JA T3 Core to local template block file and edit for the position we need
3. Add a position in template.xml available in local template folder
4.Add some CSS Tweak
—————-

Please Let me know your remark
Need help?

[tom_laan84 Friend tom_laan84Join date: June 2008Posts: 348Downloads:142Uploads:30 Thanks: 88 Thanked: 67 times in 11 posts]

#447116

Hi Tom,

Great post and helped me out 85% of the way. I want to place social media buttons “outside” the main website. to the left of the screen. But i can’t seem to find the right file to put my module position in. when i add it in header.php it goes “inside” the website. Can you or someone else point me in the right direction regarding what file to place the “jdoc include” info “STEP TWO”.

Thanks a lot!

Tom

!!!!!!!!!UPDATE!!!!!!!!!!

Hmm seem to have found this! I added the code in the following:

“plugins/system/jat3/base-themes/default/page/default.php” just after the wrapper line.

Is this the correct way of doing this?

[Author]

Posts