FAVCONTENT is a responsive Joomla! module designed to showcase your content with multiple layout options and CSS3 effects for images, icons, text description and titles.

Once installed, find the module in EXTENSIONS/MODULES and open it:

FavContent Joomla module documentation main screen

MODULE SETTINGS - this tab controls the general settings, the ones that apply to all elements of the module.

MODULE STYLE - this tab controls the individual settings for each element of the module such as images, text or icons for each one of the columns.

The downloaded package for the module is a .zip archive that needs to be unzipped before use. After it has been unzipped, inside the downloaded package you will find:

  1. the module's .zip archive - must to be installed using EXTENSIONS/MANAGE/INSTALL
  2. the ReadMe.txt file - has useful information about the product

Module Settings

1. Module Layout

FavContent Joomla module documentation settings main screen

  1. LOAD JOOMLA! JQUERY - This setting loads Joomla!'s jQuery library. Choose NO if your website loads jQuery from an external source.
  2. LAYOUT TYPE - Choose a content layout type for this module.
  3. LAYOUT EFFECT - Choose a CSS3 effect for the layout on page scroll and load. Note that the CSS3 features are not supported by older browsers.

2. Display Module Elements

FavContent Joomla module documentation settings display screen

  1. SHOW IMAGE - Choose if the image for this module should be displayed or not.
  2. SHOW IMAGE TITLE - Choose if the title of the image should be displayed or not.
  3. SHOW ICON - Choose if the icon for this module should be displayed or not.
  4. SHOW TITLE - Choose if the title for this module should be displayed or not.
  5. SHOW DESCRIPTION TEXT - Choose if the description for this module should be displayed or not.
  6. SHOW READ MORE - Choose if the Read More button for this module should be displayed or not.

3. Image Options

FavContent Joomla module documentation settings image screen

  1. IMAGE MAX HEIGHT - Insert the maximum height for the image using pixels or percent (for example: 140px or 80%, not 140). A blank field reverts the setting to the default value.
  2. IMAGE BORDER COLOR - Choose the color for the border of the image. A blank field reverts the setting to the default value.
  3. IMAGE BORDER WIDTH - Insert the border width for the image using pixels (for example: 1px, not 1). A blank field reverts the setting to the default value.
  4. IMAGE BORDER TYPE - Choose the border type for the image.
  5. IMAGE BORDER RADIUS - Insert the border-radius for the image using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.

Image Title Options

  1. IMAGE TITLE GOOGLE FONT - Insert the name of the Google Font for the image title, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  2. IMAGE TITLE COLOR - Choose the color for the image title. A blank field reverts the setting to the default value.
  3. IMAGE TITLE PADDING - Insert the padding for the image title using pixels or percent (for example: 14px or 10%, not 14). The padding is a CSS property that sets the space around the content. The padding can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
  4. IMAGE TITLE FONT SIZE - Insert the name of the Google Font for the image title, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  5. IMAGE TITLE LINE HEIGHT - Insert the line height for the image title using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  6. IMAGE TITLE TEXT ALIGN - Choose the text align for the image title.
  7. IMAGE TITLE TEXT TRANSFORM - Choose the text transform for the image title.
  8. IMAGE TITLE BORDER RADIUS - Insert the border-radius for the image title using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.

4. Icon Options

FavContent Joomla module documentation settings icon screen

  1. ICON WIDTH - Insert the width for the the icon when the icon layout is enabled using pixels or percent (for example: 140px or 80%, not 140). A blank field reverts the setting to the default value.
  2. ICON FONT SIZE - Insert the font size for the the icon when the icon layout is enabled using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  3. ICON BORDER WIDTH - Insert the border width for the icon when the icon layout is enabled using pixels (for example: 1px, not 1). A blank field reverts the setting to the default value.
  4. ICON BORDER TYPE - Choose the border type for the icon when the icon layout is enabled.
  5. ICON BORDER RADIUS - Insert the border-radius for the icon when the icon layout is enabled using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.

5. Title Options

FavContent Joomla module documentation settings title screen

  1. TITLE GOOGLE FONT - Insert the name of the Google Font for the title, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  2. TITLE FONT SIZE - Insert the font size for the title using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  3. TITLE LINE HEIGHT - Insert the line height for the title using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  4. TITLE TEXT ALIGN - Choose the text alignment for the title of the module.
  5. TITLE TEXT TRANSFORM - Choose the text transform for the title of the module.

6. Description Options

FavContent Joomla module documentation settings description screen

  1. DESCRIPTION TEXT GOOGLE FONT - Insert the name of the Google Font for the description text, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  2. DESCRIPTION TEXT COLOR - Choose the color for the description text. A blank field reverts the setting to the default value.
  3. DESCRIPTION TEXT FONT SIZE - Insert the font size for the description text using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  4. DESCRIPTION TEXT LINE HEIGHT - Insert the line height for the description text using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  5. DESCRIPTION TEXT ALIGN - Choose the text align for the description text.
  6. DESCRIPTION IMAGE/ICON WIDTH - Choose the width for the image or icon next to the description text.

7. Read More Options

FavContent Joomla module documentation settings Read More screen

  1. READ MORE GOOGLE FONT - Insert the name of the Google Font for the Read More text, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  2. READ MORE COLOR - Choose the color for the Read More text. A blank field reverts the setting to the default value.
  3. READ MORE BACKGROUND COLOR - Choose the color for the background of the Read More text. A blank field reverts the setting to the default value.
  4. READ MORE BACKGROUND COLOR HOVER - Choose the color for the background of the Read More text on mouse hover. A blank field reverts the setting to the default value.
  5. READ MORE FONT SIZE - Insert the font size for the Read More text using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  6. READ MORE LINE HEIGHT - Insert the line height for the Read More text using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  7. READ MORE TEXT ALIGN - Choose the text align for the Read More text.
  8. READ MORE PADDING - Insert the padding for the Read More text using pixels or percent (for example: 14px or 10%, not 14). The padding is a CSS property that sets the space around the content. The padding can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
  9. READ MORE BORDER RADIUS - Insert the border-radius for the Read More text using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.

Module Style

This module supports a 6 column layout. This means it can have 6, 5, 4, 3, 2 or 1 column for the module layout without assigning each module to a new module position. Each one of the columns from 1 to 6 has these options:

1. Column Options

FavContent Joomla module documentation style main screen

  1. SHOW COLUMN - Choose if this module column should be displayed or not.

2. Image Options

FavContent Joomla module documentation style image

  1. UPLOAD IMAGE - Upload the image for the module column. A blank field reverts the setting to the default value.
  2. SHOW IMAGE LINK - Choose if the image link should be displayed or not.
  3. IMAGE LINK - Insert the URL for the image. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
  4. IMAGE LINK TARGET - Choose the link target of the URL for the image.
  5. IMAGE ALT TEXT - Insert the text for the image Alt. A blank field reverts the setting to the default value.
  6. IMAGE TITLE TEXT - Insert the text for the image title. A blank field reverts the setting to the default value.
  7. IMAGE TITLE EFFECT - Choose a CSS3 effect for the image title. Note that the CSS3 features are not supported by older browsers.

3. Icon Options

FavContent Joomla module documentation style icon

  1. ICON NAME - Insert the Font Awesome icon name (for example: fa-magic or fa-joomla). A blank field reverts the setting to the default value.
  2. ICON EFFECT - Choose a CSS3 effect for the icon. Note that the CSS3 features are not supported by older browsers.
  3. ICON COLOR - Choose the color for the icon. A blank field reverts the setting to the default value.
  4. ICON BACKGROUND COLOR - Choose the color for the background of the icon. A blank field reverts the setting to the default value.
  5. ICON BORDER COLOR - Choose the color for the border of the icon. A blank field reverts the setting to the default value.
  6. SHOW ICON LINK - Choose if the icon link should be displayed or not.
  7. ICON LINK - Insert the URL for the module icon. Note that the link must include http:// or https://.
  8. ICON LINK TARGET - Choose the target of the URL for the icon.

4. Title Options

FavContent Joomla module documentation style title

  1. TITLE TEXT - Insert the text for the title. A blank field reverts the setting to the default value.
  2. TITLE COLOR - Choose the color for the title. A blank field reverts the setting to the default value.
  3. SHOW TITLE LINK - Choose if the link for the title should be displayed or not.
  4. TITLE LINK - Insert the URL for the title. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
  5. TITLE LINK TARGET - Choose the target for the URL of the title.

5. Description Options

FavContent Joomla module documentation description

  1. DESCRIPTION TEXT - Insert the text for the description text. A blank field reverts the setting to the default value.
  2. DESCRIPTION IMAGE/ICON FLOAT - Choose the float for the description text.

5. Read More Options

FavContent Joomla module documentation style readmore

  1. READ MORE TEXT - Insert the text for the Read More text. A blank field reverts the setting to the default value.
  2. READ MORE LINK - Insert the URL for the Read More text. Note that the link must include http:// or https://.
  3. READ MORE LINK TARGET - Choose the target of the URL for the Read More text link.

The module features using CSS3 have limited support for older browsers, so please check the demo first.

Being a responsive module, this Joomla! module has no fixed width. The maximum width of the module is the width of the module position containing the module and/or the width of the device used (desktop, tablet or mobile). To test the responsive behaviour of the module columns, simply adjust the width of the browser window to different sizes.

The Joomla! name is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries. FavThemes is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.