JOOMLA

JOOMLA (2)

Martes, 10 Septiembre 2019 10:19

MODULE VARIATIONS

Escrito por

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!

Light Background

Use 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.

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:

Large

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.

 
 

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

Martes, 10 Septiembre 2019 10:18

MODULE POSITIONS

Escrito por

Topbar1

This is the topbar1 module position. Use it for module content.

Topbar2

This is the topbar2 module position. Use it for module content.

Topbar3

This is the topbar3 module position. Use it for module content.

Topbar4

This is the topbar4 module position. Use it for module content.

Topbar5

This is the topbar5 module position. Use it for module content.

Topbar6

This is the topbar6 module position. Use it for module content.

Slide

This is the slide module position. Use this module position only for publishing the slideshow module and the slide images. Use the template parameters to set up the maximum width of the slideshow module position.

Intro1

This is the intro1 module position. Use it for module content.

Intro2

This is the intro2 module position. Use it for module content.

Intro3

This is the intro3 module position. Use it for module content.

Intro4

This is the intro4 module position. Use it for module content.

Intro5

This is the intro5 module position. Use it for module content.

Intro6

This is the intro6 module position. Use it for module content.

Breadcrumbs

This is the breadcrumbs module position. Use it as a secondary navigation which shows the page you are on and how to find your way back to the homepage.

Lead1

This is the lead1 module position. Use it for module content.

Lead2

This is the lead2 module position. Use it for module content.

Lead3

This is the lead3 module position. Use it for module content.

Lead4

This is the lead4 module position. Use it for module content.

Lead5

This is the lead5 module position. Use it for module content.

Lead6

This is the lead6 module position. Use it for module content.

Promo1

This is the promo1 module position. Use it for module content.

Promo2

This is the promo2 module position. Use it for module content.

Promo3

This is the promo3 module position. Use it for module content.

Promo4

This is the promo4 module position. Use it for module content.

Promo5

This is the promo5 module position. Use it for module content.

Promo6

This is the promo6 module position. Use it for module content.

Prime1

This is the prime1 module position. Use it for module content.

Prime2

This is the prime2 module position. Use it for module content.

Prime3

This is the prime3 module position. Use it for module content.

Prime4

This is the prime4 module position. Use it for module content.

Prime5

This is the prime5 module position. Use it for module content.

Prime6

This is the prime6 module position. Use it for module content.

Showcase1

This is the showcase1 module position. Use it for module content.

Showcase2

This is the showcase2 module position. Use it for module content.

Showcase3

This is the showcase3 module position. Use it for module content.

Showcase4

This is the showcase4 module position. Use it for module content.

Showcase5

This is the showcase5 module position. Use it for module content.

Showcase6

This is the showcase6 module position. Use it for module content.

Feature1

This is the feature1 module position. Use it for module content.

Feature2

This is the feature2 module position. Use it for module content.

Feature3

This is the feature3 module position. Use it for module content.

Feature4

This is the feature4 module position. Use it for module content.

Feature5

This is the feature5 module position. Use it for module content.

Feature6

This is the feature6 module position. Use it for module content.

Focus1

This is the focus1 module position. Use it for module content.

Focus2

This is the focus2 module position. Use it for module content.

Focus3

This is the focus3 module position. Use it for module content.

Focus4

This is the focus4 module position. Use it for module content.

Focus5

This is the focus5 module position. Use it for module content.

Focus6

This is the focus6 module position. Use it for module content.

Portfolio1

This is the portfolio1 module position. Use it for module content.

Portfolio2

This is the portfolio2 module position. Use it for module content.

Portfolio3

This is the portfolio3 module position. Use it for module content.

Portfolio4

This is the portfolio4 module position. Use it for module content.

Portfolio5

This is the portfolio5 module position. Use it for module content.

Portfolio6

This is the portfolio6 module position. Use it for module content.

Screen1

This is the screen1 module position. Use it for module content.

Screen2

This is the screen2 module position. Use it for module content.

Screen3

This is the screen3 module position. Use it for module content.

Screen4

This is the screen4 module position. Use it for module content.

Screen5

This is the screen5 module position. Use it for module content.

Screen6

This is the screen6 module position. Use it for module content.

Top1

This is the top1 module position. Use it for module content.

Top2

This is the top2 module position. Use it for module content.

Top3

This is the top3 module position. Use it for module content.

Top4

This is the top4 module position. Use it for module content.

Top5

This is the top5 module position. Use it for module content.

Top6

This is the top6 module position. Use it for module content.

Maintop1

This is the maintop1 module position. Use it for module content.

Maintop2

This is the maintop2 module position. Use this module position for module content that should be displayed on top of the articles.

Maintop3

This is the maintop3 module position. Use it for module content.

Sidebar1

This is the sidebar1 module position. Use it for module content next to the articles.

 

This is the article. Add content to your articles such as text, images and links and structure your articles into categories. All the article and component content is placed here.

Sidebar2

This is the sidebar2 module position. Use it for module content next to the articles.

Mainbottom1

This is the mainbottom1 module position. Use it for module content.

Mainbottom2

This is the mainbottom2 module position. Use this module position for module content that should be displayed at the bottom of the articles.

Mainbottom3

This is the mainbottom3 module position. Use it for module content.

Bottom1

This is the bottom1 module position. Use it for module content.

Bottom2

This is the bottom2 module position. Use it for module content.

Bottom3

This is the bottom3 module position. Use it for module content.

Bottom4

This is the bottom4 module position. Use it for module content.

Bottom5

This is the bottom5 module position. Use it for module content.

Bottom6

This is the bottom6 module position. Use it for module content.

Note1

This is the note1 module position. Use it for module content.

Note2

This is the note2 module position. Use it for module content.

Note3

This is the note3 module position. Use it for module content.

Note4

This is the note4 module position. Use it for module content.

Note5

This is the note5 module position. Use it for module content.

Note6

This is the note6 module position. Use it for module content.

Base1

This is the base1 module position. Use it for module content.

Base2

This is the base2 module position. Use it for module content.

Base3

This is the base3 module position. Use it for module content.

Base4

This is the base4 module position. Use it for module content.

Base5

This is the base5 module position. Use it for module content.

Base6

This is the base6 module position. Use it for module content.

Block1

This is the block1 module position. Use it for module content.

Block2

This is the block2 module position. Use it for module content.

Block3

This is the block3 module position. Use it for module content.

Block4

This is the block4 module position. Use it for module content.

Block5

This is the block5 module position. Use it for module content.

Block6

This is the block6 module position. Use it for module content.

User1

This is the user1 module position. Use it for module content.

User2

This is the user2 module position. Use it for module content.

User3

This is the user3 module position. Use it for module content.

User4

This is the user4 module position. Use it for module content.

User5

This is the user5 module position. Use it for module content.

User6

This is the user6 module position. Use it for module content.

Map

This is the map module position. Use this module position only for publishing the FavLocation module or any other extension that requires a full width module position.

Debug

This is the debug module position. Use this module position to show debug information under the footer.