18Feb2018
Information
Print

How to setup the Boxed layout style in Latest News Enhanced Pro

Information
Latest News Enhanced Latest News Enhanced Pro
First published February 08, 2017
2176 hits - No rating
 

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:

  • How to setup the Boxed layout style in Latest News Enhanced Pro

    How to setup the Boxed layout style in Latest News Enhanced Pro

    Learn to create a module instance of Latest News Enhanced Pro showing items in a style layout...

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