Product Update Log

Reference Guide for version 1.2

The Joomla! XTC Mosets Tree Wall module enhances your site with incredible power to display user Mosets Tree Directory Listing with your custom CSS and HTML in a module position. Choose listings by Creation Date, Most Voted, Views, Price, Popularity, and other criteria and display them with your own templates limited only by your imagination. Its the perfect tool for developers with custom styles in mind. The module can display articles in rows, columns and grids as well as special scrolling and fader effects for sliders and transitions.

Installation

Install the module via the Joomla! 1.5 Installer.

Usage

The Mosets Tree Wall is an advanced module for Joomla! that enables you to customize not only which listings are shown, but also the overall markup of the module contents. Knowledge of CSS or HTML is required, but you can use the examples included here or other web resources to gain insight.

Module Parameters:

Use these parameters to specify what listings to show

Source Category

Only show listings from the selected categories.

Included Featured

Choose to include featured listings.

Main Area Configuration:

Use these parameters to specify how listings will be shown in the main area.

Columns

Number of Columns to display

Rows

Number of Rows to display

Pages

Pages to display for slider or fader

Sort Field

Select how to display avatars

Sort Order

Order of display Ascending or Descending

Display Style

Horizontal slider - Vertical slider - Fader

Transition pause

Pause time between transitions in milliseconds. A value of -1 disables automatic transitions. Default value is: 4000.

Transition duration

Transition effect duration in milliseconds (default: 1500).

Slide orientation

Top-Bottom / Left-Right - Bottom-Top / Right-Left

Transition type

Linear - Quad - Cubic - Quart - Quint - Expo - Circ - Sine - Back - Bounce - Elastic

Fwd/Bwd Buttons Position

None - On Left and Right - On Top - On Bottom - On Top and Bottom

Button Style

Black - Grey - Red - Blue - Orange - Purple - Green - Square Grey - Tall Grey

Date Format

Format of the date display

Description Length

Number of characters to display for Description

Full Description Length

Number of characters to display for Full Description

Module HTML template

HTML/CSS code to display the overall module box. You can embedd any of the following tags to define how the module contents should look:


{mainarea}

This tag draws the module main area block containing all the elements to display, including the special effects. It is required to always have this tag included.

{leftbutton}

Draws a "Left/Back/Previous" button.

{rightbutton}

Draws a "Right/Forward/Next" button.

{pages}

Displays a numbered page links list for quick browsing.

Element HTML template

HTML/CSS code to display each element. This markwup will be used to display each entry. You can embedd any of the following tags to display entry information:


{url}

The Mosets Tree URL to this entry.

{cat_url}

The Mosets Tree URL to the entry category.

{cat_id}

The category ID number.

{cat_name}

The category name.

{cat_description}

The category description.

{cat_fullimage}

URL to the full-size category image.

{cat_thumbnail}

URL to the small-size category image.

{user_id}

Entry user ID.

{address}

Address.

{city}

Entry city.

{country}

Entry country.

{created}

Entry creation date.

{description}

Entry description limited by description length parameter.

{fulldescription}

Entry description limited by full description length parameter.

{email}

Email address.

{fax}

Fax number.

{hits}

Number of hits

{modified}

Date of entry last change.

{name}

Entry name.

{postcode}

Postal code.

{price}

Price.

{rating}

Rating.

{state}

State.

{telephone}

Telephone.

{votes}

Number of votes.

{visits}

Number fo visits.

{website}

Website address.

{index}

Numeric position of the element within the template.

{fullimage}

URL to entry full-size image.

{thumbnail}

URL to entry small-size image.


Styling Notes:

Here are a few of our HTML mark up examples from the online demos:



Mosets Tree Wall Featured Listing

Module Template


<div style="margin-bottom: 24px;">{mainarea}</div>



Element Template


<div style="float:left;"><div style="border:12px solid #cecece; width:200px; height:200px; float:left;"><img src="{fullimage}" width="200px" height="200px" alt="" align="left"/></div><div style="padding: 0 12px 0 12px; float:left; width: 450px;"> Available on <a href="{cat_url}"><b>{cat_name}</b></a> category:<br/><br/><h4 style="color: #135cae; line-height:118%; margin-bottom:2px; margin-top:0px; color:#366693; font-size:13px;"><a href="{url}">{name}</a></h4><br><div style="background: #fafafa; color: #135cae;padding: 4px; width: 450px;">{created} | Votes:{votes} | Visits: {visits} | <a href="{website}">View Webpage</a></div><br> <div style="color:#838383; font-size:11px;"> {description}</div><br> </div></div>



JoomlaXTC Mosets Tree Wall PopUP Example

Module Template


<div style="margin-bottom: 18px; width:100%; ">{mainarea} </div>



Element Template


<div style="float:left; width:100%; padding-top:9px; padding-bottom:13px; border-bottom:1px dotted #dddddd; margin-right:10px; "> <div style="float:left; width:70px; margin-top:1px; margin-left:-2px; margin-right:6px;" align="right"> <span style="font-weight:bold; color:#000; display:block; width:100%; font-size:11px;">{created}</span> <span style="color:#838383; font-size:10px;">{cat_name}</span> <span class="lang popuphover"><img src="images/video.png"></img> <span class="pop"> ,620,300,0,cccccc} </span> </span> </div> <div style="float:left; width:73px; height:73px; margin-left:7px; padding:5px; margin-top:4px; background:#ebebeb;"> <img src="{thumbnail}" width="73" height="73"></img> </div> <div style="margin-left:13px; width:150px; float:left; margin-top:2px; margin-right:12px;"> <h4 style="color: #135cae; line-height:118%; margin-bottom:2px; margin-top:0px; color:#366693; font-size:13px;">{name}</h4> <div style="color:#838383; font-size:11px;"> <p style="margin-bottom:0px;">{description} </p> </div> </div>



JoomlaXTC Mosets Tree Wall Slide Panel

Module Template


<div style="float:left; width:698px; margin-left:0px; height: 218px; background: url('images/npoutercontbkg.png') center bottom no-repeat; margin-bottom:2px;"> <div style="float:left; position:relative; z-index:99; width:45px; height:217px; margin-top:-8px;"> {leftbutton} </div> <div style="float:left; width:664px; height:200px; margin-left:-28px; background: url('images/npinnercontbkg.png') left bottom repeat-x; overflow:none;"> {mainarea} </div> <div class="rightbutton" style="float:left; position:relative; z-index:5; width:45px; height:217px; margin-left:-28px; margin-top:-8px;"> {rightbutton} </div> </div> <div style="clear:both;"></div>



Element Template


<div class="slidebox"> <div style="float:left; width:197px; height:188px; margin-right:19px; padding:6px; background: url(images/npimgbkg.jpg) repeat-x; display:table-cell; vertical-align: bottom;"> <div class="imageOver" style="width:197px; height:188px; overflow:hidden;"> <img src="{fullimage}" width="197" height="188" style="position:relative; z-index:3;" /> <div class="slidepanel" style="float:left; position:relative; z-index:4; margin-bottom: 8px; margin-top:-202px; background: url(images/npimgtrans.png) repeat; padding:12px 12px 12px 14px;"> <a href="{index}"><p style="font-size:14px; color:#ffffff; font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-weight:bold; margin-bottom:0px;">{name}</p></a> <div style="padding-top: 8px;"> <p style="font-size:11px; color:#cccccc; line-height:130%;">{description}</p> </div> </div> </div> </div> </div>



Tool Tips Example

Module Template


<div>{mainarea}</div>



Element Template


<div class="jxtctooltip"> <div style=" padding:5px; margin-top:10px; margin-left:5px; margin-bottom:10px; width:156px;height:110px;"> <div style=" width:140px; padding: 0px 0px 0px 0px; margin-left:0px; "> <div style="width:141px; margin-top:0px; <a href="{index}"><img src="{fullimage}" width="150" height="100" /></a> </div> <div style="margin-top:7px; padding-bottom:2px; font-family: Arial, sans-serif; font-size:12px;text-align:center; line-height:13px; color:#526a9a; font-weight:bold; letter-spacing:-0.1px; "><a href="{index}"><b>{name}</b></a></div> <div class="tip" style=" margin:-13px 0px 0px 0px; padding:12px; font-size:11px; line-height:133% !important; color:#ebebeb !important; background:#666666; "> {description} </div> </div> </div> </div>



Video Tutorial