Are you enjoying the extensions? Did you like the support? Help others decide

Leave a review

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
2777 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