Public Forums 71,145 posts

[rambro Friend rambroJoin date: July 2013Posts: 3Downloads:0Uploads:1]

#189091

Hi all,

I am working with the T3V3-framwork and plugin. I want to create a banner position on this template. I was looking at the module map for t3v3 and I did not see a banner position. Any way to get this position on the template. I would like to locate it above the mainnav menu and below the the logo and search positions.

Also do you have a downloadable module map for this template?

I was looking a thread of via the Internet, but it involved 5 or 6 steps, is their an easier way? In the protostar template I just had to add a banner position in the templateDetails.xml file and it showed up in the module map and then I created a banner custom html module and assigned it to that banner position.

Any help in this matter will be appreciated..

rambro

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

#499686

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

* Remember to backup your files before applying changes.

[rambro Friend rambroJoin date: July 2013Posts: 3Downloads:0Uploads:1]

#500061

Hi,

I went through the instructions and I believe I got it to work, however the banner is shifted to the left too far, I would like it to line up to the Home button on the “mainnav” bar and the “side bar”. How can I shift the banner over to the right so it lines up correctly. I added a file attachment to show you the situation. Thanks again

rambro

---

Attachments:

1. 

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

#500107

Hi Rambo,

You can follow below tutorial to find out which css class you need to apply change: http://www.joomlart.com/forums/topic/using-firebug-to-customize-your-site/ . Then try to put these css properties:

margin-left: -50px;


Chang the value until you get perfect.

Note: Pls put your website’s url here if you can’t apply css styles. Make sure you set No to Development Mode & No to Optimize Css in Template Manager.

[rambro Friend rambroJoin date: July 2013Posts: 3Downloads:0Uploads:1]

#500140

Hi Leo,

I clicked on the link, but unfortunately, I don’t have access privileges to the page with the tutorial. Blah. 🙁

rambro

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

#500141

Hi Rambro,

The below Joomla document has the same content: http://docs.joomla.org/Using_Firebug_With_Your_Joomla_Website
I hope it will be helpful for your next css customization task.

[Author]

Posts