Adding additional positions in your Zoo template can help you organize and place additional elements in your content. This is a simple process that I will describe and let you download the end result.
KZ
CUSTOM
ELEMENTS

Example Facebook Blog Application

How to Create Additional Positions in Your Zoo Template

Example Facebook Blog Application
Installs As
Extension Specific AddonFacebook Blog
Filename
app_fbblog
Version
1.0.0
J Compatibility
Joomla! 1.5 Native
Z Compatibility
Zoo 2.3.7 Compatible
License
GNU/GPLGPLv2 or later
Type
Non-Commercial
Date Created
August 30, 2010
Last Update
August 30, 2010

This tutorial shows you how to create new positions in your template and compliments Facebook Comments and Like. You can also download the end result of this tutorial.

Not Currently Available for Download      Not Compatible with Zoo 2.4.x

Details

Details about this Tutorial

Adding additional positions in your Zoo template can help you organize and place additional elements in your content. This is a simple process that I will describe and let you download the end result.

Since your needs will not likely be filled by this example, I am hoping that it will nevertheless give you the basic idea of how to customize your own template as you require.

Installing the Example Facebook Blog custom Application

You may also download the result of this tutorial as a Zoo App that can be installed using the Zoo App Installer at:
Components > Zoo > App Manager(gear) > Install a new App

Not Currently Available for Download      Not Compatible with Zoo 2.4.x

Step 1

Step 1. Create New Positions

  • Open your positions.xml file for the template you want to modify located in:
    /media/zoo/applications/(your app)/templates/(your template)/renderer/item
  • Add four additional positions to the bottom of the layout="full" category of your positions.xml file. ****See Example Below****
  <?xml version="1.0" encoding="utf-8"?>
  
    
      Top
      Title
      Subtitle
      Meta
      Media
      Content
      Taxonomy
      Bottom
      Related
      Author
      FB Like Top
      FB Like Bottom
      FB Comments
      FB Script
    
    
      Title
      Subtitle
      Meta
      Media
      Content
      Links
    
    
      Description

Step 2

Step 2. Add New Positions to Template

  • Open your full.php file for the template you want to modify located in:
    /media/zoo/applications/(your app)/templates/(your template)/renderer/item
  • Add the four additional positions to the template in the location you want them to display. ****See Example Below****
<?php
/**
* @package   ZOO Component
* @file      full.php
* @version   2.0.3 July 2010
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) 2007 - 2010 YOOtheme GmbH
* @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*/

// no direct access
defined('_JEXEC') or die('Restricted access');

?>

<?php if ($this->checkPosition('top')) : ?>
<div class="pos-top">
  <?php echo $this->renderPosition('top', array('style' => 'block')); ?>
</div>
<?php endif; ?>

<?php if (($view->params->get('template.item_media_alignment') == "above") && $this->checkPosition('media')) : ?>
<div class="pos-media media-<?php echo $view->params->get('template.item_media_alignment'); ?>">
  <?php echo $this->renderPosition('media', array('style' => 'block')); ?>
</div>
<?php endif; ?>

<?php if ($this->checkPosition('title')) : ?>
<h1 class="pos-title"><?php echo $this->renderPosition('title'); ?></h1>
<?php endif; ?>

<?php if ($this->checkPosition('meta')) : ?>
<p class="pos-meta">
  <?php echo $this->renderPosition('meta'); ?>
</p>
<?php endif; ?>

<?php if ($this->checkPosition('fbliketop')) : ?>
<div class="pos-fbliketop">
  <?php echo $this->renderPosition('fbliketop'); ?>
</div>
<?php endif; ?>

<?php if ($this->checkPosition('subtitle')) : ?>
<h2 class="pos-subtitle">
  <?php echo $this->renderPosition('subtitle'); ?>
</h2>
<?php endif; ?>

<?php if (($view->params->get('template.item_media_alignment') == "top") && $this->checkPosition('media')) : ?>
<div class="pos-media media-<?php echo $view->params->get('template.item_media_alignment'); ?>">
  <?php echo $this->renderPosition('media', array('style' => 'block')); ?>
</div>
<?php endif; ?>

<div class="floatbox">

  <?php if ((($view->params->get('template.item_media_alignment') == "left") || ($view->params->get('template.item_media_alignment') == "right")) && $this->checkPosition('media')) : ?>
  <div class="pos-media media-<?php echo $view->params->get('template.item_media_alignment'); ?>">
    <?php echo $this->renderPosition('media', array('style' => 'block')); ?>
  </div>
  <?php endif; ?>

  <?php if ($this->checkPosition('content')) : ?>
  <div class="pos-content">
    <?php echo $this->renderPosition('content', array('style' => 'block')); ?>
  </div>
  <?php endif; ?>

</div>

<?php if (($view->params->get('template.item_media_alignment') == "bottom") && $this->checkPosition('media')) : ?>
<div class="pos-media media-<?php echo $view->params->get('template.item_media_alignment'); ?>">
  <?php echo $this->renderPosition('media', array('style' => 'block')); ?>
</div>
<?php endif; ?>

<?php if ($this->checkPosition('fblikebot')) : ?>
<div class="pos-fblikebot">
  <?php echo $this->renderPosition('fblikebot'); ?>
</div>
<?php endif; ?>

<?php if ($this->checkPosition('taxonomy')) : ?>
<ul class="pos-taxonomy">
  <?php echo $this->renderPosition('taxonomy', array('style' => 'list')); ?>
</ul>
<?php endif; ?>

<?php if ($this->checkPosition('bottom')) : ?>
<div class="pos-bottom">
  <?php echo $this->renderPosition('bottom', array('style' => 'block')); ?>
</div>
<?php endif; ?>

<?php if ($this->checkPosition('related')) : ?>
<div class="pos-related">
  <h3><?php echo JText::_('Related Articles'); ?></h3>
  <ul>
    <?php echo $this->renderPosition('related'); ?>
  </ul>
</div>
<?php endif; ?>

<?php if ($this->checkPosition('author')) : ?>
<div class="pos-author">
  <?php echo $this->renderPosition('author', array('style' => 'block')); ?>
</div>
<?php endif; ?>

<?php if ($this->checkPosition('fbcomments')) echo $this->renderPosition('fbcomments'); ?>

<?php if ($this->checkPosition('fbscript')) echo $this->renderPosition('fbscript'); ?>

Step 3

Step 3. Add CSS to Format New Positions

  • Open the item.css file for the template you want to modify located in:
    /media/zoo/applications/(your app)/templates/(your template)/assets/css
  • Add additional CSS formating for the new positions.
    ****See Example Below****
/* Added and Changed CSS for Facebook Comments and Like */
#yoo-zoo .item div.pos-fbliketop {
  margin: -10px 0 10px 10px;
}

#yoo-zoo .item div.pos-fblikebot {
  margin: 5px 0 -5px 10px;
}

#yoo-zoo .item div.comments h4.fbcomments {
  font-size: 24px;
  line-height: 24px;
}

Step 4

Step 4. Add Elements to your New Template Positions

Screenshot: Click to Enlarge

  • Add new Elements to your submission Type.
  • Add new Elements to your Template layout.
  • See   Add Element to Template   for a tutorial on adding elements to an existing template.

Complete! Your New Elements now have New Positions

You may also download the result of this tutorial as a Zoo App that can be installed using the Zoo App Installer.

Author: Mark Giesbrecht Created: August 30, 2010
Category: Custom Apps for Zoo Modified: August 15, 2011

Did you like this example of creating an application in Zoo?

Related Articles

Comment Via Facebook

Log me in