Sample Sidebar Module

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.

Sample Sidebar Module

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.

Search our Site

Details
Category: Demo Info
Hits: 1744
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


Admin Area Features:

admin

Details
Category: Demo Info
Hits: 1338
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.

Round icon example:

<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-headphone icon_element"></span>
</div>
</div>


Icon Examples:

<span class="ion-camera" style="display: inline-block;font-size:2.5em;"></span>




View Full Cheatsheet (all CSS classes)

Details
Category: Demo Info
Hits: 1256
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>

Usage:

For a lengthier explanation on this visit the following page: https://github.com/julianlloyd/scrollReveal.js
  1. S5 Live Search
  2. Floating Menu
  3. Parallax Backgrounds
  4. Typography Options
  5. Tool Tips