Help is on the way!

Browse our Documentation, Search the Knowledge Base, Still need help? Send us a support ticket.

JoomlaXTC Komento Wall module

Display comment lists anywhere on your site with total layout and style control. Use pre-made templates or create your own custom HTML and CSS templates to show messages in rows, columns and grids with one or more pages as well as special animation effects for page transitions. Komento Wall is the easiest way to display comments in "most recent", "top rated" lists and many more ways.

• Supports multiple module copies with different configurations
• Arrange comment data in columns, rows and grids with one or more pages
• 42 button sets included
• 34 built-in templates
• 21 data tags to display information such as title, links, alias, avatars and more
• JXTC Showcase Library for Sliders, Tooltips, Pop-ups and more animation effects
• 100% Joomla Moo compatible effects
• Fully customizable Main and More Area HTML/CSS templates

Installation
Installation is done as with any standard Joomla extension following these steps:
  1. Download the extension zip file to your PC
  2. Use the standard Joomla Extension Manager to install the file.
Configuration

Use the Extensions / Module Manager menu option in Joomla's administrator page to edit the module parameters. For better results, make sure the module is in a Disabled state at first while you configure it to prevent any bad data or other disruption to your website frontend. Enable the module once you are done setting the parameters.

Module parameters are split in two main groups described below:

Basic Options

Selection Parameters

These parameters define the source and type of comment data to display, each comment will be an item that can have one or more data fields shown.

Select Component
Choose the source component for comments.
Include Sticked?
Choose to include comments marked as Sticked or not.
Include replied?
Replies to comments can also be selected for inclusion here.
Authors
Filter comments by Author, if needed.
One comment per author?
This option will show only one comment per author.
Sort field
Comments can be sorted in different ways, use this parameter to select their ordering.
Sort order
Use along the previous parameter to specify comment display order.

Use the following parameters to customize the layout of the module box. The layout consists of a grid made up with one or more pages of items organized in rows and/or columns.

Display Parameters

Columns
Number of columns to show.
Rows
Number of rows to show.
Pages
Number of pages to show. Transition effects are enabled between page changes.
Display Style
Special effects applied to the layout. Window modes work with one page only, all others require multiple pages of content to perform transitions between them.
Window Width
Width (in pixels) of the window frame when using a Window special effect.
Window Height
Height (in pixels) of the window frame when using a Window special effect.
Transition pause
Pause time between page transitions in milliseconds. A value of -1 disables automatic transitions. Default value is: 4000.
Transition duration
Page transition effect duration in milliseconds (default: 1500).
Slide orientation
Slide transition orientation.
Transition type
Transition animation type.
Button Style
Button graphic set to use when buttons tags are enabled.
Template
To select one of our predesigned template. NOTE: Use None to use the Module HTML template and Main Content HTML template parameters.
Module HTML template
HTML/CSS code to display the overall module markup box. You can embed any of the supported area tags as part of the markup:
{mainarea}Renders the block containing markup for all 'Main' items, including the special effects.
{morearea}Renders the block containing markup for all 'More' items.
{leftbutton}Inserts a "Left/Back/Previous" button.
{rightbutton}Inserts a "Right/Forward/Next" button.
{pages}Inserts numbered page links for quick browsing.
'Main' Item HTML template
HTML/CSS code to display each item. You can embed any of supported item tags as part of the markup (see below).
Avatar width
Width of avatar image (in pixels).
Avatar height
Height of Avatar image (in pixels).
Date format
Default date format for date/time values according to PHP date() function.

'More' Area Configuration

'More' Item HTML template
HTML/CSS code to display each item. You can embed any of supported item tags as part of the markup (see below).
More Items
Enter the number of additional items to show on this area.
Clone from Main?
If enabled, the items from 'Main' area will be used instead.
More Columns
Number of columns to show. Items will be arranged on one or multiple rows according to this value.
More Legend
The more area can contain a title string on top. Enter the desired text here.
More Legend Color
Set the color of the title legend string (format is: RRGGBB).

Advanced Options

Z layer
Define the z-index layer to use for the special effect content.
Custom CSS
Enter any custom CSS markup you need for styling.
Tooltip / Pop-Up FX Settings
Use these parameters to customize the Tooltip and Pop-Up effects:
In Opacity
The opacity of the tooltip/pop-up when the mouse enters the trigger zone. A value of 0 will make the display transparent while a value of 1 will make it opaque, values range from 0 to 1 in decimal increments.
Out Opacity
The opacity of the tooltip/pop-up when the mouse leaves the trigger zone. A value of 0 will make the display transparent while a value of 1 will make it opaque, values range from 0 to 1 in decimal increments.
In Animation Vertical
The distance the tooltip/pop-up will move vertically (in pixels) when the mouse enters the trigger zone.
Out Animation Vertical
The distance the tooltip/pop-up will move vertically (in pixels) when the mouse leaves the trigger zone.
In Animation Horizontal
The distance the tooltip/pop-up will move horizontally (in pixels) when the mouse enters the trigger zone.
Out Animation Horizontal
The distance the tooltip/pop-up will move horizontally (in pixels) when the mouse leaves the trigger zone.
Fade-in Duration
The duration of the "In" animation when the mouse pointer enters the trigger zone (in milliseconds).
Fade-Out duration
The duration of the "Out" animation when mouse pointer leaves the trigger zone (in milliseconds).
Pause
The time the tooltip/pop-up will be shown between the "In" animation and the "Out" animation (in milliseconds).
Tooltip animation mode
Select one of the many Moo functions to perform animations.
Tooltip / Popup ease mode
The transition type. All transitions, except for "linear" transition, can be combined with a "Transition Ease".
Centered Popup
Set this to "Yes" if you want pop-up effect displays to appear centered in the browser window.
Slide FX Settings
These parameters control the "Slide" content effect:
Sliding Panels Settings
Choose an animation style from the list.
Slide Panel X in
The distance (in pixels) from the left trigger zone border that the custom slide panel will go to when the mouse enters the trigger zone.
Slide Panel X out
The distance (in pixels) from the left trigger zone border that the custom slide panel will go to when the mouse leaves the trigger zone.
Slide Panel Y in
The distance (in pixels) from the top trigger zone border that the custom slide panel will go to when the mouse enters the trigger zone.
Slide Panel Y out
The distance (in pixels) from the top trigger zone border that the custom slide panel will go to when the mouse leaves the trigger zone.
Slide animation mode
Select one of the many Moo functions to animate the slide effects.
Slide ease mode
Choose how to apply the animation effect. This setting is not used when "Slide Animation Mode" is set to Linear.
Frames per Second
The frames per second used to animate the effect. Note: Using a high value in a heavy site could decrease the video performance. Combine this setting with "Frame Duration" to get a smooth effect.
Fame Duration
The time (in milliseconds) the duration will last.
Hover FX Settings
These Parameters Control the Hover Effect:
Hover Effect in Color
The background color that will fade in when mouse enter the element with class="js_hover".
Hover Effect Out Color
The background color that will fade out when mouse leaves the element with class="js_hover".

Using data tags

Data tags work as placeholders of information within the HTML code of your item template. Once the parameters are set, the module will loop thru all the available items adding the template code to the content areas and replacing the data tags with the corresponding bit of data.

These are the available item tags:

{id}This tag will return the id value of the comment
{processed_comment}Use this tag to show the comment as it is show on the Komento component, notice that this tag will show the emoticons that are set on the comments
{rawcomment}This tag will return the tag as it is saved on the database, without emoticons and with HTML code if that is set
{comment}This tag will return the comment without HTML code (and without emoticons)
{comment 10}This is a variation of the {comment} tag, but on this you can set as a parameter the length that you want for the comment (10 is an example, you can replace it for the value that you want)
{email}With this tag the value that was set on the "email" field when the comment was made will be show
{url}Use this tag to get the value that was set on the "url" field when the comment was made
{ip}This tag shows the IP of the user that made the comment that is show for the module
{created}This tag will show the date when the comment was made as is show on the Komento layout
{childs}Use this tag to get the number of children of the comment that is shown
{contenttitle}With this tag you can get the title of the content where the comment was made (for example the title of a Joomla Article, K2 item...)
{link}This tag return the URL to the content where the comment was made (for example a Joomla Article, K2 item...)
{date}With this tag you can get the date when the comment was made, this tag will use the parameter "Date format" to set the format of the date
{date j M Y}The same that the {date} tag, but on this case the "Date format" parameter is ignored and the value that you set as parameter is the format that the date will take (use PHP date function modifiers to set the format).
{moddate}Whit this tag you can get the latest date when the comment was modified, this tag will use the parameter "Date format" to set the format of the date
{moddate j M Y}The same that the {moddate} tag, but on this case the "Date format" parameter is ignored and the value that you set as parameter is the format that the date will take (use PHP date function modifiers to set the format).
{authorusername}Use this tag to get the username of the user that made the comment (only available if the user that made the comment was a registered user)
{authorname}With this tag you will get the value of the "name" field that appears when the comment was made
{avatarurl}With this tag you can get the URL to the avatar image of the user that made the comment
{avatar}With this comment you can get the image of the avatar of the user that made the comment
{authorurl}Use this tag to get the URL to the profile page of the user that made the comment (only available if the user that made the comment was a registered user)
{title}With this tag you can get the value of the field "title" that was set when the comment was made
{title 10}This is a variation of the {title} tag, but on this you can set as a parameter the length that you want for the title of the comment (10 is an example, you can replace it for the value that you want)
The included All Tags template helps to see what is the output of each tag. Enable it and run the module in the frontend to see results.


Video Tutorial

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET