Module Positions Diagram
If no modules are published to a position, the entire area or row will not appear/collapse.
![Module Positions](/home/images/stories/demo/general/position-3.jpg)
La conmemoración de la muerte de nuestro Señor y...
If no modules are published to a position, the entire area or row will not appear/collapse.
There are 12 stylistic module class suffixes, these add a unique style variation to the module: box1-7 and title1-5; and 26 structural suffixes, these affect the layout and metrics of the module.
There are 5 variations to change the module title: title1-5.
An example module using the title1 module class suffix.
An example module using the title2 module class suffix.
An example module using the title3 module class suffix.
An example module using the title4 module class suffix.
An example module using the title5 module class suffix.
There are 7 variations to change the module background: box1-7.
An example module using the box1 module class suffix.
An example module using the box2 module class suffix.
An example module using the box3 module class suffix.
An example module using the box4 module class suffix.
An example module using the box5 module class suffix.
An example module using the box6 module class suffix.
An example module using the box7 module class suffix.
Note: RokTabs and RokNewsPager (as well as RokNewsFlash, RokStories, but these are not included with Clarion), have been replaced by RokSprocket. This demo now showcases RokSprocket, although the legacy module styling remains.
RokTabs is a tabbed content module, standalone and themed. Content is transitioned, either by fade or scroll, powered by Mootools, which can be automatic or manual.
RokFeatureTable offers a stylistic and user friendly solution for displaying tabular based data. It is perfect for price or product comparisons, or essentially, any type of data display that suits a matrix format.
A simple, yet dynamic, interface provides you with the tools to quickly edit the contents of the module. There are a series of parameters allowing for unlimited row, with options for text, link, class and much more, which allows for extensive control.
RokNewsPager is an article previewer and rotator. It displays content articles, in a summarised form and, using mootools based javascript transition, rotates through a series of pages displaying articles in a contracted list format.
RokAjaxSearch is a truly powerful module that brings fantastic search functionality to Joomla, using the powerful and versatile javascript library, Mootools as well as full Google Search integration.
RokAjaxSearch offers AJAX powered real time search results for both your Joomla site content as well Google Search. There are various configuration options and parameters allowing you to enable not only Google web search, but Google Blog search, Google Image search, and Google Video search.
The module is very intuitive, automatically adjusting itself based on your events and event ranges; simply set the number of events and the time range, and RokMiniEvents will do the rest.
Typography is a fundamental part of a template, providing you with the tools to characterise your content and bring it to life. There is a vast array of typography available with Clarion template, as is with our previous releases, from list styles, notice blocks and a diverse number of other elements.
If you are using the TinyMCE editor for HTML typography, go to Extensions → Plugin Manager → TinyMCE 2.0 → Set Code Clean-up on Save to Never.
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibu. Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat.
Use the following format: <p class="dropcap">...</p> (HTML) or [dropcap class="dropcap"]...[/dropcap] (ROKCANDY). You can use any letter, symbol or number.
Praesent rutrum sapien ac felis. Use this format: <p class="dropcap2">...</p> (HTML) or [dropcap class="dropcap2"] ... [/dropcap] (ROKCANDY)
Praesent rutrum sapien ac felis. Use this format: <p class="dropcap3">...</p> (HTML) or [dropcap class="dropcap3"] ... [/dropcap] (ROKCANDY)
Praesent rutrum sapien ac felis. Use this format: <p class="dropcap4">...</p> (HTML) or [dropcap class="dropcap4"] ... [/dropcap] (ROKCANDY)
Praesent rutrum sapien ac felis. Use this format: <p class="dropcap5">...</p> (HTML) or [dropcap class="dropcap5"] ... [/dropcap] (ROKCANDY)
To replicate, use the following formatting: <blockquote><p>....</p></blockquote> (HTML) or [blockquote class="default"]...[/blockquote] (ROKCANDY).
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
To replicate, use the following formatting: <blockquote class="alignleft"><p>....</p></blockquote> (HTML) or [blockquote class="alignleft"]...[/blockquote] (ROKCANDY).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor.
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.
To replicate, use the following formatting: <blockquote class="alignright"><p>....</p></blockquote> (HTML) or [blockquote class="alignright"]...[/blockquote] (ROKCANDY).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor.
This is a sample <pre class="lines">...</pre> (HTML) or, [pre2 class="{lines}"] ... [/pre2] (ROKCANDY) tag: div.modulebox-black div.bx1 { background: url(../images/box_bl.png) 0 100% repeat; } div.modulebox-black div.bx2 { background: url(../images/box_tr.png) 100% 0 repeat; }
This is a sample <pre>...</pre> (HTML) or, [pre class="{lines}"] ... [/pre] (ROKCANDY) tag: div.modulebox-black div.bx1 { background: url(../images/box_bl.png) 0 100% repeat; } div.modulebox-black div.bx2 { background: url(../images/box_tr.png) 100% 0 repeat; }
This is a sample of the Approved style. To replicate, use the following syntax: <p class="approved">....</p> (HTML) or [notice class="approved"] ... [/notice] (ROKCANDY).
This is a sample of the Attention style. To replicate, use the following syntax: <p class="attention">....</p> (HTML) or [notice class="attention"] ... [/notice] (ROKCANDY).
This is a sample of the Notice style. To replicate, use the following syntax: <p class="notice">....</p> (HTML) or [notice class="notice"] ... [/notice] (ROKCANDY).
This is a sample of the Alert style. To replicate, use the following syntax: <p class="alert">....</p> (HTML) or [notice class="alert"] ... [/notice] (ROKCANDY).
To replicate, the following format: <span class="text-icon iconname">...</span> (HTML) or [icon class="icon name"]...[/icon] (ROKCANDY). The class names are listed below, such as "text-icon email".
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="italic">...</em> (HTML) or [emphasis]...[/emphasis] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold">...</em> (HTML) or [emphasisbold]...[/emphasisbold] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold2">...</em> (HTML) or [emphasisbold2]...[/emphasisbold2] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight">...</em> (HTML) or [highlight class="default"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight white">...</em> (HTML) or [highlight class="white"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight black">...</em> (HTML) or [highlight class="black"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight green">...</em> (HTML) or [highlight class="green"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight yellow">...</em> (HTML) or [highlight class="yellow"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight blue">...</em> (HTML) or [highlight class="blue"]...[/highlight] (ROKCANDY)
This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight red">...</em> (HTML) or [highlight class="red"]...[/highlight] (ROKCANDY)
To replicate, use the following format: <ul class="list-icon icon_name"><li>....</li><li>....</li>...</ul> (HTML) or [list class="list-icon icon_name"][li]....[/li][li....[/li][/list] (ROKCANDY). The icon names are listed below, such as "cart".
These list styles are based on the latest CSS3 techniques and are designed to work in modern browsers (will not display properly in IE6-IE8).
To replicate, use the following format: <ul class="class name"><li>....</li><li>....</li>...</ul> (HTML) or [list class="class name"][li]....[/li][li....[/li][/list] (ROKCANDY). The class names are listed below, such as "checkmark red".
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Right TitleYou will need to use the following formatting: <span class="inset-right"> <span class="inset-right-title"> .... </span> ... some content ... </strong> (HTML) or [inset side="right" title="Inset Right Title"] ... some content ...[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Left TitleYou will need to use the following formatting: <span class="inset-left"> <span class="inset-left-title"> .... </span> ... some content ... </strong> (HTML) or [inset side="left" title="Inset Left Title"] ... some content ...[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.
Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.