This is a sample module published to the sidebar_top position, using the -sidebar module class suffix. There is also a sidebar_bottom position below the menu.
This is a sample module published to the sidebar_bottom position, using the -sidebar module class suffix. There is also a sidebar_top position below the search.
This plugin adds Disqus comments and links to any Joomla article or blog view, it can be demo'd at the bottom of this page. Disqus is a powerful and free comment system that will integrate into any website.
Features at a glance
Specify your Disqus shortname
Select a language
Specify which categories will use the plugin
Specify individual pages to use the plugin
Enable or disable the comments link on the category listing
Enable or disable the comments link on the full article
Enable or disable the comments link on the featured articles
The full page scroll option takes each row of Vertex and sets it to the height of your screen. With the arrow buttons of your keyboard or the vertical scrolling of your mouse the screen will jump to the next section. Each row that has modules published to it will show as the full height of your screen. To demo this check out the homepage of this demo. You can enable on the homepage only or have it show on all pages. We recommend that it shows only on the homepage.
You can place the below code on any DIV directly as a child to <div id="s5_body_padding"> and it will make it show up full screen.
class="s5_slidesection"
The below screenshot shows the admin area under the "layout" area of Vertex. You simply start adding names for the row names and then it will be enabled. Be sure to separate them by commas. You can enable the full page scroll to just show on the homepage only.
Fullscreen scroll navigation that shows on the right hand side of yoursite:
Occasionally we need to use custom HTML to obtain the layouts shown on our demos in specific modules. The code below is what was used on this template. It is best to enter this code directly into the HTML editor function of your editor. Some area may require that you enable the Ion Icons (Under General) and Scroll Reveal (Under Javascripts) features in the template configuration.
Image and Content Fader:
The S5 Image and Cotent Fader is published custom_1 and the slides use only the slide text; make sure the titles are turned off. The custom html used for the slides is found below.
<span class="iacf_title">Make a <span class="highlight1_color">Difference</span>
Together</span>
<span class="iacf_title_sub">Join our teams around the world</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum risus
nisi, ut feugiat ex finibus quis. Nunc varius rhoncus ligula, eu blandit nisi
dignissim non. Vivamus ullamcorper sapien ut leo iaculis, et egestas neque
maximus. Ut vitae neque nisi. Maecenas commodo turpis a finibus cursus. Sed eu
sapien id nisl aliquet semper sit amet sit amet eros.
</span>
Transform a Child's Life:
This is a custom html module that is published to custom_1.
These are custom html modules that are intended to be published together. The "We Raise Support" module is published to top_row1_1 and use the class suffix "white". The top boxes are published to top_row2_1 and use no additional class, but do require Scroll Reveal to be enabled. The background of this row can be changed in the template configuration under Main/Layout.
We Raise Support:
<div class="top_text_above_boxes">
<div class="text_with_sub_centered">
<div class="title_with_sub_centered_title">We raise support for needy children
around the world!</div>
Donec vel cursus libero. Ut eu lectus commodo, condimentum felis at, bibendum
felis. Praesent tincidunt massa In.
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
Top Boxes:
<div class="top_boxes">
<a href="index.php/features-mainmenu-47/template-specific-features">
<div class="top_box" data-sr="enter left, over 0.8s, move 300px, wait 0.4s">
<div class="top_box_inner">
<div class="top_box_inner2">
<img alt="" src="images/top_box1.png" />
<h3>Water Fund</h3>
<span>Donate To Provide Clean Water</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum malesuada eu
velit in venenatis. In at turpis sed elit bibendum imperdiet ut in urna orbi
urna.
</div>
</div>
</div>
</a>
<a href="index.php/features-mainmenu-47/template-specific-features">
<div class="top_box" data-sr="enter left, over 0.8s, move 300px, wait 0.2s">
<div class="top_box_inner">
<div class="top_box_inner2">
<img alt="" src="images/top_box2.png" />
<h3>Adopt Now</h3>
<span>Children Waiting For Homes</span>
In at turpis sed elit bibendum imperdiet ut in urna orbi urna. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Vestibulum malesuada eu velit in
venenatis.
</div>
</div>
</div>
</a>
<a href="index.php/features-mainmenu-47/template-specific-features">
<div class="top_box" data-sr="enter left, over 0.8s, move 300px">
<div class="top_box_inner">
<div class="top_box_inner2">
<img alt="" src="images/top_box3.png" />
<h3>Fresh Air</h3>
<span>Inner City Youth Projects</span>
Vestibulum malesuada eu velit in venenatis lorem ipsum dolor sit amet,
consectetur adipiscing elit. In at turpis sed elit bibendum imperdiet ut in urna
orbi urna.
</div>
</div>
</div>
</a>
<div style="clear:both;height:0px;"></div>
</div>
Help Our Causes:
This is a custom html module that is published to top_row2_1 and uses the class suffix "split_title_large". It does require Scroll Reveal to be enabled. Each image has a percentage bar, you must adjust the percentages directly within the code shown below.
<div class="causes_outer">
<div class="causes_item">
<div class="causes_image_outer">
<img alt="" src="images/cause1.jpg" />
<div class="causes_image_bar"></div>
<div class="causes_image_percent_outer">
<div style="left:75%;" class="causes_image_percent" data-sr="enter left, over
1s, opacity 1, move 700px">75%</div>
</div>
</div>
<div class="causes_text_outer">
<h3>Farming Equipment for Cambodia</h3>
<div class="causes_text_goal">Goal: $75,000</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum malesuada eu
velit in venenatis. In at turpis sed elit bibendum imperdiet ut in urna orbi
urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
malesuada eu velit in venenatis.
<br />
<a class="readon" href="index.php/features-mainmenu-47/template-specific-features">Donate
Today</a>
</div>
</div>
<div class="causes_item">
<div class="causes_image_outer">
<img alt="" src="images/cause2.jpg" />
<div class="causes_image_bar"></div>
<div class="causes_image_percent_outer">
<div style="left:35%;" class="causes_image_percent" data-sr="enter left, over
1s, opacity 1, move 700px">35%</div>
</div>
</div>
<div class="causes_text_outer">
<h3>New School In Eastern Asia</h3>
<div class="causes_text_goal">Goal: $120,000</div>
Vestibulum malesuada eu velit in venenatis. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vestibulum malesuada eu velit in venenatis. In at
turpis sed elit bibendum imperdiet ut in urna orbi urna.Lorem ipsum dolor sit
amet, consectetur adipiscing elit.
<br />
<a class="readon" href="index.php/features-mainmenu-47/template-specific-features">Donate
Today</a>
</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
Newsletter:
This is our S5 Mailchimp module. The text shown is entered in the pre-text field in the module's backend. It is published to custom_3.
<strong>Signup To Our Newsletter</strong>
Signup with your email address to receive news and updates
Volunteer Program:
This is a custom html module that is published to custom_4. It does require Scroll Reveal to be enabled. You can change the image of the left side directly in the code below.
<div class="large_picture_text_right">
<div class="large_picture_text_right_image" style="background:
url('images/large_picture.jpg');"></div>
<div class="large_picture_text_right_text" data-sr="enter left, over 0.8s, move
100px, wait 0.2s">
<div class="text_with_sub">
<div class="title_with_sub_title">Signup For Our Volunteer Programs</div>
<div class="title_with_sub_subtext">Use your talents to help serve other
people</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum malesuada eu
velit in venenatis. In at turpis sed elit bibendum imperdiet ut in urna orbi
urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
malesuada eu velit in venenatis.
<br />
<a class="readon"
href="index.php/features-mainmenu-47/template-specific-features">Signup
Today</a>
<div style="clear:both;height:0px;"></div>
</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
S5 Masonry:
This module does not use custom code, but is listed here for reference. It is published to below_columns1.
This is a custom html module which is also uses our S5 Media Player 2 plugin for hte video. It is published to bottom_row1_1. It does require Scroll Reveal to be enabled. The background of this row can be changed in the template configuration under Main/Layout.
<div class="video_wrap">
<div class="video_wrap_left">
S5 MEDIA PLAYER PLUGIN CALL GOES HERE
<div style="clear:both;height:0px;"></div>
</div>
<div class="video_wrap_right" data-sr="enter left, over 0.8s, move 100px, wait
0.2s">
<div class="text_with_sub">
<div class="title_with_sub_title">Fundraising Community</div>
<div class="title_with_sub_subtext">You can make a financial difference for
those in need</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum malesuada eu
velit in venenatis. In at turpis sed elit bibendum imperdiet ut in urna orbi
urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
malesuada eu velit in venenatis.
<br>
<a class="readon"
href="index.php/features-mainmenu-47/template-specific-features">Give Today</a>
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
Adoption Success:
This is a custom html module that is published bottom_row2_1. It does require SCroll Reveal to be enabled. The background of this row can be changed in the template configuration under Main/Layout.
<div class="profile_image_wrap">
<div class="profile_image_item" data-sr="enter left, over 0.8s, move 70px, wait
0.2s">
<img src="images/child1.jpg" alt="" />
<div class="profile_image_text">
Benenatis vitae ipsum. Aenean in ultrices erat. Quisque ligula tellus,
vestibulum in sodales vitae, consectetur ac felis. Fusce in nisi ultricies,
hendrerit diam et.
<strong>Miguel Hernandez - Adoption Through Mexico</strong>
</div>
<div style="clear:both;height:0px;"></div>
</div>
<div class="profile_image_item" data-sr="enter left, over 0.8s, move 70px, wait
0.4s">
<img src="images/child2.jpg" alt="" />
<div class="profile_image_text">
Quisque ligula tellus, vestibulum in sodales vitae, consectetur ac felis. Fusce
in nisi ultricies, hendrerit diam et. Benenatis vitae ipsum. Aenean in ultrices
erat.
<strong>Alyae Nkrumah - Kenyan Adoptions</strong>
</div>
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
<div class="profile_image_item" data-sr="enter left, over 0.8s, move 70px, wait
0.6s">
<img src="images/child3.jpg" alt="" />
<div class="profile_image_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum malesuada eu
velit in venenatis. In at turpis sed elit bibendum imperdiet ut in urna orbi
urna.
<strong>Вера Galina - Croatian Adoption Program</strong>
</div>
<div style="clear:both;height:0px;"></div>
</div>
<div class="profile_image_item" data-sr="enter left, over 0.8s, move 70px, wait
0.8s">
<img src="images/child4.jpg" alt="" />
<div class="profile_image_text">
Vestibulum malesuada eu velit in venenatis. In at turpis sed elit bibendum
imperdiet ut in urna orbi urna. Lorem ipsum dolor malesuada eu velit in
venenatis nisi.
<strong>Jose Martinez - Venezuelan Refugee Program</strong>
</div>
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
Social Icons and Bottom Logo:
This is a custom html module that is published custom_5. It does require Ion Icons to be enabled.
The Masonry module is demo'd on this page, and is a powerful module that pulls your article from a category or categories and can display them in masonry style format. The module automatically changes on screen resize to fit the screen a user is viewing them on. You can choose to output a "load more" button that will load a set number of articles you define via AJAX. The second method to load articles is "scroll to load" which will load articles once you scroll to the bottom of your screen. You simply assign an intro image under your "Image and Links" parameters area of your article and then if you choose to show it in the module it will show up. The intro text will show up if you've added text to your article before your read more button.
Features:
Choose to enable scroll to load or load more or neither
Show or hide category elector
Show or hide read more
Set how many articles are to be shown
Set how many articles are to load via AJAX button or scroll methods
Order articles by publish date, created date, random or ordering
Show or hide hits
Standard layout or hover layout
Responsive ready and more, view the below admin screenshot to see all the features
Ion Icons is an iconic font that gives you scalable vector icons that can be customized by any font css command, such as size, color, backgrounds, hover effects and more. Below you will see several examples of this feature in action, but please visit http://ionicons.com/ for a full list of all icons available.
Our Scroll Reveal feature is powered by the script found here: https://github.com/julianlloyd/scrollReveal.js. The script allows you to add "data-sr" to HTML elements for on page scroll animations. We recommend adding to DIVs over SPAN etc as DIVs can move vs SPAN tags just fading in. Once you add the code to a DIV refresh a page or scroll down and it will animate in. It will only do this once until you refresh the page again. The great feature about the script is you can use plain English to describe how you'd like to animate your HTML element.
Example of this in action (refresh this page if you didn't see it already):
enter left, over 1.33s, move 100px
enter bottom, wait 1s, move 100px
enter left move 500px, over 1.33s, wait 2.5s
Code used for the above:
<div data-sr="enter left, over 1.33s, move 100px">enter left, over 1.33s,
move 100px</div>
<div data-sr="enter bottom, wait 1s, move 100px">enter bottom, wait 1s, move
100px</div>
<div data-sr="enter left move 500px, over 1.33s, wait 2.5s">enter left move
500px, over 1.33s, wait 2.5s</div>
The S5 Live Search module is demo'd on this page and can be used on any Joomla template. The styling of the module shown here is customized specifically for this template with css overrides, and cannot be used with any other template. The same module can be used on any template, but with default or other styling in its place.
Allow your users to search quickly and without loading or refreshing pages with our amazing ajax search module! Simply publish the module to the 'search' position.
The floating menu feature is a great way for your users to easily navigate your website! The floating menu will show at the top of your browser once the screen reaches a certain point. You can determine the exact point at which this occurs via the template specific area of Vertex. NOTE: This is a Vertex addition and is not guaranteed to work with all Vertex Templates. Some custom CSS may need to be adjusted per template. This feature is not supported by IE7/8.
Features at a glance:
Set a background image to the menu, gradient or solid color
Set to snap or smooth scroll in
Determine at which point as you scroll down your page that the menu drops in
and many more features, just check out the screenshot below
Parallax backgrounds as well as other background options are built directly into the Vertex Framework. Parallax causes the background image of an element to scroll at a different speed than your browser. For an example of this view the homepage of the Velocity template here and watch the background of the top_row1 area as you scroll down the page. This feature is found under "Backgrounds" tab in Vetex, where you can control the background for many areas of your website.
Features:
Set the scroll speed of the images
Set background repeat style
Set background image size, 100%, cover, contain, etc
Set custom backgrounds for all s5 rows in the framework.
L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.
Apply a drop cap with a wrapping span class as follows: <span class="firstcharacter">L</span>orem ipsum
L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.
Apply a drop cap with a wrapping span class as follows: <span class="firstcharacter2">L</span>orem ipsum
Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.
Apply a drop cap with a class on a wrapping paragraph tag as follows: <p class="drop_class">Porem ipsum</a>
Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.
Apply a drop cap with a class on a wrapping paragraph tag as follows: <p class="drop_class2">Porem ipsum</a>
Video Overlay
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur scelerisque ligula, sit amet fermentum metus.
1. Enter the url of your video in the video src area.
2. Enter your background image under the video_overlay_wrap style area. This is the background image that appears before the video loads and at 1024px. Please note that all videos disable at 1024px due to restrictions on tablets and phones.
3. Enter an optional max-height under the video_overlay_wrap style area. This will prevent the video from becoming larger than the height specified.
4. Enter an optional min-height under the video_overlay_wrap style area. This will prevent the video from becoming smaller than the height specified. This is very useful for when the video is disabled at 750px, and the background image shows in its place.
4. Enter an optional width under the video_overlay_wrap style area. This will stretch the video to a specified length, but will be cropped off by the surrounding parent div.
4. Enter your desired text in the video_overlay_text_wrap_inner area. Text should be minimal to avoid any space issues on smaller screens; videos maintain ratio and decrease on smaller devices.
<div class="video_overlay_wrap"
style="max-height:700px;min-height:300px;width:1500px;background: url(/demo/charity/images/video_preload.jpg);">
<video muted autoplay="autoplay" loop="loop" src="/demo/charity/images/video.mp4"></video>
<div class="video_overlay_text_wrap">
<div class="video_overlay_text_wrap_inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur
scelerisque ligula, sit amet fermentum metus.
<div style="clear:both;height:0px;"></div>
</div>
</div>
</div>
This is a styled box. Use <div class="black_box">Your content goes here!</div>
This is a styled box. Use <div class="gray_box">Your content goes here!</div>
This is a styled box. Use <div class="red_box">Your content goes here!</div>
This is a styled box. Use <div class="blue_box">Your content goes here!</div>
This is a styled box. Use <div class="green_box">Your content goes here!</div>
This is a styled box. Use <div class="yellow_box">Your content goes here!</div>
This is a styled box. Use <div class="orange_box">Your content goes here!</div>
Images
This is an image with the "boxed" class applied:
This is an image with the "boxed_white" class applied:
This is an image with the "boxed_black" class applied:
This is an image with the "padded" class applied:
This is an image with the "full_width" class applied. This can also be done automatically in the template configuration. Be sure to review our Vertex Guide here for other full width image options.
Example of code used above. Notice on the first DIV there is a "four". You can enter one, two, three, four, five and six depending on how many team members you want on one row (Be sure to keep that space before the number too):
The following list will support plain text such as numbers of ion icons, class="ul_circle_content":
01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
<li><span class="circle_item">01</span>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta.
Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur
varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla,
et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque
euismod vehicula est, a euismod lacus feugiat sit amet.</li>
<li><span class="circle_item"><i class="ion-star"></i></span>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam.
Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis
erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis
fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin
tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus
feugiat sit amet.</li>
The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class="ul_numbers":
This is a sample styled number list <li class="li_number1">Your content goes here!</li>
This is a sample styled number list <li class="li_number2">Your content goes here!</li>
This is a sample styled number list <li class="li_number3">Your content goes here!</li>
This is a sample styled number list <li class="li_number4">Your content goes here!</li>
To use the price table on your site grab the following example code below and add to your site. The price table is fully responsive and can display up to 7 price columns. Once you have determined the number of columns you will be using set the wrapper div to the number of columns that you've added. You can use the wrapping classes of "s5_pricetable_1" to "s5_pricetable_7".
<div class="s5_pricetable_3">
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Basic</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">49</span><span
class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space & Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
</div>
Make any Youtube, Vimeo, etc video you embed to your site work with responsive by wrapping with a DIV with a class of "s5_video_container". The below Youtube Video will shrink when the area its contained in gets too small for it:
Drop Down Menu 
Menu Module Example 
Grouped Child Menu 
Template Specific Features 
Vertex Template Features 
S5 Vertex Framework 
Continued Vertex Features 
