Detaljer

Skrevet desember 08, 2015

Detaljer

Skrevet januar 15, 2015

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.

Image and Content Fader Code:

Simply enter the images and into the default fields in the backend of the module. This demo uses 1599x936 images, but you can use any image size; just make sure they are all the same size. Features like size, zoom, slide effects, and others are controlled in the module's backend. The custom html for each text area is shown below. The title setting should be turned off, it is used in the text area for this design instead. This module is published to the custom_3 on the demo.



Code used for text area, the title setting should be turned off:

Give Now:

This is a custom html module published to the custom_2 position.



Code used for this area:

Top Rows:

These are three separate custom html module modules published to the top_row1 positions. Below is the code used for each area.



Code used for top row 1_1:

Code used for top row 1_2:

Code used for top row 1_3:

Campus Life video tour and more:

This is a custom HTML module published to the custom_4 position.



Code used for the module:

Campus Life: Masonry Module:

This is the S5 Masonry module published to the top_row2_1 position, with the class suffix " s5_highlightcolor2 s5_icon.ion-ios-people", be sure to include the space before the s5_highlightcolor2. For instructions on how to use setup the Masonry module please visit:
http://www.shape5.com/documentation/Joomla/Extensions/S5-Masonry



Settings for the Masonry module:

Custom_6 Position:

This is a custom html module published to the custom_6 position. You can see how the site looks with it published and then without. This is great for creating a title for certain pages.

Success Stories and more:

This is a custom HTML module published to the custom_5 position.



Code used for this area:

Online Learning:

This is a custom html modules published to the top row 3_1 and top row 3_2 positions:



Code used for the top row 3_1:

Code used for the top row 3_2:

Testimonials - Tab Show:

This is the Tab Show module published to the above column 1_1 position with the module suffix of " verticalspacing" and a custom class of "-testimonial". We placed images on the "Position Selections And Button Options" tab and placed the arrows to show above and the tab buttons below and outside. For instructions on how to use setup the Tab Show module please visit:
http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show



Code used for this area:

Request a call back:

This is the quick contact module published to the below columns _1. For instructions on how to use setup the Quick Contact module please visit:
http://www.shape5.com/documentation/Joomla/Extensions/S5-Quick-Contact



Code added to the "Pre-Text" area under the Quick Contact "messages and text" tab:

Campus Newsletter:

This is the MailChimp module published to the bottom row 1_1 position. For instructions on how to use setup the Mail Chimp module please visit:
http://www.shape5.com/documentation/Joomla/Extensions/S5-MailChimp-Signup

Footer area:

This is the MailChimp module published to the bottom row 1_1 position. For instructions on how to use setup the Mail Chimp module please visit:
http://www.shape5.com/documentation/Joomla/Extensions/S5-MailChimp-Signup





Code used for bottom row 3_1:

Code used for bottom row 3_2:

Code used for bottom row 3_3:

Code used for bottom row 3_4:

Social Icons:

The below code is published is added to a custom HTML module published to the "custom_7" module position.

Code used for custom_7 position:

Detaljer

Skrevet august 07, 2014

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:

Icon Examples:

View Full Cheatsheet (all CSS classes)

Detaljer

Skrevet juli 15, 2015

The S5 Quick Contact module is demo'd on this page. This module is a simple way for your visitors to get in contact with you. Sometimes full contact pages are just too much. If you're looking for an easy way to stay in contact with your visitors this module is for you. This module has fully configurable language settings, sends emails to a specified admin account, captcha spam protection and much more! And of course it's free!

1. Specify text of error message and field names
2. Validates email address
   
3. Include intro text if desired
4. Set one admin email to receive all emails
5. Uses the built-in Joomla email functions
6. Optional captcha spam protection
   

Detaljer

Skrevet juni 09, 2014

The S5 Vertical Accordion module is demonstrated on the left side of this page.

This module contains up to 10 module positions that appear in an accordion function so you can publish any of your favorite modules or custom html modules to one of the accordion slides and keep your site clean and consolidated while giving it a nice effect. 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.

Features at a Glance:

• Responsive/Fluid layout
• Set the width of the module
• Onclick or Onmouseover trigger methods
• Auto cycle or manual for transition
• Set slide transition speed
• Compatible with IE7+, Firefox, Opera 10.5+, Safari, Chrome

Detaljer

Skrevet juli 15, 2015

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: