JoomlaXTC Deluxe News Pro Edition

Reference Guide for version 3.5

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. 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 effects for sliders and transitions.

INSTALLATION

Install the module via the Joomla! 1.5 Installer.

Upload a new folder called newspro to your default images folder in the ROOT directory of your joomla install ROOT/images/newspro - If the module is unable to find this folder you will get the following error message when opening the module administration panel: JFolder::files: Path is not a folder

USAGE

The News Pro module is an advanced News Module for Joomla! that enables you to customize not only the article attributes, but 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

CONTENT SELECTION CRITERIA:

Use these parameters to specify what articles to show

Section ID	Content section (works along with category).
Category ID	Content category (works along with section).
Compatibility mode	Enables avatar and comments support for the most popular extensions.
Authors	Filter according to article authors.
Include Frontpage articles?	Choose to include frontpage articles.
One article per author?	Limit articles to one per author?
Sort order	Article display sort order

MODULE DISPLAY CONFIGURATION:

Use these parameters to customize the layout of the module box.

Module HTML template

HTML/CSS code to display the overall module box. You can embedd any of the following tags:

{leftbutton}	Draws a "Left/Back/Previous" button.
{mainarea}	This tag draws the articles main area blocks, including the special effects.
{morearea}	Draws the "more" area section markup.
{pages}	Displays a numbered page list for quick browsing.
{rightbutton}	Draws a "Right/Forward/Next" button.

Button Style

Button graphic set to use when buttons tags are enabled.

Module Class Suffix

The name of a CSS module class to apply.

CONTENT DISPLAY CONFIGURATION:

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

Main Content HTML template

HTML/CSS code to display each article. You can embedd any of the following tags to display article information:

{authorid}	Article author ID
{author}	Article author's name
{category_image}	URL to the article's category image.
{category}	Category title.
{date}	Article creation date.
{introimage}	URL to the first embedded image in the article.
{introtext}	Plain intro text (no images).
{intro}	Raw intro text.
{link}	URL to the article page.
{moddate}	Article modification date.
{section_image}	URL to the article's section image.
{section}	Section title.
{title}	Article title

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

Transition effect mode.

Width

Width (in pixels) of the window frame when using Window display style.

Height

Height (in pixels) of the window frame when using Window display style.

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.

Avatar width

Defines the avatar image width (if Avatars are enabled).

Avatar height

Defines the avatar image height (if Avatars are enabled).

Max. intro length

Maximum length of {introtext} tag contents to display. Empty = no limit.

Date format

Date format (using PHP date function). Defaulty is: Y-m-d

'MORE' AREA CONFIGURATION:

Use these parameters to specify how articles will be shown in the "more articles" area.

'More' content HTML template	HTML/CSS code to display each article. You can embedd any of the supported Article tags.
More titles	Offer links to more article titles.
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 (format is: RRGGBB in hexadecimal).
Max. length for intro text	Maximum length of {introtext} tag. Empty = no limit.

STYLING NOTES:

The following CSS classes are available on each Newspro module to style content:

jnp_content	Article content box.
jnp_buttonbar	Button bar table.
jnp_prev	"Previous" button cell
jnp_next	"Next" button cell
jnp_pag	Page button cell
jnp_more	"Read more" section table.

ADVANCED PARAMETERS:




In Opacity	The opacity (0, 0.1, 0.5..etc.. to 1 = full opacity) the element will turn when mouse enters the trigger..
Out OPacity	The opacity (0, 0.1, 0.5..etc.. to 1 = full opacity) the element will turn when mouse leaves the trigger..
In Animation Vertical	The distance the tooltip will move verically (in px) when the mouse enters the trigger.
Out Animation Vertical	The distance the tooltip will move verically (in px) when the mouse leaves the trigger.
In Animation Horizontal	The distance the tooltip will move horizontally (in px) when the mouse enters the trigger.
Out Animation Horizontal	The distance the tooltip will move horizontally (in px) when the mouse leaves the trigger.
Fade-in Duration	The duration of the animation when mouse enters the trigger.
Fade-Out duration	The duration of the animation when mouse leaves the trigger.


Pause	The time the tooltip will stand before begining the animation when mouse leaves the trigger.
Tooltip animation mode	Select one of the many functions to animate.
Tooltip / Popup ease mode	Choose one ease effect, between Ease In, Ease Out or Ease In Out. This setting is not used when "Slide Animation Mode" is set to Linear..

Slide It FX Settings:

These parameters control Slider effect.

Sliding Panels Settings

Choose a presetted animation from the list.

The following Settings are used ONLY when Sliden Panels Settings is set to CUSTOM

Slide Panel X in	The distance (in px) from the left container border that the slide panel will go to when the mouse enters the container.
Slide Panel X out	The distance (in px) from the left container border that the slide panel will go to when the mouse leaves the container.
Slide Panel Y in	The distance (in px) from the top container border that the slide panel will go to when the mouse enters the container.
Slide Panel Y out	The distance (in px) from the top container border that the slide panel will go to when the mouse leaves the container.
Slide animation mode	Select one of the many functions to animate the slide effects.
Slide ease mode	Choose one ease effect, between Ease In, Ease Out or Ease In Out. This setting is not used when "Slide Animation Mode" is set to Linear.
Frames per Second	The frames per second used to animate the efffect. Note: Using a high value in a heavy site could decrease the video perfomance. Combine this setting with "Frame Duration" to get a smooth effect.
Fame Duration	The time in miliseconds 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".

NEWSPRO SLIDESHOW EXAMPLE SETTINGS:

Parameters:

	CONTENT SELECTION CRITERIA:
Section ID
Category ID
Use current category?	No Yes
Compatibility mode
Authors
Include Frontpage Articles?	No Yes
One article per author?	No Yes
Sort order
	MODULE DISPLAY CONFIGURATION:
Module HTML template	<div style="margin-bottom: 24px;"{mainarea}</div>
	CONTENT DISPLAY CONFIGURATION:
Main Content HTML template	<div style="background: url({introimage}) top center no-repeat; width:620px; height:350px"> <div style="width:620px; height:256px;"> <a href="/{link}"><img src="/images/democontent/10x10spacer.gif" width="620" height="246" /></a> </div> <div style="width:620px; height:104px; background: url('/images/democontent/paneldim.png') repeat;"> <div style="float:left; width:250px; border-right: 1px dotted #cccccc; color:#ebebeb; padding-right:30px; padding-left:20px; text-align:right; font-size:28px; letter-spacing:-1px; line-height:28px !important; margin-top:16px; font-weight:500;">{title}</div> <div style="float:right; width:250px; color:#ebebeb; margin:23px 40px 5px 0px; padding-left:15px; text-align:left; font-size:11px; line-height:11px !important;">{introtext}</div> </div> </div>
Columns
Rows
Pages
	Transition Settings:
Display Style
Window Width
Window Height
Transition pause
Transition duration
Slide orientation
Transition type
Button Style
Avatar width
Avatar height
Max. title length
Max. title suffix
Max. intro length
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Date format
	'MORE' AREA CONFIGURATION:
'More' Content HTML template	{title}
More titles
More Columns
More legend
More legend color
Max. length for title text
Max. title suffix
Max. length for intro text
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Module Class Suffix

Advanced Parameters:

	Tool Tip / Pop Up FX Settings:
FX X Position
FX Y Position
FX Effect Z level
In Opacity
Out Opacity
In Animation Vertical
Out Animation Vertical
In Animation Horizontal
Out Animation Horizontal
Fade-In Duration
Fade-Out Duration
Fade In Opacity
Fade Out Opacity
Pause
Tooltip animation mode
Tooltip / Popup ease mode
	Slide It FX Settings:
Sliding Panel Settings
Slide Panel X In
Slide Panel X out
Slide Panel Y In
Slide Panel Y Out
Slide animation mode
Slide ease mode
Frames Per Second
Frame Duration
	Hover Color Change FX Settings:
Hover Effect In Color
Hover Effect Out Color

POP Up Video Layout (uses the JoomlaXTC X-tream Video Plugin):

Parameters:

	CONTENT SELECTION CRITERIA:
Section ID
Category ID
Use current category?	No Yes
Compatibility mode
Authors
Include Frontpage Articles?	No Yes
One article per author?	No Yes
Sort order
	MODULE DISPLAY CONFIGURATION:
Module HTML template	<div style="height:335px; margin-top:-8px; width:100%; ">{mainarea} </div>
	CONTENT DISPLAY CONFIGURATION:
Main Content HTML 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;">{date}</span> <span style="color:#838383; font-size:10px;">{category}</span> <span class="lang popuphover"><img src="/images/video.png"></img> <span class="pop">{fulltext}</span> </span> </div> <div style="float:left; width:73px; height:73px; margin-left:7px; padding:5px; margin-top:4px; background:#ebebeb;"> <img src="/{introimage}" 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;">{title}</h4> <div style="color:#838383; font-size:11px;"> <p style="margin-bottom:0px;">{introtext} </p> </div> </div>
Columns
Rows
Pages
	Transition Settings:
Display Style
Window Width
Window Height
Transition pause
Transition duration
Slide orientation
Transition type
Button Style
Avatar width
Avatar height
Max. title length
Max. title suffix
Max. intro length
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Date format
	'MORE' AREA CONFIGURATION:
'More' Content HTML template	{title}
More titles
More Columns
More legend
More legend color
Max. length for title text
Max. title suffix
Max. length for intro text
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Module Class Suffix

Advanced Parameters:

	Tool Tip / Pop Up FX Settings:
FX X Position
FX Y Position
FX Effect Z level
In Opacity
Out Opacity
In Animation Vertical
Out Animation Vertical
In Animation Horizontal
Out Animation Horizontal
Fade-In Duration
Fade-Out Duration
Fade In Opacity
Fade Out Opacity
Pause
Tooltip animation mode
Tooltip / Popup ease mode
	Slide It FX Settings:
Sliding Panel Settings
Slide Panel X In
Slide Panel X out
Slide Panel Y In
Slide Panel Y Out
Slide animation mode
Slide ease mode
Frames Per Second
Frame Duration
	Hover Color Change FX Settings:
Hover Effect In Color
Hover Effect Out Color

*note: The Video is pulled from the FULL Text of the article using the JoomlaXTC X-tream Video Plugin. The video is the first part of the text and the Full Text break is set for } which stops displaying the content at the end of the video call.

SLIDE PANEL EXAMPLE LAYOUT

Parameters:

	CONTENT SELECTION CRITERIA:
Section ID
Category ID
Use current category?	No Yes
Compatibility mode
Authors
Include Frontpage Articles?	No Yes
One article per author?	No Yes
Sort order
	MODULE DISPLAY CONFIGURATION:
Module HTML template	<div style="float:left; width:698px; margin-left:-18px; 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>
	CONTENT DISPLAY CONFIGURATION:
Main Content HTML 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="/{introimage}" 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="/{link}"><p style="font-size:12px; color:#ffffff; font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-weight:bold; margin-bottom:0px;">{title}</p></a> <div style="padding-top: 8px;"> <p style="font-size:11px; color:#cccccc; line-height:130%;">{introtext}</p> </div> </div> </div> </div> </div>
Columns
Rows
Pages
	Transition Settings:
Display Style
Window Width
Window Height
Transition pause
Transition duration
Slide orientation
Transition type
Button Style
Avatar width
Avatar height
Max. title length
Max. title suffix
Max. intro length
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Date format
	'MORE' AREA CONFIGURATION:
'More' Content HTML template	{title}
More titles
More Columns
More legend
More legend color
Max. length for title text
Max. title suffix
Max. length for intro text
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Module Class Suffix

Advanced Parameters:

	Tool Tip / Pop Up FX Settings:
FX X Position
FX Y Position
FX Effect Z level
In Opacity
Out Opacity
In Animation Vertical
Out Animation Vertical
In Animation Horizontal
Out Animation Horizontal
Fade-In Duration
Fade-Out Duration
Fade In Opacity
Fade Out Opacity
Pause
Tooltip animation mode
Tooltip / Popup ease mode
	Slide It FX Settings:
Sliding Panel Settings
Slide Panel X In
Slide Panel X out
Slide Panel Y In
Slide Panel Y Out
Slide animation mode
Slide ease mode
Frames Per Second
Frame Duration
	Hover Color Change FX Settings:
Hover Effect In Color
Hover Effect Out Color

FEATURED NEWS AND MORE NEWS (including Hover effects):

Parameters:

	CONTENT SELECTION CRITERIA:
Section ID
Category ID
Use current category?	No Yes
Compatibility mode
Authors
Include Frontpage Articles?	No Yes
One article per author?	No Yes
Sort order
	MODULE DISPLAY CONFIGURATION:
Module HTML template	<div style="margin-bottom: 24px;"><div style="float:left;">{mainarea}</div> <div style="float:left;">{morearea}</div> <div style="clear: both;"></div></div>
	CONTENT DISPLAY CONFIGURATION:
Main Content HTML template	<div style="margin-left:2px;margin-top:1px; margin-bottom:-16px;width:232px; border-right:1px dotted #666666;"> <a href="/{link}"> <img src="/{introimage}" width="216" height="108"/></a> <p style="width:216px;color:#526a9a; margin-top:3px; font-size:13px; font-weight:bold; margin-bottom:5px; margin-top:5px;"> {title}</p> <p style="margin-top:0px; font-size:11px; ">{introtext}</p> </div>
Columns
Rows
Pages
	Transition Settings:
Display Style
Window Width
Window Height
Transition pause
Transition duration
Slide orientation
Transition type
Button Style
Avatar width
Avatar height
Max. title length
Max. title suffix
Max. intro length
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Date format
	'MORE' AREA CONFIGURATION:
'More' Content HTML template	<div class="js_hover" style="margin-left:8px; padding:5px; margin-top:-5px; width:228px; "> <p style="font-size:12px; line-height:13px; color:#526a9a; font-weight:bold;">{title}</p> <p style="font-size:11px; line-height:12px; margin-top:5px;">{introtext}</p> </div>
More titles
More Columns
More legend
More legend color
Max. length for title text
Max. title suffix
Max. length for intro text
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Module Class Suffix

Advanced Parameters:

	Tool Tip / Pop Up FX Settings:
FX X Position
FX Y Position
FX Effect Z level
In Opacity
Out Opacity
In Animation Vertical
Out Animation Vertical
In Animation Horizontal
Out Animation Horizontal
Fade-In Duration
Fade-Out Duration
Fade In Opacity
Fade Out Opacity
Pause
Tooltip animation mode
Tooltip / Popup ease mode
	Slide It FX Settings:
Sliding Panel Settings
Slide Panel X In
Slide Panel X out
Slide Panel Y In
Slide Panel Y Out
Slide animation mode
Slide ease mode
Frames Per Second
Frame Duration
	Hover Color Change FX Settings:
Hover Effect In Color
Hover Effect Out Color

TOOLTIP Layout Example:

Parameters:

	CONTENT SELECTION CRITERIA:
Section ID
Category ID
Use current category?	No Yes
Compatibility mode
Authors
Include Frontpage Articles?	No Yes
One article per author?	No Yes
Sort order
	MODULE DISPLAY CONFIGURATION:
Module HTML template	{mainarea}
	CONTENT DISPLAY CONFIGURATION:
Main Content HTML 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="/{link}"><img src="/{introimage}" 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="/{link}"><b>{title}</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; "> {introtext} </div> </div> </div> </div>
Columns
Rows
Pages
	Transition Settings:
Display Style
Window Width
Window Height
Transition pause
Transition duration
Slide orientation
Transition type
Button Style
Avatar width
Avatar height
Max. title length
Max. title suffix
Max. intro length
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Date format
	'MORE' AREA CONFIGURATION:
'More' Content HTML template	{title}
More titles
More Columns
More legend
More legend color
Max. length for title text
Max. title suffix
Max. length for intro text
Max. intro suffix
Max. full text length
Max. full text suffix
Full text break keyword
Module Class Suffix

Advanced Parameters:

	Tool Tip / Pop Up FX Settings:
FX X Position
FX Y Position
FX Effect Z level
In Opacity
Out Opacity
In Animation Vertical
Out Animation Vertical
In Animation Horizontal
Out Animation Horizontal
Fade-In Duration
Fade-Out Duration
Fade In Opacity
Fade Out Opacity
Pause
Tooltip animation mode
Tooltip / Popup ease mode
	Slide It FX Settings:
Sliding Panel Settings
Slide Panel X In
Slide Panel X out
Slide Panel Y In
Slide Panel Y Out
Slide animation mode
Slide ease mode
Frames Per Second
Frame Duration
	Hover Color Change FX Settings:
Hover Effect In Color
Hover Effect Out Color

Reference Guide for version 3.5

INSTALLATION

USAGE

MODULE PARAMETERS

testimonials

Security Notice

where to find us