Joomla! - how to create a new template position

Joomla! - how to create a new template position 

Creationg a new template position in a Joomla! Template is something which many people will need to do sometime or other. The apecific requirement of a website will probably require to create a new position or alter any exiating ones.

 This isn't something very complicated as long as you perform the right steps as defined below.

How to create a new module position

1) 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.



Template creators typically create Module Position Guides for each templates thus yu 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.

2) 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.

For the purpose of this tutorial, I am going to add a new module position within the HEADER section of a 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.  We will be using Joomlarts Telive IV  template as an example


module1

 

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:

\templates\ja_teline_iv\blocks\header.php

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

PHP Code:

<?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> 


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 . . . 

 * ------------------------------------------------------------------------
 * 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" />

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.

4) 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:

\templates\ja_purity_ii\templateDetails.xml

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

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


Add our new position to the list:

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

5) 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-tut...-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 à \templates\ja_teline_iv\css\template.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. 

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

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.

6) 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 . . . .

module7

 

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.

One more thing...

Do you have friends or a Facebook group who you think would find this useful? Share this with them and then let me know what they think.

Want to supercharge your website?

 
Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion VPS servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for DART Creations friends + FREE domain! Check it out NOW!
 

Translate

who are we?

DART Creations is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists

David attard

Follow us on Social

         

 

 

 

Popular Content

Joomla extensions to take your website to the NEXT level

Is your Joomla website reaching its full potential? We install many of these extensions on almost ALL of our Joomla sites - why don't you check them out our list of Joomla Extensions and see whether you can take your site to the next level?

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

 

InMotion Hosting Review - Recommended Web Hosting servers for business, Joomla, WordPress and ecommerce websites.

InMotion Hosting Review

Advertise on DART-Creations.com

DART Creations is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

The Outstanding HunGRYJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get this bundle for just $29 - This month ONLY!

The Hungry JPEG Awesome font bundles

New! DIVI 3.0 WordPress TeMPLATE + PageBuilder - 10% OFF Limited Launch offer

You'll surely create a perfect website with Divi 3.0!

Divi 3