ioomeXt Roundabout Documenation
First of all generate a Category in Joomla Content. All Articles published in this category will be displayed in the ioomeXt Roundabout.
There are a lot of parameters in the Backend to customize the look & feel of the module.
Basic Options
| Category | Select the category from which content articles should be published | |
| No. of Items | Max. number of items shown in Roundabout | |
| Items Ordering | Sort the shown items by the field | |
| Items Ordering Direction | Sort the shown items by this direction | |
| Include jQuery | Include jQuery and if it shoul be included, which jQuery version should be used. ind case other Extensions or templates already include jQuery you can disable the inclusion by selecting "No". | |
| jQuery noConflict | Use jQuery in noConflict Mode. |
Global Layout Settings
| Area Width | Width of the Area for the Roundabout | 900px |
| Area Height | Height of the Area for the Roundabout | 250px |
| Area Background Color | Background Color for Item Area | transparent |
| Display Outside Area | Display Items Outside the Main Area | |
| Item: Padding | Inside Padding of Items | 2px |
| Item: Height | Height of Items | 150px |
| Item: Width | Width of Items | 250px |
| Item: Background Color | Background Color for Items | #FFFFFF |
| Item: Border | Border Style for Items | 1px solid #999 |
| Item: Border Radius | Border Radius for Items | 5px |
| Item: Shadow | CSS - Shadow - Style for Items | 0 2px 4px rgba(0, 0, 0, 0.4) |
Item Layout Settings
| Article Intro Image as Background | Use intro image of content item as background image | |
| 1. Content Image as Background | Use 1. content image of content item as background image | |
| Use Plaintext of Articles | always use plaintext and disable html-tags in content text | |
| Select a template | select a template from the pre-defined templates. Select "- None Selected -" to use custom template in next field. | |
| Item Template | Enter a custom template to use for displaying the roundabout items. e.g.<h1 style="background: #545454; color: #EE7F01; margin: 0px; padding: 10px 0px;">
{title}
</h1>
<div style="height: 290px; line-height: 290px;">
<img src="/{content_image}" style="width: 350px; vertical-align: middle;"/>
</div>
<div style="height: 150px; background: #545454; color: #FFFFFF; margin: 0px; padding: 10px 0px;">
{plaintext}
</div>
possible parameters in the template: {url}, {title}, {plaintext}, {introtext}, {fulltext}, {intro_image}, {content_image}, {readmore} |
Image Options
| Resize Background Images | If an image should be used as background image for the item roundabout can resize the images by the given item-height and item-width. | |
| Renew Resized Images | You can define whether the resized images should be created new on every reload of the module. |
Animation Settings
| Style | Different Styles of animating an displaying the roundabout items. | |
| Duration in ms | The length of time it will take to move from one child element being in focus to another (when an animation is triggered). | |
| Enable Drag | Allows a user to rotate by clicking and dragging the area itself. | |
| Autoplay | When true, it will automatically advance the moving elements to the next child at a regular interval given in Autoplay Duration | |
| Autoplay Duration | The length of time (in milliseconds) between animation triggers when autoplay is playing | |
| Pause Autoplay on Hover | When true, it will pause autoplay when the user moves the cursor over the Roundabout container. | |
| Navigation Position | Position of Navigation Arrows | |
| Image for Next | Select Image for Next Navigation | |
| Image for Prev | Select Image for Prev Navigation |
Custom CSS Settings
| Area Custom CSS | Custom CSS Setting for Background Area. These Settings will be applied to the specific background area of the single roundabout instance. | |
| Item Custom CSS | Custom CSS Setting for Item Area. These Settings will be applied to the specific item area of the single roundabout instance on all items. | |
| Global Custom CSS | Here you can define custom css settings. Each item of the Roundabout can be addressed invidual by using #ITEM_NO, e.g. #ITEM_1
#ITEM_1 {background-image: linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -o-linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -moz-linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -webkit-linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -ms-linear-gradient(bottom, rgb(129,135,193) 45%, rgb(155,162,232) 73%, rgb(186,195,255) 87%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.45, rgb(129,135,193)),
color-stop(0.73, rgb(155,162,232)),
color-stop(0.87, rgb(186,195,255))
);}
#ITEM_2 {background-image: linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -o-linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -moz-linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -ms-linear-gradient(bottom, rgb(229,124,114) 10%, rgb(255,162,149) 55%, rgb(255,195,179) 78%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.1, rgb(229,124,114)),
color-stop(0.55, rgb(255,162,149)),
color-stop(0.78, rgb(255,195,179))
);}
#ITEM_3 {background-image: linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -o-linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -moz-linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -webkit-linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -ms-linear-gradient(bottom, rgb(133,130,8) 4%, rgb(160,156,34) 52%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.04, rgb(133,130,8)),
color-stop(0.52, rgb(160,156,34))
);}
#ITEM_4 {background-image: linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -o-linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -moz-linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -webkit-linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -ms-linear-gradient(bottom, rgb(154,226,13) 20%, rgb(185,255,39) 60%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.2, rgb(154,226,13)),
color-stop(0.6, rgb(185,255,39))
);}
#ITEM_5 {background-image: linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -o-linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -moz-linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -ms-linear-gradient(bottom, rgb(95,3,99) 22%, rgb(124,29,129) 61%, rgb(162,56,155) 81%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.22, rgb(95,3,99)),
color-stop(0.61, rgb(124,29,129)),
color-stop(0.81, rgb(162,56,155))
);}
|
if you have any further questions regarding this modules please feel free to contact us