templatesjoomlajoomla-extensionszooyoothemes

How to customize the layout if YooTheme ZOO?


I can't find any information describing how to customize the layout of Joomla's ZOO module.

As a result I need this layout: enter image description here

I've Zoo Item module, the theme's layout is UIkit, I've added two custom fields: the price and state.

So, I need to add a custom class name to theses elements, in order to position the price tag at top right corner and name field with state at bottom of image.

The only one thing which I've googled was to create a custom tmpl for that module. I have this code:

<?php if (!empty($items)) : ?>

<div class="uk-grid car_list_columns a_list_cars">
    <?php $i = 0; foreach ($items as $item) : ?>
    <?php echo $renderer->render('item.'.$layout, compact('item', 'params'), 'class="uk-width-1-3"'); ?>
    <?php $i++; endforeach; ?>
</div>

It only devides data into columns

But as a result I'm looking into something like this:

<div class="a_list_cars">
        <div class="price">£7,995</div> 
        <img src="xxx.jpg" class="">        
        <h3 class="price_desc"><span class="state">new</span> Description</h3>  
</div>

Working example will be very appreciated!


Solution

  • For the quickest solution, I've found the JBZoo component which from the box have better markup and have some css classes in order to customize the layout much better