The Top-a position, using its default module styling.
The Top-b position, using its default module styling.
The Top-c position, using its default module styling.
The Top-d position, using its default module styling.
The Top-e position, using its default module styling.
The Top-f position, using its default module styling.
This is the Header-a module position, using the ribbon8 module class suffix.
This is the Header-d module position, using its default module styling.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sem ut ipsum vestibulum euismod. Mauris et massa porta leo facilisis feugiat. Suspendisse id neque a sem facilisis blandit. Aliquam sem leo, commodo ut, rutrum auctor, iaculis.This is the Showcase-a module position, which is using default module styling.
This is the Showcase-b module position, which is using default module styling.
This is the Showcase-e module position, which is using default module styling.
This is the Showcase-f module position, which is using default module styling.
This is the Content-top-a module position, using the ribbon3 module class suffix.
This is the Content-top-c module position, using its default module styling.
Module Variations allow for the individual styling of each module within a position, without it being global. Code wise, this is achieved by adding a class into the module code which loads from the Module Class Suffix field in the Module Manager. The theme CSS adjusts accordingly.
Enter any available suffixes at Extensions → Module Manager → Module → Module Class Suffix
There are 4 types of suffix: box1-8, ribbon1-8, footer and flush.
The Ribbon style modifies the module header with an under-wrapping ribbon graphic. Therefore, this style is best placed in the sidebar or the left most module in a row so overlap can occur. The Box style adds a colored block element around the module. Both can be placed inside any white areas: Feature, MainTop/Bottom, Content-Top/Bottom, Sidebar, Bottom & Footer. These will work in the Header, Showcase & Top positions but some may not blend as well visually.
Footer adds a single, solid, grey bar behind the module header to allow for a continuous bar across an entire module row - also confined to the white module areas. Flush will disable all padding and margin to the module for a tighter fit.
This is the Content-bottom-a module position, using the ribbon4 module class suffix.
This is the Content-bottom-c module position, using its default module styling.
This is the Mainbottom-a module position, using the ribbon5 module class suffix.
This is the Mainbottom-b module position, using the box2 module class suffix.
This is the Mainbottom-e module position, which is using default module styling.
This is the Mainbottom-f module position, using the box6 module class suffix.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sem ut ipsum vestibulum euismod. Mauris et massa porta leo facilisis feugiat. Suspendisse id neque a sem facilisis blandit. Aliquam sem leo, commodo ut, rutrum auctor, iaculis nec, eros. Aenean massa. Mauris tincidunt.