Simplify Your Web Documentation

In this tutorial, you will be able to create a module instance of Latest News Enhanced Pro showing items in a style layout that just uses CSS3 to animate its content.

The following is an example of what effects you will get by using this layout style:

step 1 Download the style Boxed with code name CSS Effect 1

step 2 Install the package like any other extension in Joomla!

step 3 Create an instance of the Latest News Enhanced Pro module

step 4 Set the standard parameters for a module instance (title, position, menu assignments)

step 5 Go to the Selection tab

step 6 Set the parameters that will select the items that will be shown (categories…)

step 7 Go to the Layout tab

step 8 Set key parameters:

• Item width 300
• Item width unit px
  Note to ensure the item fits its container, one can enter 100%. It will resize itself automatically, with a width no larger than Head width
• Style CSS Effect 1 or Boxed
• Head type Image intro (or any other way images are fetched)
• Head width 300
  Note the width needs to be identical to Item width, unless set in percentages
• Head height 200

step 9 Go to the Head:image tab

step 10 Set the parameters:

• Default image mandatory if some articles may not have an image
• Background color an accent color that will bleed through the images (a warm color like red, for instance)
  Note borders are white therefore adding a background color close to white will prevent them to show properly
• Crop pictures yes

step 11 Go to the Body tab

step 12 Set in the text section:

• letter count max 75 (adjust to your liking)

step 13 Save

Theme restrictions

• Image-only theme
• Compatible with IE 10+
• One cannot remove the image on downgraded items