How to create a real estate catalog?

Configuration of a real estate website like on the demo website from scratch

9.0/10 rating (1 votes)

We would like to bring to your attention the review dedicated to a real estate catalog and the step-by-step tutorial about its creation from scratch, like on the demo website.

Why is it better to create it from scratch yourself?

In order to have a good understanding of something, you should know basic things. Same with website creation. When you know how a website works, you can change anything you want in it. The better you know how everything works, the more influence on the result you have.

Short review of the demo real estate catalog

JBZoo real estate catalog is an output of items of the Real Estate section. You can see examples of the frontpage and of a detailed page on the screenshots below.

Frontpage example of a real estate catalogDetailed page example of a real estate object

Methods of catalog transferring. Their pros and cons

There are several variants of making a clone from scratch. We’ll review two main ones:

  • By modifying and creating needed elements after installing JBZoo.
    Pros: full understanding how everything works.
    Cons: long configuration.
  • By copying necessary files from the JBZoo demo package (without demo content).
    Pros: you will have a clone of the demo real estate website very fast.
    Cons: none.

After you manage to transfer demo data to a clean JBZoo, you will understand how everything works and will be able to make some experiments in the future versions.

Method 1. Creating necessary elements

This is a universal tutorial and can be applied to most JBZoo versions. If you have the latest JBZoo version then most likely all necessary item types and elements are already there so you will only need to modify them a bit to suit your needs. We recommend you to familiarize yourself with ZOO templates and their types first.

1. Install a clean Joomla 3.x.

2. Install a free version of ZOO.

3. Using Extension Manager, install JBZoo package which you can download from the client area of our website.

JBZoo App4. Open the ZOO control panel and create a new JBZoo application.

Creating and configuring the application5. Name this application however you want, for example, Real estate. But it’s mandatory that you rename its slug to flat and choose a Catalog template. In the Wrap items option choose without wrapper and in the Ordering option choose Creation date. This means that items in the categories will be sorted by their creation date. If you wand to sort them in other way, change this option as you need.

Configuration of the global template

Open the Template (Global) tab and set No in the Display option of subcategories.

Attention! Don’t forget to save your changes.

 

6. Activate your JBZoo license if you didn’t do this already.

Correct item type slug

7. Go to the JBZoo App configuration and create a new item type named Flat (name may be different but it’s important that its slug is flat). If you have a new JBZoo version and already have this item type, just skip this step.

8. Now we need to edit some files located in
media/zoo/applications/jbuniversal/templates/catalog/renderer/item/flat/
If you don’t have this folder, create it.

full.php - this is a template for a detailed page of a real estate object. Item positions are rendered here. It’s easy to understand how it works. The contents of this file should be like this:

<?php
/**
 * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
 *
 * @package     jbzoo
 * @version     2.x Pro
 * @author      JBZoo App http://jbzoo.com
 * @copyright   Copyright (C) JBZoo.com,  All rights reserved.
 * @license     http://jbzoo.com/license-pro.php JBZoo Licence
 * @coder       Denis Smetannikov <denis@jbzoo.com>
 */

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

$tabsId = uniqid('jbzoo-tabs-');

?>
<?php $map = JString::trim($this->renderPosition('map')); ?>
<?php if ($this->checkPosition('title')) : ?>
    <h1 class="title"><?php echo $this->renderPosition('title'); ?></h1>
<?php endif; ?>
<div class="clearfix top-info">
    <?php if ($this->checkPosition('gallery')) : ?>
        <div class="full-gallery">
            <?php echo $this->renderPosition('gallery'); ?>
        </div>
    <?php endif; ?>
    <div class="features">
        <?php if ($this->checkPosition('properties')) : ?>
            <div class="price-flat clearfix">

                <?php echo $this->renderPosition('price'); ?>
            </div>
            <ul class="properties">
                <?php echo $this->renderPosition('properties', array('style' => 'list')); ?>
            </ul>
            <div class="favourite">
                <?php echo $this->renderPosition('favourite'); ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<div class="clear clr"></div>

<div id="<?php echo $tabsId; ?>">
    <ul>
        <li><a href="#tab-overview">Overview</a></li>
        <li><a href="#tab-agent">Listing Agent</a></li>
        <?php if ($map) : ?><li><a href="/<?php echo JUri::getInstance()->toString(); ?>#tab-location">Location</a></li><?php endif; ?>
        <li><a href="#tab-comments">Comments</a></li>
    </ul>

    <div id="tab-overview">
        <div class="full-info-realty">
            <?php if ($this->checkPosition('text')) : ?>
                <div class="text-property description-block">
                    <h3>Description</h3>
                    <?php echo $this->renderPosition('text'); ?>
                </div>
            <?php endif; ?>

            <?php if ($this->checkPosition('related')) : ?>
                <h3>More Similar Properties</h3>
                <div class="related-property">
                    <?php echo $this->renderPosition('related'); ?>
                </div>
            <?php endif; ?>
        </div>
        <div class="clear clr"></div>
    </div>

    <div id="tab-agent">
        <div class="agent-description description-block">
            <?php echo $this->renderPosition('agent'); ?>
        </div>
    </div>

    <?php if ($map) : ?>
        <div id="tab-location">
            <?php echo $this->renderPosition('map'); ?>
        </div>
    <?php endif; ?>

    <div id="tab-comments">
        <div class="comments-property">
            <?php echo $this->renderPosition('comments'); ?>
        </div>
    </div>
</div>

<?php $this->app->jbassets->tabs(); ?>
<script type="text/javascript">
    jQuery(function ($) {
        $('#<?php echo $tabsId;?>').JBZooTabs({
            onTabShow: function (index) {
                var map = $('.googlemaps > div:first');
                if (map.length) {
                    map.data('Googlemaps').refresh();
                }
            }
        });
    });
</script>

metadata.xml - this file should have the following contents:

<?xml version="1.0" encoding="utf-8"?>
<!--
    JBZoo App is universal Joomla CCK, application for YooTheme Zoo component

    @package     jbzoo
    @version     2.x Pro
    @author      JBZoo App http://jbzoo.com
    @copyright   Copyright (C) JBZoo.com,  All rights reserved.
    @license     http://jbzoo.com/license-pro.php JBZoo Licence
-->
<metadata>
    <layout name="full">
        <name>Full</name>
        <description>Full layout</description>
    </layout>

    <layout name="teaser" type="related">
        <name>Teaser</name>
        <description>Teaser layout</description>
    </layout>

    <layout name="favorite">
        <name>Favorite</name>
        <description>Layout for element favorite</description>
    </layout>

    <layout name="related" type="related">
        <name>Related</name>
        <description>Related layout</description>
    </layout>

    <layout name="subcategory_item" type="related">
        <name>Subcategory item</name>
        <description>Subcategory item layout</description>
    </layout>

    <layout name="feed">
        <name>Feed</name>
        <description>Feed layout for all kinds of feeds like RSS and Atom.</description>
    </layout>

    <layout name="submission" type="submission">
        <name>Submission</name>
        <description>Submission layout</description>
    </layout>

    <layout name="compare">
        <name>Compare</name>
        <description>Compare item layout</description>
    </layout>

</metadata>

positions.xml - this file defines templates positions. For example, there is a full template which has such positions as title, gallery etc. Here you can change position names within <position></position> tags. It’s better not to change name attributes because we used them in the previous full.php. Contents of the positions.xml should be like this:

<?xml version="1.0" encoding="utf-8"?>
<!--
    JBZoo App is universal Joomla CCK, application for YooTheme Zoo component

    @package     jbzoo
    @version     2.x Pro
    @author      JBZoo App http://jbzoo.com
    @copyright   Copyright (C) JBZoo.com,  All rights reserved.
    @license     http://jbzoo.com/license-pro.php JBZoo Licence
-->
<renderer>
    <positions layout="full">
        <position name="title">Title</position>
        <position name="gallery">Gallery</position>
        <position name="text">Text</position>
        <position name="properties">Properties</position>
        <position name="price">Price</position>
        <position name="agent">Agent</position>
        <position name="map">Map</position>
        <position name="favourite">Favourite</position>
        <position name="related">Related</position>
        <position name="comments">Comments</position>
    </positions>

    <positions layout="teaser">
        <position name="image">Image</position>
        <position name="price">Price</position>
        <position name="beds">Beds</position>
        <position name="baths">Baths</position>
        <position name="address">Address</position>
        <position name="year">Year Built</position>
        <position name="sqft">Sq Ft</position>
        <position name="save">Save</position>
        <position name="additionally">Additionally</position>
        <position name="type">Type</position>
        <position name="agent">Agent</position>
        <position name="compare">Compare</position>
        <position name="date">Date</position>
        <position name="marked">Marked</position>
    </positions>

    <positions layout="submission">
        <position name="main">Main</position>
        <position name="properties">Properties</position>
    </positions>

    <positions layout="related">
        <position name="main">Main</position>
        <position name="properties">Properties</position>
    </positions>

    <positions layout="compare">
        <position name="fields">Fields</position>
    </positions>

    <positions layout="favorite">
        <position name="title">Title</position>
        <position name="image">Image</position>
        <position name="properties">Properties</position>
        <position name="text">Text</position>
        <position name="meta">Meta</position>
    </positions>
</renderer>

teaser.php - template of the items in a category.

<?php
/**
 * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
 *
 * @package     jbzoo
 * @version     2.x Pro
 * @author      JBZoo App http://jbzoo.com
 * @copyright   Copyright (C) JBZoo.com,  All rights reserved.
 * @license     http://jbzoo.com/license-pro.php JBZoo Licence
 * @coder       Denis Smetannikov <denis@jbzoo.com>
 */

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


$isMarked = ($this->checkPosition("marked") && strtolower(trim($this->renderPosition("marked"))) == "yes");

?>

<div class="realty-row item_<?php echo $item->id; ?> <?php echo ($isMarked) ? 'marked-element' : ''; ?>">

    <div class="teaser-image">
        <div class="mark-vip"></div><?php echo $this->renderPosition('image'); ?></div>

    <div class="main-info">

        <?php echo $this->renderPosition('price'); ?>

        <div class="rooms clearfix">

            <div
                class="beds <?php if (!$this->renderPosition('baths')): ?>no-baths<?php endif; ?> <?php if (!$this->renderPosition('baths')): ?>no-beds<?php endif; ?>">
                <div class="value-beds marked-realty"><?php echo $this->renderPosition('beds'); ?></div>
                <div class="label-beds"><?php echo JText::_('JBZOO_TMPL_FLAT_PROPS_BEDS'); ?></div>
            </div>

            <?php if ($this->checkPosition('baths')): ?>
                <div class="baths">
                    <div class="value-baths marked-realty"><?php echo $this->renderPosition('baths'); ?></div>
                    <div class="label-baths"><?php echo JText::_('JBZOO_TMPL_FLAT_PROPS_BATHS'); ?></div>
                </div>
            <?php endif; ?>
        </div>

        <div class="realty-save">
            <?php echo $this->renderPosition('save'); ?>
        </div>
    </div>

    <div class="more-info">
        <div class="listing-date"><?php echo $this->renderPosition('date'); ?></div>

        <p class="address"><?php echo $this->renderPosition('address'); ?></p>

        <div class="left-info">
            <?php if ($this->checkPosition('year')): ?>
                <div>
                    <?php echo JText::_('JBZOO_TMPL_FLAT_PROPS_YEARBUILD'); ?>
                    <span><?php echo $this->renderPosition('year'); ?></span>
                </div>
            <?php endif; ?>

            <?php if ($this->checkPosition('sqft')): ?>
                <div>
                    <?php echo JText::_('JBZOO_TMPL_FLAT_PROPS_SQFT'); ?>
                    <span><?php echo $this->renderPosition('sqft'); ?></span>
                </div>
            <?php endif; ?>

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

        <div class="right-info">
            <?php if ($this->checkPosition('type')): ?>
                <div>
                    <?php echo JText::_('JBZOO_TMPL_FLAT_PROPS_TYPEBUILD'); ?>
                    <span><?php echo $this->renderPosition('type'); ?></span>
                </div>
            <?php endif; ?>

            <?php if ($this->checkPosition('additionally')): ?>
                <div>
                    <?php echo JText::_('JBZOO_TMPL_FLAT_PROPS_ADDITION'); ?>
                    <span><?php echo $this->renderPosition('additionally'); ?></span>
                </div>
            <?php endif; ?>

            <?php if ($this->checkPosition('agent')): ?>
                <div class="agent-info">
                    <?php echo JText::_('JBZOO_TMPL_FLAT_PROPS_LISTING'); ?><?php echo $this->renderPosition('agent'); ?>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

Notice! Language variables used in the teaser.php:

JBZOO_TMPL_FLAT_PROPS_BEDS      = "Rooms"
JBZOO_TMPL_FLAT_PROPS_BATHS     = "Baths"
JBZOO_TMPL_FLAT_PROPS_YEARBUILD = "Year Built:"
JBZOO_TMPL_FLAT_PROPS_SQFT      = "Sq Ft:"
JBZOO_TMPL_FLAT_PROPS_TYPEBUILD = "Object type:"
JBZOO_TMPL_FLAT_PROPS_ADDITION  = "Additionally:"
JBZOO_TMPL_FLAT_PROPS_LISTING   = "Listing courtesy of"

These variables are stored in the language files of JBZoo application:
media/zoo/applications/jbuniversal/language/

You can modify them directly or using Joomla language overrides.

favorite.php - a template for favorite objects. Create this file if you don’t have it. It should have the following contents:

<?php
/**
 * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
 *
 * @package     jbzoo
 * @version     2.x Pro
 * @author      JBZoo App http://jbzoo.com
 * @copyright   Copyright (C) JBZoo.com,  All rights reserved.
 * @license     http://jbzoo.com/license-pro.php JBZoo Licence
 * @coder       Denis Smetannikov <denis@jbzoo.com>
 */

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


?>

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


<?php if ($this->checkPosition('image')) : ?>
    <div class="item-image align-left">
        <?php echo $this->renderPosition('image'); ?>
    </div>
<?php endif; ?>


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


<?php if ($this->checkPosition('text')) : ?>
    <?php echo $this->renderPosition('text', array('style' => 'block')); ?>
<?php endif; ?>


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

<div class="clear clr"></div>

9. Open this folder:
media/zoo/applications/jbuniversal/templates/catalog/renderer/item_columns/
If there is no flat.php file there, create it and paste this code in it:

<?php
/**
 * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
 *
 * @package     jbzoo
 * @version     2.x Pro
 * @author      JBZoo App http://jbzoo.com
 * @copyright   Copyright (C) JBZoo.com,  All rights reserved.
 * @license     http://jbzoo.com/license-pro.php JBZoo Licence
 * @coder       Denis Smetannikov <denis@jbzoo.com>
 */

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


?>
<div class="listings-title"><?php echo JText::_('JBZOO_TMPL_FLAT_LISTINGS'); ?></div>

<div class="listings-realty">
    <?php echo implode(" \n", $vars['objects']); ?>
</div>

Table name

Notice! JBZOO_TMPL_FLAT_LISTINGS variable is used for the table name which is used to group items of the Real estate application

 

10. Now configure elements for the Flat item type using these screenshots as a reference:

Edit elements linkConfiguring elements - 1Configuring elements - 2Configuring elements - 3Configuring elements - 4Configuring elements - 5Configuring elements - 6Configuring elements - 7

11. Configure fields of the teaser template of the Flat item type like on these screenshots:

Configuring teaser template - 1Configuring teaser template - 2Configuring teaser template - 3Configuring teaser template - 4Configuring teaser template - 5

12. Same with the full template.

Configuring full template - 1Configuring full template - 2Configuring full template - 3Configuring full template - 4Configuring full template - 5Configuring full template - 6

13. Now configure the compare template:

Configuring compare template - 1Configuring compare template - 2

14. And the favorite template:

Configuring favorite template - 1Configuring favorite template - 2Configuring favorite template - 2

15. Modify CSS rules in this file:
/media/zoo/applications/jbuniversal/assets/css/jbzoo.flat.css

Add this code there:

.listings-title {
    background: #617ba0;
    background: -moz-linear-gradient(#617ba0, #204375);
    background: -ms-linear-gradient(#617ba0, #204375);
    background: -webkit-linear-gradient(#617ba0, #204375);
    background: -o-linear-gradient(#617ba0, #204375);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#617ba0, endColorstr=#204375);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF617ba0,endColorstr=#FF204375)";
    background: linear-gradient(#617ba0, #204375);
    border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    padding: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

.jbzoo-app-flat .listings-realty {
    box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
    border-radius: 4px;
}

.jbzoo-app-flat .realty-row {
    clear: both;
    padding: 10px 0;
    height: 106px;
    border-bottom: 1px solid #ccc;
    position: relative;
}

.jbzoo-app-flat .realty-row:hover {
    background: #FFF;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .3);
    z-index: 50;
    -webkit-transition: background 400ms;
    -webkit-transition: box-shadow 400ms;
    -moz-transition: background 400ms;
    -moz-transition: box-shadow 400ms;
    border-radius: 4px;
}

.marked-realty {
    color: #a00;
}

.jbzoo-app-flat .teaser-image {
    float: left;
    margin-right: 20px;
    padding-left: 10px;
}

.jbzoo-app-flat .teaser-image img {
    border: 3px solid #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
    margin: 5px;
}

.jbzoo-app-flat .main-info {
    float: left;
    width: 138px;
    font-size: 14px;
    height: 106px;
    position: relative;
}

.jbzoo-app-flat .jbprice-wrapper .price-value {
    color: #a00;
    font-weight: normal !important;
    margin-bottom: 8px;
}

.jbzoo-app-flat .rooms {
    width: 104px;
}

.jbzoo-app-flat .baths {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #999;
}

.jbzoo-app-flat .beds, .jbzoo-app-flat .baths {
    float: left;
    margin-bottom: 6px;
}

.jbzoo-app-flat .value-beds, .jbzoo-app-flat .value-baths {
    margin: 0 0 8px;
    text-align: center;
}

.no-baths .value-beds {
    float: left;
    margin-right: 6px;
}

.no-baths .label-beds {
    float: right;
}

.jbzoo-app-flat .realty-save {
    clear: both;
    position: absolute;
    bottom: 0;
}

.jbzoo-app-flat .realty-save a {
    float: left;
}

.jbzoo-app-flat .realty-save a:first-child {
    margin-right: 6px;
}

.jbzoo-app-flat .address,
.jbzoo-app-flat .value-beds,
.jbzoo-app-flat .value-baths {
    font-size: 16px;
    line-height: 18px;
}

.jbzoo-app-flat .more-info {
    width: 456px;
    float: left;
    position: relative;
}

.jbzoo-app-flat .more-info span {
    color: #a00;
    font-size: 16px;
    line-height: 24px;
}

.jbzoo-app-flat .listing-date {
    position: absolute;
    right: 0;
    font-size: 12px;
}

.jbzoo-app-flat .address {
    margin: 0 0 10px;
}

.jbzoo-app-flat .left-info,
.jbzoo-app-flat .right-info {
    float: left;
    font-size: 14px;
}

.jbzoo-app-flat .left-info {
    margin-right: 20px;
    width: 160px;
    position: relative;
    height: 78px;
}

.jbzoo-app-flat .agent-info {
    clear: both;
    right: 0;
    font-size: 13px;
    position: absolute;
    bottom: 0;
    text-align: right;
    line-height: 13px;
}

.jbzoo-app-flat .realty-compare {
    position: absolute;
    bottom: 0;
}

.jbzoo-app-flat .right-info {
    width: 276px;
    position: relative;
    height: 76px;
}

.jbzoo-app-flat .related-property .right-info {
    width: 250px;
}

/*
** Full styles
*/
.jbzoo-app-flat .top-info {
    -moz-box-shadow: 0 0 2px 2px #ccc;
    -webkit-box-shadow: 0 0 2px 2px #ccc;
    box-shadow: 0 0 2px 2px #ccc;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 20px;
}

.jbzoo-app-flat .full-gallery {
    width: 56%;
    float: left;
}

.jbzoo-app-flat .full-gallery img {
    border: 3px solid #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
    padding: 3px;
    border-radius: 3px;
}

.jbzoo-app-flat .full-gallery div {
    margin-top: 10px;
}

.jbzoo-app-flat .full-gallery div img {
    border: 1px solid #999;
}

.jbzoo-app-flat .features {
    float: right;
    width: 42%;
}

.jbzoo-app-flat .price-flat {
    clear: both;
}

.jbzoo-app-flat .price-flat .currency-list {
    float: right;
}

.jbzoo-app-flat .price-flat label {
    float: left;
    font-size: 24px;
}

.price-flat .price-value.active {
    font-weight: normal !important;
    font-size: 28px;
    line-height: 28px;
}

.jbzoo-app-flat .properties {
    margin: 10px 0;
    padding-left: 0;
}

.jbzoo-app-flat .properties li {
    list-style: none;
    border-bottom: 1px solid #ccc;
    clear: both;
    padding: 10px 0;
}

.jbzoo-app-flat .properties strong {
    float: left;
    display: block;
    width: 150px;
}

.jbzoo-app-flat .favourite {
    float: right;
}

.jbzoo-app-flat .description-block {
    padding: 14px 0;
}

.jbzoo-app-flat .description-block:last-child {
    border-bottom: none;
}

.jbzoo-app-flat .related-property .more-info {
    width: 430px;
}

.jbzoo-app-flat .agent-photo {
    float: left;
    margin: 0 10px 6px 0;
    border: 2px solid #FFF;
    border-radius: 3px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .4);
}

.jbzoo-app-flat .agent-rating {
    float: right;
}

.jbzoo-app-flat .agent-title {
    float: left;
}

.jbzoo-app-flat .contacts li {
    list-style: none;
}

/*
** Filter styles
*/
.filter-flats .jbzoo .element-text-range .field input {
    width: 78%;
    margin-bottom: 10px;
}

.filter-flats .element-text-range .field label {
    float: left;
    width: 36px;
}

.filter-flats .element-checkbox .field label {
    float: left;
    margin-right: 10px;
}

body .jbzoo-filter .filter-element input[type="checkbox"] {
    margin-right: 5px;
}

/*
** Menu for submit add
*/

body .module-submit-flat {
    padding: 0;
    background: none;
    margin: 0 0 20px 0;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.module-submit-flat ul {
    text-align: center;
}

.module-submit-flat li {
    border-bottom: none;
    display: block;
    border-radius: 4px;
    width: 180px;
    margin: 10px auto;
    background: #617ba0;
    background: -moz-linear-gradient(#617ba0, #204375);
    background: -ms-linear-gradient(#617ba0, #204375);
    background: -webkit-linear-gradient(#617ba0, #204375);
    background: -o-linear-gradient(#617ba0, #204375);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#617ba0, endColorstr=#204375);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF617ba0,endColorstr=#FF204375)";
    background: linear-gradient(#617ba0, #204375);
}

.module-submit-flat a, .container .module-submit-flat a:hover {
    color: #fff;
    background: none;
    text-decoration: none;
    padding: 10px 20px 10px 20px;
    display: block;
    font-size: 14px;
}

.module-submit-flat li:hover {
    opacity: 0.8;
}

/*
** Submission form
*/
.jbuniversal-catalog-flats .element-checkbox input,
.jbuniversal-catalog-flats .element-checkbox label {
    float: left;
}

.jbuniversal-catalog-flats .element-checkbox input {
    margin-top: 8px;
}

.jbuniversal-catalog-flats .element-checkbox label {
    margin: 4px 0 0 0;
}

body .mysubmissions .toolbar div.links,
body .mysubmissions .toolbar .submission-add .trigger {
    border-radius: 6px;
}

body .mysubmissions .toolbar div.links {
    min-width: 68px;
    padding: 2px 10px;
    background: #F0F0F0;
    top: 34px;
}

body .mysubmissions .toolbar div.links a {
    display: block;
}

body .mysubmissions .toolbar .submission-add:hover .trigger {
    border-bottom-color: #CCCCCC;
}

.jbzoo-app-flat .marked-element, .jbzoo-app-flat .marked-element:hover {
    background: #ffffcc;
}

.jbzoo-app-flat .marked-element .mark-vip {
    position: absolute;
    width: 67px;
    height: 67px;
    top: 18px;
    left: 18px;
    background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAyCAYAAAAjrenXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABNVJREFUeNrUmU1IVFEUx4/P6YNIwTAQNKUgS7KilCzaRLYoaJNQtOm7leWqgr52UbTIVV+boqIWUVAUbYJqES0qRgoiNAXpSwiKhiytDLPzf8553bneO/Pemzc6c+DM8903vvndc8/933PfKxoZGaForPEofxxLacKtiyhq+8zeXBQNeGMrf5wdB+if7KuI4s9jOOtoDP8LDfGGHXw4o7cnHiaobE1ZlNDD7JsBjRMnmzsxdAsfLuqx/XLrC/Ue7KW+031Rgu9m6Lty4mQB3cyHmzp04kGC3p14R8WlxVTeUh4V9CGGvqw2OCGhl/Phvv7/g52DHvSck3NoSuUUt/133+9soM8z9Em90QkB3cCHx+zFajvguvd003D/MNUcrqHSZaWjicnnPa09roewtwzdarrgBISez4cn7JP0a9+ffXchYf3P+z1odAadKmkqCQqdYF9ouxgLAD0LAsQ+1XRd8hmpgsk59HHISx9cq9hWkTI6sZKYm1IWG2RfzNH+YfuCq+OZ5JChZ4wOG2UMG6INRZHoI2Xmnpv7X9O4vXNLp/t3/Z160y3+sC9i6K50v+P4iPR0PnT7gRbQ2rO1XjQRXXVyolNpUucv+7pM0BkjnoTGrKoIvFok8xupIiqDFIJc6qOgrLVbGfqan/tbwRl6chK6WlcPKISetzZ4RFgmK2xa3bSUEVFsP0O3+w1MulR5pUOLegAeqyImYjoDHCIrExe6boFGndMeZERjlhR5wYdav+qBNDAphKgHdB3QSBHD966z7w2aimNShaGh0yuDqIdp+EU90FZ3tc52m6fsK/6fxilUqjD0PRM0JhQmmU09cA2QJvVApyzWmwodMuIMfYPPN5qgASETa+aGmW65KtENoR6wT+w17EOpzfFg4LwRuMAfu4y/cOXTmPIUgIBHJ9CZgOoxgEnf0djxlYNFWYA3nOLjvnSSJmmAiYnIqmkjo4BrMmExEZHXBuhf7EsYuiuZmoFgdfCMezdJFxl6gEsO66Mg6mHIbdQATQzdocyp0OC+qkMAAQapIBNVJh4WIUBjZBBttBmgEZxNKnTQ1AgVcanyRN4AqacDOoR2y65nJ0NfGrtehN+oO/pEfLn6pVfZqYYoAgrXZEVUcxijYoE+boLO1jxwKAccYANdA8YvV+2t8iJu6pzBrjH0UcqBOZIGiDaGHzWybLtMtYcUVpnqFOxJGXoL5cgcdatVfaTa2+CKFKJTanQBju+gHZPRYq8Zei3l0GKmXTjOAYVRUIEr2yq9DkIOLZuB9+xLKcfmqoq6rCOatscJqPJkAiLiBtlLJFfFH/72sVmqChRBHpcJNM6hHFgkUH+I5KkqY1gVF/uFjiRVYIBTFxY119WiymJ/kkv5Bxoni+labSpDketSd9s2uFJ/TAi4qcACNFyVQm0p383QD2mcLS04tBp5LXW2IV0O5GJVzBrcLaBKONLbK1JyXja4DN1OE2S+iyzNbrO3RFXpRR5x+wY33kITbEEfM+Ox7wrKAwsCjvV/HuWJ+QVHnbuAoz1USOBv2Gcz9FfKI8sEjucSzQz9mfLM0oF/o9Fn1X2Uh2YDxxvc9Qz9ivLUTODyBvcJ5bGZwNvUN7iFAo43uOepAEwFN77BzXfw26MpUjgG8EfJyThcSOD/BBgAnYiBNaeEhwAAAAAASUVORK5CYII=) no-repeat;
}

16. Now create a category, for example, London and create a new item of the Flat item type.

Notice! It’s best to store the images for the gallery in the /images/flats folder because the gallery is configured to use this folder by default.

What do we have in the result?

17. Create a new menu item for the frontpage of the application or for a specific category (London, for example) and look at the result.

Notice! We didn’t describe the creation of the item type used for realtors (Agent), so the bottom right corner of an item teaser doesn’t contain an information about the author of this item.

Method 2. Copying files from a copy of the demo website

After the seventh step of the first method, extract an archive with a copy of the demo website which you can download from the client area of our website. Now copy these files to the corresponding folders of your website:

  • Item templates (whole folder)
    /media/zoo/applications/jbuniversal/templates/catalog/renderer/item/flat/
  • Table header
    /media/zoo/applications/jbuniversal/templates/catalog/renderer/item_columns/flat.php
  • CSS styles for the flat item type
    /media/zoo/applications/jbuniversal/assets/css/jbzoo.flat.css
  • This file will add all elements for the flat item type
    /media/zoo/applications/jbuniversal/types/flat.config
  • This file will assign elements to their positions:
    /media/zoo/applications/jbuniversal/templates/catalog/renderer/item/positions.config

Notice! You don’t have to copy the whole file, it’s enough to copy the parts related to the flat item type.

If you want, you can import the demo content (real estate objects and images).

Now follow the previous method starting from the step 16.

Customizing an output

After you create a real estate catalog like on the demo website, you can start changing colors or other appearance settings using styles located in
/media/zoo/applications/jbuniversal/assets/css/jbzoo.flat.css

You can change the words used in the teaser template in this file
/media/zoo/applications/jbuniversal/templates/catalog/renderer/item/flat/teaser.php

Application, Demo, Template

Still gotta questions, who can help me?

Visit our special JBZoo tech support forum which is specifically meant for JBZoo so the priority of the response and its promptness are much better there than in any other place. With inactive account with a “Plus” sign in a tariff plan you can ask for support in one of these sections or use any of our contacts.