Ultra Widgets
Just some of the extra things you can do with The X-Cart Ultra Template...
Color ThemesTheme CSS files reside in skin/ultra/css/themes Bootstrap Grid SystemCol 1/2
Col 2/2
Col 1/3
Col 2/3
Col 3/3
Col 1/4
Col 2/4
Col 3/4
Col 4/4
Col 1/5
Col 2/5
Col 3/5
Col 4/5
Col 5/5
Col 1/6
Col 2/6
Col 3/6
Col 4/6
Col 5/6
Col 6/6
TypographyH1 Heading Lorem IspumH2 Heading Lorem IspumH3 Heading Lorem IspumH4 Heading Lorem IspumH5 Heading Lorem IspumH6 Heading Lorem IspumParagraph with class "lead" Normal Paragraph You can use the mark tag to highlight text.
This line of text will render as underlined This line of text is meant to be treated as fine print. This line rendered as bold text. This line rendered as italicized text.
Default Primary Success Info Warning Danger Default Primary Success Info Warning Danger
DOC XLS TXT ZIP EXE MP3 MP4 PPT ButtonsSubheadersH1 Heading Style 1H2 Heading Style 1H3 Heading Style 1H4 Heading Style 1H1 Heading Style 1H2 Heading Style 1H3 Heading Style 1H4 Heading Style 1H1 Heading Style 2H2 Heading Style 2H3 Heading Style 2H4 Heading Style 2H1 Heading Style 2H2 Heading Style 2H3 Heading Style 2H4 Heading Style 2H1 Heading Style 3H2 Heading Style 3H3 Heading Style 3H4 Heading Style 3H1 Heading Style 3H2 Heading Style 3H3 Heading Style 3H4 Heading Style 3Dialogs, Menus & AlertsDialog TitleDialog Content Dialog TitleDialog Content Menu TitleMenu Content Menu TitleMenu Content
Alert info
Alert success
Alert warning
Alert danger
Form ElementsImage Zooming & Lightboxes
Easy Image Zoom <img class="img-fluid" src="{$ImagesDir}/spacer.gif" data-src="//source.unsplash.com/category/nature/800x600" data-action="zoom" alt="Alt" title="Title">
Or {include file="custom/widgets/image_zoom.tpl" image="//source.unsplash.com/category/nature/800x600" alt="Alt" title=""}
Image Lightbox Gallery     <div class="row image-gallery text-xs-center">
Portfolio{include file="custom/widgets/widget_portfolio.tpl"}
Image GalleryUpload images and/or folders of images to /uploads/gallery and it will auto-populate! {include file="custom/widgets/widget_image_gallery.tpl"}
Video PlayersVideo Lightbox Gallery    
<div class="row video-gallery text-xs-center">
{include file="custom/widgets/widget_video.tpl" type="youtube" id="xYkz0Ueg0L4"}
{include file="custom/widgets/widget_video.tpl" type="vimeo" id="165030056"}
Test Video YouTubeLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem. Quisque quis dapibus tellus, a dictum augue. Phasellus eu nisl feugiat, congue libero at, ultrices lacus. Pellentesque non sapien magna. Aenean malesuada eros nec lacinia vehicula. Mauris elementum enim odio, at ornare arcu ullamcorper sed. Maecenas ligula nunc, rhoncus sed tortor id, aliquam venenatis quam. Fusce eleifend fringilla est. Nullam id ultricies purus. Ut hendrerit consequat condimentum. Donec condimentum ut nulla elementum volutpat. {include file="custom/widgets/widget_video.tpl" type="youtube" id="xYkz0Ueg0L4" align="left" title="Test Video YouTube" descr="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem. Quisque quis dapibus tellus, a dictum augue. Phasellus eu nisl feugiat, congue libero at, ultrices lacus. Pellentesque non sapien magna. Aenean malesuada eros nec lacinia vehicula. Mauris elementum enim odio, at ornare arcu ullamcorper sed. Maecenas ligula nunc, rhoncus sed tortor id, aliquam venenatis quam. Fusce eleifend fringilla est. Nullam id ultricies purus. Ut hendrerit consequat condimentum. Donec condimentum ut nulla elementum volutpat."}
Test Video VimeoLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem. Quisque quis dapibus tellus, a dictum augue. Phasellus eu nisl feugiat, congue libero at, ultrices lacus. Pellentesque non sapien magna. Aenean malesuada eros nec lacinia vehicula. Mauris elementum enim odio, at ornare arcu ullamcorper sed. Maecenas ligula nunc, rhoncus sed tortor id, aliquam venenatis quam. Fusce eleifend fringilla est. Nullam id ultricies purus. Ut hendrerit consequat condimentum. Donec condimentum ut nulla elementum volutpat. {include file="custom/widgets/widget_video.tpl" type="vimeo" id="165030056" align="right" title="Test Video Vimeo" descr="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem. Quisque quis dapibus tellus, a dictum augue. Phasellus eu nisl feugiat, congue libero at, ultrices lacus. Pellentesque non sapien magna. Aenean malesuada eros nec lacinia vehicula. Mauris elementum enim odio, at ornare arcu ullamcorper sed. Maecenas ligula nunc, rhoncus sed tortor id, aliquam venenatis quam. Fusce eleifend fringilla est. Nullam id ultricies purus. Ut hendrerit consequat condimentum. Donec condimentum ut nulla elementum volutpat."}
Test Video YouTubeLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem. Quisque quis dapibus tellus, a dictum augue. Phasellus eu nisl feugiat, congue libero at, ultrices lacus. Pellentesque non sapien magna. Aenean malesuada eros nec lacinia vehicula. Mauris elementum enim odio, at ornare arcu ullamcorper sed. Maecenas ligula nunc, rhoncus sed tortor id, aliquam venenatis quam. Fusce eleifend fringilla est. Nullam id ultricies purus. Ut hendrerit consequat condimentum. Donec condimentum ut nulla elementum volutpat. {include file="custom/widgets/widget_video.tpl" type="youtube" id="Lrq1ZTjqUHs" align="center" title="Test Video YouTube" descr="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem. Quisque quis dapibus tellus, a dictum augue. Phasellus eu nisl feugiat, congue libero at, ultrices lacus. Pellentesque non sapien magna. Aenean malesuada eros nec lacinia vehicula. Mauris elementum enim odio, at ornare arcu ullamcorper sed. Maecenas ligula nunc, rhoncus sed tortor id, aliquam venenatis quam. Fusce eleifend fringilla est. Nullam id ultricies purus. Ut hendrerit consequat condimentum. Donec condimentum ut nulla elementum volutpat."}
Test Video YouTubeLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem. {include file="custom/widgets/widget_video.tpl" type="youtube" id="xYkz0Ueg0L4" align="center" title="Test Video YouTube" descr="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem."}
Test Vimeo YouTubeLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem. {include file="custom/widgets/widget_video.tpl" type="vimeo" id="165030056" align="center" title="Test Vimeo YouTube" descr="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem."}
Test MP4 FileLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem. {include file="custom/widgets/widget_video.tpl" type="file" id="//www.xcartmods.co.uk/ultra/md.mp4" align="center" title="Test MP4 File" descr="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at sollicitudin sem."}
Responsive YouTube Video PlaylistPlaylist TitlePlaylist Subtitle #hashtag {include file="custom/widgets/widget_video_playlist.tpl" id="1" playlistID="PLSSPBo7OVSZvJtRrcF5CVSjRkmH9eNWA3"}
Audio PlayersAlexander Robotnick - Problemes DAmourDub Version {include file="custom/widgets/widget_audio_file.tpl" audio_file="//www.xcartmods.co.uk/ultra/Alexander Robotnick - Problemes DAmour (Dub Version).mp3" title="Alexander Robotnick - Problemes DAmour" description="Dub Version"}
Play Sound Play Sound Play Sound
<a href="javascript:;" class="btn btn-primary mb4" onclick="$.playSound('./skin/ultra/custom/sounds/low');">Play Sound</a>
Modals, Tooltips & PopoversSliders & CarouselsCarousel Title      {include file="custom/widgets/widget_ticker.tpl" heading="h3" center=true}
{include file="custom/widgets/widget_basic_slider_01.tpl" animationIn="bounceInRight" animationOut="bounceOutLeft" stopOnHover="true" loop="true" delay="5000"}
{include file="custom/widgets/widget_basic_slider_02.tpl" animationIn="zoomInUp" animationOut="flipOutX" stopOnHover="true" loop="true" delay="5000"}
{include file="custom/widgets/widget_basic_slider_03.tpl" animationIn="zoomIn" animationOut="zoomOut" stopOnHover="true" loop="true" delay="5000"}
{include file="custom/widgets/widget_basic_slider_04.tpl" animationIn="flipInX" animationOut="shake" stopOnHover="true" loop="true" delay="5000"}{
{include file="custom/widgets/widget_basic_slider_05.tpl" animationIn="lightSpeedIn" animationOut="rotateOut" stopOnHover="true" loop="true" delay="5000"}
PromotionsPromo TitleConsectetur adipiscing elitBlandit a mauris vitae, scelerisque pellentesque tortor {include file="custom/widgets/widget_promo_box.tpl" height="400" bg="//source.unsplash.com/category/nature/1140x400" color="white" align="center" title="Promo Title" subtitle="Consectetur adipiscing elit" text="Blandit a mauris vitae, scelerisque pellentesque tortor" button="success" link="#nogo" cta="Call to Action"}
{include file="custom/widgets/widget_promotions.tpl" title="Promotions Carousel" pager=true effect=#promos_effect# bgcolor=#promos_bg_color# basic=#promos_basic#}
{include file="custom/widgets/widget_promo_icons.tpl"}
Breakout ContainerThis allows you to place full-width content outside of the parent container<div class="breakout">{include file="custom/widgets/widget_promo_box.tpl" height="400" bg="//source.unsplash.com/category/nature/1990x400" color="white" align="center" title="Breakout Container" subtitle="This allows you to place full-width content outside of the parent container" button="success" link="#nogo" cta=""}</div>
Flip CardsThree types: hover, click and press... 
HoverLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur sed tortor consequat lacinia. Aliquam erat volutpat. HOVER Anywhere to Reveal 
Flipped!Suspendisse eu erat bibendum, tempor diam quis, lobortis erat. Nulla sodales, orci sit amet tincidunt mollis. 
ClickLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur sed tortor consequat lacinia. Aliquam erat volutpat. CLICK Anywhere to Toggle 
Flipped!Suspendisse eu erat bibendum, tempor diam quis, lobortis erat. Nulla sodales, orci sit amet tincidunt mollis. 
PressLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur sed tortor consequat lacinia. Aliquam erat volutpat. 
{include file="custom/widgets/widget_flip_cards.tpl"}
Category MenusBasic{include file="custom/menus/sidebar_category_menu.tpl" type="basic" title="Basic"}
Sliding{include file="custom/menus/sidebar_category_menu.tpl" type="sliding" title="Sliding"}
Drill Down{include file="custom/menus/sidebar_category_menu.tpl" type="drilldown" title="Drill Down"}
Category Table{include file="custom/widgets/widget_categories_table.tpl" title=false more=true card=false col1="success" col2="active" col3="active" single_cats_last=true}
No featured categories... {include file="custom/widgets/widget_featured_categories.tpl" style="1"}
No featured categories... {include file="custom/widgets/widget_featured_categories.tpl" style="2"}
Google Maps{include file="custom/widgets/widget_google_map.tpl" address="Stone Henge, Wiltshire" height="240" type="roadmap" zoom="5" dialog=false title=""}
Testimonials
{include file="custom/widgets/widget_testimonials.tpl" nodialog=true}
No posts yet... {include file="custom/widgets/widget_blog_posts.tpl" style="1"}
No posts yet... {include file="custom/widgets/widget_blog_posts.tpl" style="2"}
No posts yet... {include file="custom/widgets/widget_blog_posts.tpl" style="3"}
Alternative Accordion StylesPanel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Panel 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque aliquam massa, id eleifend risus rutrum id. Sed sed metus laoreet, adipiscing libero tempus, adipiscing nibh. Ut facilisis dapibus est, quis malesuada justo rutrum non. Fusce porttitor lacinia purus ut dictum. Fusce at vestibulum massa, id hendrerit ante. Sed egestas justo ac dui accumsan, facilisis accumsan libero ornare. Pellentesque sodales dictum aliquet. Curabitur neque lorem.
Responsive Tabs to Accordions20 colours available, left / center / right / justified alignments and optional border-radiuses...
Tab 1 Content...
Tab 2 Content...
Tab 3 Content...
Tab 1 Content...
Tab 2 Content...
Tab 3 Content...
Tab 1 Content...
Tab 2 Content...
Tab 3 Content...
Tab 1 Content...
Tab 2 Content...
Tab 3 Content...
Tab 4 Content...
Tab 5 Content...
Tab 6 Content...
Tab 7 Content...
Tab 8 Content...
Tab 9 Content...
Tab 10 Content...
Tab 11 Content...
Tab 12 Content...
Tab 13 Content...
Tab 14 Content...
Tab 15 Content...
Tab 16 Content...
Responsive Tables
Match Heights
Content
Content Content Content
Content
Content Content
Content
Content
Content
Dropdown Menus |
