Setting Up Module Styles

Get Started

Extensions

S5 Accordion Menu
S5 Box
S5 Tab Show
S5 Map it With Google
S5 Quick Contact
S5 Flex Menu
- Drop Down Menu
- Menu Module Example
- Grouped Child Menu
  - Dummy Sample Link
  - Dummy Sample Link
  - Dummy Sample Link
  - Dummy Sample Link
  - Dummy Sample Link
  - Dummy Sample Link
- Menu With No Menu Icon
S5 Live Search
S5 Disqus Comments
S5 MailChimp
S5 Image and Content Fader
S5 Like Me Plugin
S5 Masonry

Sample Drop Down Module

This is an example of a module published to the drop_down row. This row contains 6 modules. To enable the drop down simple publish any module to any of the drop_down_x positions.

Open Panel

Search Our Site

Get Started

Top Row1 Modules

This is an example of a module published to the top_row_1 row. This module is using the class "-white" which can be used on any dark background. This row contains 6 modules, read below for a full description.

white-title module style

This is an example of a module published to the top_row_2 row. This module is using the class " white-title" which can be used on any dark background. This row contains 6 modules, read below for a full description.

dark-title module style

This is an example of a module published to the top_row_3 row, it is shown using the class suffix -white_large. This row contains 6 modules, read below for a full description.

There are no articles in this category. If subcategories display on this page, they may contain articles.

Subcategories

Demo Info

The latest news from the Joomla! Team

Samples

Right

This is an example of a module published to the right position. There are also left, insets, rows, etc. positions and many others, be sure to read the full description. This is the default style that will appear for most module positions in the white body area.

Icon Example

The following is an example of how you can add an icon to any module you desire. All you need to do is enter in the prefix of "s5_icon" in the module suffix followed by the icon class name. For example the suffix used on this class is "s5_icon.ion-android-globe"

The following URL lists all the ion icon classes that you can choose from. You can also use font awesome icon classes and they will function the same way.

View Icons

dark

This is the "dark" module style and can be applied to most module positions.

Split Title Style

This is the "split-title" module style and can be applied to most module positions and can be added to other classes, eg: "dark split-title".

border

This is the "border" module style and can be applied to most module positions.

gray

This is the "gray" module style and can be applied to most module positions.

							
																						highlight 
								
	This is the "highlight1" module style and can be applied to most module positions.

none

This is the "none" module style and can be applied to most module positions.

Bottom Row1 Modules

This is an example of a module published to the bottom_row_1 row. This row contains 6 modules, read above for a full description.

Bottom Row2 Modules

This is an example of a module published to the bottom_row_2 row. This row contains 6 modules, read above for a full description.

Bottom Row3 Modules

This is an example of a module published to the bottom_row_3 row. This row contains 6 modules, read above for a full description.

Sample Sidebar Module

Home

Pages