Help is on the way!

Description

The Joomla! XTC Deluxe News Pro module enhances your site with incredible power to display Joomla! Content with your custom CSS and HTML in a module position. Choose articles by Category, Section and other criteria and display them with your own templates limited only by your imagination. It's 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 effects for sliders and transitions.

Installation

Install the module using the regular Joomla! extension installer.

Configuration

The module can be customized using the standard Joomla! Module Manager.

Parameters are divided in two main sections: The Module Parameters section defines what data will be shown and how it should be presented. The Advanced Parameters allows you to configure the special effects and animations, if any were used. These parameters won't affect the data, but they can affect their display form.

To access these parameters, go to the module manager and select the Deluxe News Pro Module.

Module Parameters

Use these parameters to customize the standard presentation of the module.

Selection Parameters

These parameters select which articles to show:

Field	Description
Category ID	Filter according category.
Tags	Filter according the tags set on the articles (only on Joomla 3.1.x)
Specific Articles	Set the id of the articles that want to show in the module, if use this parameter, the section and category will be ignore.
Use current category?	Use this parameter to show only the articles in the same category that you are watching.
Avatar Compatibility mode	Use this parameter to active the compatibility with some third part extensions that provide you one avatar.
Comment Compatibility mode	This parameter enables compatibility with 3rd party comments extensions.
Authors	Use to filter according the author.
Include Frontpage Articles?	Use to add the articles that are set to be show in the front page, or show only articles marked as show in front end.
One article per author?	Restrict articles to one per author.
Obey Joomla Access restrictions	Select if want to respect or ignore the Joomla" visibility restrictions.
Sort order	Select the display order criteria for articles.

Display Parameters

These parameters define the layout properties of the module box. The layout consists of a grid with one or more pages of Joomla! articles organized in rows and/or columns.

Field	Description
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.
Offset	Number of results to skip. This is handy when you want to show the first group of results on one module and the next group in a different module.
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: Select -None selected- if want to use Module HTML template and Main Content HTML template fields.
Module HTML template	HTML/CSS code to display the overall module box. You can embed any of the following tags: Tag Description {leftbutton} Draws a "Left/Back/Previous" button. {leftbutton}HTML code{/leftbutton} Uses the HTML markup between tags as a button (useful for custom buttons). {mainarea} This tag draws the main layout area block, including the special effects. {morearea} This tag draws the articles more area blocks. {pages} Displays a numbered page list for quick browsing. {rightbutton} Draws a "Right/Forward/Next" button. {rightbutton}HTML code{/rightbutton} Uses the HTML markup between tags as a button (useful for custom buttons).
Main Content HTML template	HTML/CSS code to display each item. You can embed any of the following tags to display article information: Tag Description {alias (length suffix)} Shows the alias of the article with optional arguments for length and suffix. {articlefulltextimage} Image from full text field. {articlefulltextimagealt (length suffix)} Alternate label for the full text image assigned to the article with optional arguments for length and suffix. {articlefulltextimagecaption (length suffix)} Caption text for the article's full text image, with optional arguments for length and suffix. {articlefulltextimageurl} The URL for the full text image assigned to the article. {articleintroimage} Introduction image. {articleintroimagealt (length suffix)} Alternate label for the introduction image assigned to the article with optional arguments for length and suffix. {articleintroimagecaption (length suffix)} Caption text for the introduction image assigned to the article with optional arguments for length and suffix. {articleintroimageurl} The URL for the introduction image assigned to the article. {author (length suffix)} Article author's name. {author_alias (length suffix)} The alias of the article author, with optional arguments for length and suffix. {authorid} Article author ID. {authorprofile} Link to Authors Profile Page. The avatar tags only work if 3rd party compatibility is active. {avatar} Shows Author Avatars. The avatar tags only work if 3rd party compatibility is active. {category (length suffix)} Category title with optional arguments for length and suffix. {category_alias (length suffix)} Display the category alias for the article being shown with optional arguments for length and suffix. {category_description (length suffix)} Display the category description for the article being shown with optional arguments for length and suffix. {category_description_text (length suffix)} Display the category description text (HTML tags removed) for the article being shown with optional arguments for length and suffix. {category_image} URL to the article's category image. {category_link} URL to the category that contains the current article. {categoryid} Category ID number. {catid} Category ID number. {comments} Number of Comments (3rd party comments extension needed) {date (format)} Article creation date with optional argument for date format. {field id|name} Display value of custom field identified by number or name. {field id|name attribute} Display attribute of custom field identified by number or name (available attributes are: id, title, name, note, language, label, description, required, language_title, language_image, group_title, value, rawvalue). {fullimage} URL to the first embedded image in the Full text of the article. {fullnoimage (length suffix)} Show Full Text with No images with optional arguments for length and suffix. {fulltext (length suffix)} Plain full text (no images) with optional arguments for length and suffix. {hits} Number of Hits {id} Article id {index} Article position in the module. {intro (length suffix)} Raw intro text with optional arguments for length and suffix. {introimage} URL to the first embedded image in the introtext of the article. {intronoimage (length suffix)} Show Intro Text with No images with optional arguments for length and suffix. {introtext (length suffix)} Plain intro text (no images) with optional arguments for length and suffix. {language token} Display a language token, default value is COM_CONTENT_READ_MORE to show "Read More" {link} URL to the article page. {linka} First link assigned to the article. {linkatext (length suffix)} Title for the first link assigned to the article with optional arguments for length and suffix. {linkaurl} URL for the first link assigned to the article. {linkb} Second link assigned to the article. {linkbtext (length suffix)} Title for the second link assigned to the article with optional arguments for length and suffix. {linkburl} URL for the second link assigned to the article. {linkc} Third link assigned to the article. {linkctext (length suffix)} Title for the third link assigned to the article with optional arguments for length and suffix. {linkcurl} URL for the third link assigned to the article. {moddate (format)} Article modified date. {publish_down (format)} Article publication end date with optional argument for date format. {publish_up (format)} Article publication start date with optional argument for date format. {rawfulltext (length suffix)} Raw full text with optional arguments for length and suffix. {readinglist} Displays a Readlinglist button. This tag requires JoomlaXTC's Reading List component to be installed. {tags} This tag will show the tags that you set on the Joomla Article as they are show on the Article.*Only on Joomla 3.1 {title (length suffix)} Article title with optional arguments for length and suffix
Avatar width	Use to set the width of the avatar. Note: The avatar tags only work if the compatibility is active.
Avatar height	Use to set the height of the avatar. Note: The avatar tags only work if the compatibility is active.
Max. title length	Maximum length of {title} tag. Empty = no limit.
Max. title suffix	Suffix to show when trimming the title.
Max. intro length	Maximum length of {introtext} tag. Empty = no limit.
Max. intro suffix	Suffix to show when trimming the intro text.
Max. full text length	Maximum length of {fulltext} or {rawfulltext} tags. Empty = no limit.
Max. full text suffix	Suffix to show when trimming full text.
Full text break keyword	Display article text up to this string mark is found (including). Leave empty to display all text.
Date format	Date format (using PHP date function). Defaulty is: Y-m-d

'More' Area Configuration

Use these parameters to customize the 'more' area block in the module.

Field	Description
'More' Content HTML template	HTML/CSS code to display each article. You can embed any of the supported tags to display article information.
More titles	Offer links to more article titles.
Clone from main?	Enabling this will make the articles in the more section be the same as in the main section.
More Columns	Number of articles to show horizontally. If number of articles is higher, multiple rows will be shown.
More legend	Legend to show in read more area.
More legend color	Legend color.
Max. length for title text	Maximum length of {title} tag. Empty = no limit.
Max. title suffix	Suffix to show when trimming the title.
Max. length for intro text	Maximum length of {introtext} tag. Empty = no limit.
Max. intro suffix	Suffix to show when trimming the intro text.
Max. full text length	Maximum length of {fulltext} or {rawfulltext} tags. Empty = no limit.
Max. full text suffix	Suffix to show when trimming full text.
Full text break keyword	Display article text up to this string mark is found (including). Leave empty to display all text.
Module Class Suffix	A suffix to be applied to the CSS class of the module.

Advanced Parameters

These parameters control the behavior of special content effects, please read the next section for more information about content effects and how to apply them.

Field	Description
Z layer	Define the z-index layer to use for the special effect content.
Custom CSS	Any optional custom CSS code needed for the module markup.

Tooltip and Pop-Up FX Settings

Use these parameters to customize the Tooltip and Pop-Up effects:

Field	Description
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:

Field	Description
Sliding Panels Settings	Choose an animation style from the list.
Note: The following Settings are used ONLY when Slide Panels Settings is set to CUSTOM:
Slide Panel X in	The distance (in pixels) from the left trigger zone border that the 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 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 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 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:

Field	Description
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".

Module Settings

These parameters are standard for all Joomla modules. Please read Joomla! documentation for more information on their use.

Special Effects

Besides the page transition effects, you can also include additional effects that apply to the content of each item. By adding certain CSS tags to your HTML code and organizing the layout of content, these effects allow you to build fully customizable tooltips, pop-ups and slide effects. Since all the content data tags are available on these effects as well, you can elaborate the display of your content as much as you want!

Keep in mind however, that with great power comes great responsibility: the HTML of both zones is still part of the HTML code of your page; if your HTML/CSS code has a bug, it may affect how other parts of your site look and work.

Content effects are activated by the user's mouse pointer but with subtle differences. How you can implement each effect and how they are activated is explained below:

Tooltips

A Tooltip will appear automatically when the mouse pointer hovers over a specific "trigger zone", this example code explains better how to use the necessary tags:

<div class="jxtctooltip">
  This is the tooltip trigger zone
  <div class="tip">
    This is the tooltip content
  </div>
</div>

Upon display, this code will show the "This is the tooltip trigger zone" legend by itself, but if you move the mouse pointer over it, a tooltip will come up displaying the "This is the tooltip content" legend. Each zone is wrapped within a tag, you must use the CSS tags "jxtctooltip" and "tip" as shown to make the effect work.

Pop-ups

A pop-up will appear when the user clicks on the "trigger zone", the Pop-up zone has its own Close and Drag buttons. This example code shows the necessary CSS tags in use:

<div class="popuphover">
  This is the pop-up trigger zone
    <div class="pop">
      This is the pop-up content
    </div>
</div>

The trigger zone is made with the contents of the div with class "popuphover", and the pop-up content is hidden in the div with class "pop", it will be shown when the user clicks on the trigger zone.

Slides

Slides are useful to display content in different layers, for example imagine a picture with a footnote that expands to show a full description. Different than Tooltips or Pop-ups, Slides do not use a trigger zone, they react to mouse pointer over their own zones. This is an example code:

<div class="slidebox">
  This is the content zone
    <div class="slidepanel">
      This is the slide content zone
    </div>
</div>

Again, the container zone inside the div with CSS class "slidebox" will be shown first, and the contents of the slide on div "slidepanel" will be shown when the mouse hovers its zone.

Hover

The Hover is useful when you want to focus on specific zone of the content, for example a "clickable" zone that looks similar to other content, an image or name that want to highlight. Similar to Slides, they react to mouse pointer over their own zones and does not need a trigger zone. This is an example code:

This is the content zone
<div class="js_hover">
  The content with highlight
</div>
This is the rest of content zone

Once the mouse is over the js_hover zone the color will change automatically. As you can see this is the easier effect but provide you the power to catch the attention of your visitors.

Styling

As previously explained, the content is rendered in a grid fashion with one or more rows and columns on one or more pages, each page represents a single grid. Each cell in a grid contains the template code for one item with the placeholder tags translated to their corresponding data element such as titles, descriptions, images, etc.

In order to ease the visual styling of the grids, there are certain common CSS classes added to the HTML code for your convenience. You can put hard-coded CSS styling in the XTS template fields directly, but you may find using your template's CSS file a better option.

If you can't or don't want to alter your main CSS file, you can put any CSS code needed in the module's own file: css/wall.css. This file is located inside the module folder however, it will be overwritten if you reinstall or update the module.

This is a brief explanation on how the HTML and classes are applied:

CSS selector	Description
firstpage	The first page.
centerpage	Applied to pages between the first and the last.
lastpage	The last page.
singlepage	Page class when only one page is shown
evenpage	Used on even pages.
oddpage	Used on odd pages.
page-X	Numbered class applied to each page, eg: page-1, page-2, etc.
firstrow	The first row in a page.
centerrow	Rows between the first and the last.
lastrow	Last row in a page.
singlerow	Only row in a page.
evenrow	Used on even rows.
oddrow	Used on odd rows.
row-X	Numbered class applied to each row, eg: row-1, row-2, etc.
firstcol	The first column in a page.
centercol	columns between the first and the last.
lastcol	Last column in a page.
singlecol	Only column in a row.
evencol	Used on even columns.
oddcol	Used on odd columns.
col-X	Numbered class applied to each column, eg: col-1, col-2, etc.
prevbutton	Previous/Backward icon button.
nextbutton	Next/Forward icon button.
pagebutton	Page buttons.
firstbutton	First page button.
centerbutton	Page buttons between the first and the last.
lastbutton	Last page button.
singlebutton	A single page button is shown.
pag-X	Numbered class applied to each page button, eg: pag-1, pag-2, etc.

You can have a common set of CSS styling code for these tags in your template's CSS file to maintain a consistent appearance on any modules being shown, or you can use them in combination with the module CSS class parameter to define specific styling for a particular module.

These optionsprovide total control of how the content will be shown in your site.

Layout Options

A feature available on Joomla! 2.5.x and 3.x versions of the module is the option to choose among different layout models. These can be specified in the Advanced Options of the module parameters and render the wall contents using different HTML markup and Javascript. While the end results might look similar in all of them, their unique HTML markup offers different Styling options depending on your needs. These are the options:

Layout	Description
default	The standard method uses HTML tables to align items horizontally and vertically.
float	Wall elements are placed using floating blocks and are suitable for custom styling for Responsive and other layout needs.
bootstrap	Elements are arranged using standard Bootstrap classes.
semantic	Layout is built with blocks styled as "CSS tables" similar in behavior as HTML ones.

Keep in mind the layout methods other than Default use a different javascript for page effects.

Tutorial videos

Here are some tutorial videos you might find interesting:

---

Copyright 2017 Monev Software LLC www.joomlaxtc.com