Public Forums 71,145 posts

[silwolffe Friend silwolffeJoin date: April 2013Posts: 4Downloads:0Uploads:0 Thanks: 5]

#186422

Hey guys,

I am having a bit of trouble modifying the jat3 framework with a client’s theme. Basically, I have a piece of code I need to inject in the theader – and even trying to find the right area to place a module or even add the html manually is proving to be a bit of a challenge.

Basically, I want to add an html button (http://offsiteschedule.zocdoc.com/images/remote/book-green.png) between the logo and the number on this site – http://metabolixwellness.com/

To basically look like this: http://metabolixwellness.com/mock.jpg

I’ve gone through and tried to edit multiple php and template files, to see if anything would change, and have been hitting dead ends here and there… not sure how to go about this.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#488863

Hi silwolffe,

You can add a custom HTML module which contains HTML button codes at your desired position. :p
http://wiki.joomlart.com/wiki/JA_Template_Framework/FAQs#Creating_new_module_positions

Regards,
—
Leo

1 user says Thank You to phong nam for this useful post

1. silwolffe

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

#488864

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.

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.

Hope this tutorial has been helpful to you.

😎

3 users say Thank You to TomC for this useful post

1. phong nam
2. Arvind Chauhan
3. silwolffe

[silwolffe Friend silwolffeJoin date: April 2013Posts: 4Downloads:0Uploads:0 Thanks: 5]

#489705

Thank you for your advice Leo and Tom. I’ve followed the list submitted by Tom, and unfortunately I’m still encountering some issues that I can’t seem to figure out.

I’ve included the following HTML in the header block,
<div class="ja-header-m">
<jdoc:include type="modules" name="header-m" />
</div>
and while it appears, I can’t seem to delete it or change it. If I change the div class, it won’t read it and it will remain the same – likewise if I add something like a <p> tag it won’t appear int he HTML at all… So I’m not sure exactly what is going on with that. It’s like I’m not editing the correct file, but there doesn’t appear to be any other file that I can find that has that functionality.

I’ve also included the module position in the xml file,
<position>header-m</position>
and it doesn’t appear as a module position in the backend of Joomla.

The site is running on Joomla 1.6, I’m not sure if there is a different process or if I am missing a bit of Code or what.

Do you have any suggestions as to what the problem may be? Thanks for your help.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#489842

Hi silwolffe,

In general, there are some JA T3v2 templates which also have 2 header.php file (one in templates/ & one in jat3/base-themes/blocks/header.php).

>> In these cases, you need to add

<div class="ja-header-m">
<jdoc:include type="modules" name="header-m" />
</div>

into <blockquote>templates/ja_template/blocks/header.php.</blockquote>

>> But if you can’t find header.php in templates/ja_template/blocks path, you need to apply changes in <blockquote>pluginssystemjat3jat3base-themesdefaultblocksheader.php</blockquote> .i.e JA T3 blank

Regards,
—
Leo

1 user says Thank You to phong nam for this useful post

1. silwolffe

[silwolffe Friend silwolffeJoin date: April 2013Posts: 4Downloads:0Uploads:0 Thanks: 5]

#489944

Hi Leo,

I tried your suggestion and found the header.php file in both directories, and the code made sense in both of them. I’m still facing the same issue, however, and it’s simply not updating. I tried inserting both the jdoc:include and simple HTML; both didn’t work and wouldn’t render on the front-end.

I’m not sure, is there something that will prevent custom HTML from being inserted in the JAT3 framework? I am not really experienced in using it.

Thanks for all your help. 🙂

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#489950

Hi silwolffe,

If you still want to work with <jdoc:include /> , would you mind sending me a PM with your ftp account for checking your issue ?

Regards,
—
Leo

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#490100

Hi silwolffe,

I did check your ftp sever, could see that the codes for defining new module were put in <blockquote>/templates/xxx/blocks/header.php</blockquote> With your_domain.com/?tp=1, you can see the ja-hearder-m position appears. Now, you also need to add css styles for “ja-header-m” class in <blockquote>/templates/xxx/css/template.css. </blockquote>, rather than a normal <div> tab.
Then, create new module in Module Manager >> Assign to ja-header-m position.

Another question in your inbox: “There’s also another script, but I don’t have it on file right now.”
I don’t know where you got those script codes, because You did modify our template folder so dramatically that I couldn’t know which template you are using (Template folder name, copyright, templateDetails.xml …). So, I can’t help to figure out it. Sorry !

* Don’t forget to inform me your result.

Regards,
—
Leo

1 user says Thank You to phong nam for this useful post

1. silwolffe

[silwolffe Friend silwolffeJoin date: April 2013Posts: 4Downloads:0Uploads:0 Thanks: 5]

#490346

Wow,

Okay – so everything was working just fine – there was a DNS caching issue it seems, and now I’m able to edit things normally… How stupid!

Thank you for all your help, it is much apprecaited.

[Author]

Posts