Craft template

Menu
  • Home
  • Store
  • Features
    • Module Positions
    • Module Variations
    • Navigation Styles
      • Main Navigation
      • Vertical Menus
      • Horizontal Menus
    • Typography
      • Image Styles
      • Button Styles
      • Bootstrap Styles
      • List Styles
      • Icon Styles
    • Error 404 Page
    • Offline Page
  • Joomla
    • Joomla Content
      • Category Blog
      • List All Categories
      • Single Article
      • Featured Articles
      • Archived Article
      • Tagged Items
      • List of Tagged Items
      • List of All Tags
      • Search
      • Smart Search
      • Single News Feed
      • Iframe Wrapper
    • Joomla Modules
  • Extensions
  • Docs

Craft template

  • login / register
cart (0)
  • Home
  • Store
  • Features
    • Module Positions
    • Module Variations
    • Navigation Styles
      • Main Navigation
      • Vertical Menus
      • Horizontal Menus
    • Typography
      • Image Styles
      • Button Styles
      • Bootstrap Styles
      • List Styles
      • Icon Styles
    • Error 404 Page
    • Offline Page
  • Joomla
    • Joomla Content
      • Category Blog
      • List All Categories
      • Single Article
      • Featured Articles
      • Archived Article
      • Tagged Items
      • List of Tagged Items
      • List of All Tags
      • Search
      • Smart Search
      • Single News Feed
      • Iframe Wrapper
    • Joomla Modules
  • Extensions
  • Docs

The 100+ module variations customize the style of the module content. To adapt the variations for your project, use the preset color and layout styles or add any Font Awesome icon to the module titles!

  • Home /
  • Features /
  • Module Variations

Light Background

Add favth-light as a Module Class Suffix inside the Advanced options of the module.

Color Background

Use favth-color as a Module Class Suffix inside the Advanced options of the module.

Dark Background

Use favth-dark as a Module Class Suffix inside the Advanced options of the module.

Clear Background

Use favth-clear as a Module Class Suffix inside the Advanced options of the module.

Pattern

Add favth-pattern as a Module Class Suffix inside the Advanced options of the module for this style.

Pattern Light

Add favth-pattern-light as a Module Class Suffix inside the Advanced options of the module for this style.

Pattern Top

Add favth-pattern-top as a Module Class Suffix inside the Advanced options of the module.

Pattern Bottom

Add favth-pattern-bottom as a Module Class Suffix inside the Advanced options of the module.

Pattern Top Light

Add favth-pattern-top-light as a Module Class Suffix inside the Advanced options of the module.

Pattern Bottom Light

Add favth-pattern-bottom-light as a Module Class Suffix inside the Advanced options of the module.

Icon Light

Use favth-icon-light as a Module Class Suffix inside the Advanced options of the module.

Icon Color

Use favth-icon-color as a Module Class Suffix inside the Advanced options of the module.

Icon Dark

Use favth-icon-dark as a Module Class Suffix inside the Advanced options of the module.

Icon Clear

Use favth-icon-clear as a Module Class Suffix inside the Advanced options of the module.

Line Style

Use favth-line as a Module Class Suffix inside the Advanced options.

Border Style

Use favth-border as a Module Class Suffix inside the Advanced options of the module.

Shadow Style

Use favth-shadow as a Module Class Suffix inside the Advanced options of the module to apply this style.

Stack Style

Use favth-stack as a Module Class Suffix inside the Advanced options of the module.

Styles, size and alignment for titles

Each background, icon or layout style can be further customized with additional styles, size and alignment variations for module titles:

Title Line Style

title subtitle here

Use favth-title-line as a Module Class Suffix inside the Advanced options of the module.

Title Border Style

title subtitle here

Use favth-title-border as a Module Class Suffix inside the Advanced options of the module.

Title Symbol Style

title subtitle here

Use favth-title-symbol as a Module Class Suffix inside the Advanced options of the module.

Title Plus Style

title subtitle here

Use favth-title-plus as a Module Class Suffix inside the Advanced options of the module.

Large Size

Use favth-large as a Module Class Suffix inside the Advanced options of the module.

Medium Size

Use favth-medium as a Module Class Suffix inside the Advanced options of the module.

Default Size

Use the default size of the title to compare it with the large, medium and small module variations.

Small Size

Use favth-small as a Module Class Suffix inside the Advanced options of the module.

Left Align

Use favth-left as a Module Class Suffix inside the Advanced options of the module.

Center Align

Use favth-center as a Module Class Suffix inside the Advanced options of the module.

Right Align

Use favth-right as a Module Class Suffix inside the Advanced options of the module.

Title Dashed

Use favth-title-dashed as a Module Class Suffix inside the Advanced options of the module.

Title Dashed Color

Use favth-title-dashed-color as a Module Class Suffix inside the Advanced options of the module.

Title Dashed Top

Use favth-title-dashed-top as a Module Class Suffix inside the Advanced options of the module.

Mix background styles, icon styles, layout styles and title styles

Each one of the module variations can be used on its own or with other module variations, creating 100+ combinations. Here are some examples:

Title here

For this style, use the following variations:

favth-color favth-line favth-shadow

Title here

For this style, use the following variations:

favth-color favth-medium favth-line

Title here

subtitle here

For this style, use the following variations:

favth-color favth-large favth-stack

Title here

For this style, use the following variations:

favth-light favth-line favth-shadow

Title here

For this style, use the following variations:

favth-light favth-medium favth-line

Title here

subtitle here

For this style, use the following variations:

favth-light favth-large favth-stack

Title here

For this style, use the following variations:

favth-dark favth-line favth-shadow

Title here

For this style, use the following variations:

favth-dark favth-medium favth-line

Title here

subtitle here

For this style, use the following variations:

favth-dark favth-large favth-stack

What are the module variations?

Each template has 100+ module variations that use Joomla's Module Class Suffix to customize the appearance of the modules. Using the template settings, the module variations can be further customized with new colors inside the Settings tab:

FavThemes tutorial for module variations using the template settings

How to use the module variations

Choose a module variation from the examples above and insert that Module Class Suffix in the Advanced tab of the module, either alone or with other variations. If no variations are needed, simply leave the Module Class Suffix field blank.

FavThemes tutorial for module variations

For the variations to work, you need to insert a space before the name of the variation (by pressing the spacebar key from your keyboard).

How to add icons to the title of the module

Choose any icon from Font Awesome and insert the name of the icon in the HEADER CLASS field in the Advanced tab of the module. If you do not want to use any icon for the title of the module, then simply leave the Header Class field blank.

FavThemes tutorial for module title icons

How to use the module subtitle

One of the new features of our premium Joomla! templates is the option to add a subtitle to any module. Inside the module settings, just add the subtitle by separating the title and the subtitle with a "|" (pipe) character:

FavThemes tutorial for the module subtitle back-end

This feature will add a short description (subtitle) under the module title. The module subtitle is an optional feature. If you do not want to use a subtitle, just use the module's title field without the "|" (pipe) character.

FavThemes tutorial for the module subtitle front-end

The subtitles can be customized by using the template settings, with custom parameters for the color, font size, line height, padding, text align and text transform for the subtitles of the modules.

FavThemes tutorial for the module subtitle template settings

about craft

demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

more & more

  • Home
  • Store
  • Features
  • Joomla
  • Extensions
  • Docs

find us

88 Some Street, 12345,
Craft City

012 345 678 910

www.example.com

on the map

© 2021 FavThemes