Documentation
for Allec - Business & Technology HTML Template



General Information

Template Version: 1.12

Created: 30 September 2014

Last updated: 2 Desember 2015

Done by: Congruity Hub

Thank you for purchasing Allec - Bootstrap/LESS Template with Site Builder. If you have any questions that are beyond the scope of this help file, please feel free to contact us via Allec support site.




Quickstart Guide

If you need to edit any Allec predefined page, we are providing you with a general process step by step how to do that in this documentation chapter. Just go through the following steps:

  1. Unzip Allec zip you have downloaded from ThemeForest
  2. Open Allec HTML folder.
  3. Find page you’re looking for to start work on your website.
  4. Open required page in HTML text editor and in browser (Google Chrome is preferable). HTML text editor is needed directly for making changes. You’ll be using browser for visual help and viewing. Here’s a list of html text editors you may choose from SublimeText , Code, Macromates. You also need to be aware of how to work with Chrome Developer Tool. Here’s a link with Chrome DevTools instructions.
  5. Choose an element you want to edit and right click on it, after that choose ‘Inspect element’ from dialogue menu. Note! Some elements or functionality won’t work without server. In such cases you need to use remote server or set up it locally, for example, Apache.
  6. Now you’ll see new window with Chrome Developer Tool where chosen element is highlighted in blue.
  7. Remember the code that refers to your element or just copy it.
  8. Switch to HTML text editor and find code you have just copied or remembered.
  9. Make required changes in HTML text editor due to your needs.
  10. Save changes in HTML text editor.

Besides these general steps, please check further information below. Recommendations:

  • Allec template has several variations of Homepage, to be exactly there are 11 files to choose from. Pick the one that suits your needs and rename it to index.html
  • While using such pages as Single Employee, Single Service, Case Study, Single product and Single post, copy it several times (due to your needs) for each of your posts, team members, services etc. and rename each of these copies.
  • To adjust Allec template to your website you also have to edit main navigation pattern. First of all, delete “Shortcodes” menu item and all its subitems in dropdown. Delete all links you’re not planning to use from navigation. Copy a code responsible for navigation and paste it into all pages you’re going to use for your website.
  • Some images that are used in Allec template are background images. It means that you need to edit css/style.css if you want to change them.
  • There are several plugins used in Allec template (for example, Twitter feed). If you want to adjust them you need to make changes in js/custom.js file. More information about plugins can be found in FAQs section of this documentation.



Structure

HTML

Allec consists of 106 html pages:

  • index.html - Homepage version with video header
  • index1.html - Homepage version 1 with Revolution slider
  • index2.html - Homepage version 2 with Royal slider
  • index3.html - Homepage version 3 with FlexSlider
  • index4.html - Homepage version 4 with original scrolling
  • index5.html - Homepage version 5 with bubble canvas animation
  • index-host.html - Hosting homepage
  • index2-boxed.html - Boxed Version
  • index-rtl.html - RTL version
  • index-commerce.html - E-commerce homepage
  • index-animation.html - Homepage version with spacial canvas animation
  • index-christmas.html - Special Christmas homepage version (landing page)
  • about.html - About
  • single-employee.html - Single employee
  • careers.html - Careers
  • testimonials.html - Testimonials
  • contact1.html - Contact version 1 with background Google map
  • contact2.html - Contact version 2 with boxed contact form and Google map
  • contact3.html - Contact version 3 with centered contact form
  • contact4.html - Contact version 4 with stylized Google map
  • services.html - Services version 1
  • services2.html - Services version 2
  • services3.html - Services version 3
  • single-service.html - Single service
  • pricing-tables.html - Pricing
  • support.html - Support
  • dashboard.html - Dashboard
  • gallery-2col.html - Portfolio 2 columns
  • gallery-3col.html - Portfolio 3 columns
  • gallery-4col.html - Portfolio 4 columns
  • gallery-full.html - Portfolio fullwidth
  • case-study.html - Case study
  • shop-ecwid.htmll - Ecwid E-Commerce
  • shop-grid-full.html - Catalog fullwidth grid
  • shop-list-full.html - Catalog fullwidth list
  • shop-grid.html - Catalog grid with sidebar
  • shop-list.html - Catalog list with sidebar
  • single-product.html - Single product with sidebar
  • single-product-full.html - Single product fullwidth
  • wishlist.html - Wishlist
  • orders.html - My orders
  • checkout.html - Checkout
  • shopping-cart.html - Shopping cart
  • blog.html - Blog with sidebar
  • blog-full.html - Blog fullwidth
  • blog-masonry.html - Blog masonry
  • blog-timeline.html - Blog timeline
  • single-post.html - Single post with sidebar
  • single-post-full.html - Single post fullwidth
  • blog-audio.html - Blog audio
  • blog-video.html - Blog video
  • blog-author.html - Post author
  • forum.html - Forum page
  • forum-thread.html - Forum thread page
  • site-map.html - Sitemap
  • 404.html - 404 error
  • comming-soon.html - Coming soon
  • login.html - Login/registration
  • page-elements.html - Shortcodes (full page)
  • shortcodes/accordions.html - Accordion styles
  • shortcodes/animation.html - Animation styles
  • shortcodes/buttons.html - Button styles
  • shortcodes/charts.html - Chart options
  • shortcodes/column.html - Typography columns
  • shortcodes/counters.html - Counter styles
  • shortcodes/dividers.html - Divider styles
  • shortcodes/forms.html - Form elements
  • shortcodes/icons.html - Icon options
  • shortcodes/images.html - Image container styles
  • shortcodes/maps.html - Map options
  • shortcodes/modals.html - Modals windows
  • shortcodes/media-embeds.html - Video and audio media
  • shortcodes/notifications.html - Notification styles
  • shortcodes/paginations.html - Pagination styles
  • shortcodes/progress.html - Progress bar styles
  • shortcodes/sequences.html - Sequence styles
  • shortcodes/promo.html - Promobox styles
  • shortcodes/sliders.html - Slider variations
  • shortcodes/tables.html - Table styles
  • shortcodes/tabs.html - Tab styles
  • shortcodes/testimonials.html - Testimonial styles
  • shortcodes/tooltips.html - Tooltip styles
  • shortcodes/typography.html - Typography elements
  • onepage-layout.html - One page version
  • header-1.html - Default header
  • header-1-light.html - Light default header
  • header-2.html - Header with social icons
  • header-2-light.html - Light header with social icons
  • header-3.html - Header with centred logo
  • header-3-light.html - Light header with centred logo
  • header-4.html - Two-row header with small logo
  • header-4-light.html - Light two-row header with small logo
  • header-5.html - Simplified header
  • header-5-light.html - Light simplified header
  • header-6.html - E-commerce header
  • header-6-light.html - Light e-commerce header
  • footer-1.html - Default footer
  • footer-1-light.html - Light default footer
  • footer-2.html - Footer with subscription
  • footer-2-light.html - Light footer with subscription
  • footer-3.html - Footer with Contact Form
  • footer-3-light.html - Light footer with Contact Form
  • footer-4.html - Simplified footer
  • footer-4-light.html - Light simplified footer
  • footer-5.html - Footer with Instagram feed
  • footer-5-light.html - Light footer with Instagram feed
  • footer-6.html - Centered footer
  • footer-6-light.html - Light centered footer
  • page-constructor.html - Page constructor for starting your own page

This template is based on a default bootstrap 3.3.5 grid system.
All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of main page (index.html).

                        
...
...
...
...
...
...
...
© Allec, 2014. All rights reserved. Done by Olia Gozha

CSS

There are 27 CSS files in Allec template.
                        <-- Stylesheets -->

                        <-- External css files -->
                        <-- Mobile menu -->
                        <link href="external/z-nav/z-nav.css" rel="stylesheet" />
                                                
                        <-- Sliders  -->
                        <-- RS5.0 Main Stylesheet -->
                        <link href="external/rs-plugin/css/settings.css" rel="stylesheet">
                        <-- RS5.0 Layers and Navigation Styles -->
                        <link href="external/rs-plugin/css/layers.css" rel="stylesheet">
                        <link href="external/rs-plugin/css/navigation.css" rel="stylesheet">
                        <-- Royal Slider -->
                        <link href="external/royalslider/royalslider.css" rel="stylesheet" />
                        <-- FlexSlider -->
                        <link href="external/flexslider/flexslider.css" rel="stylesheet" />
                        <-- Original scroll slider -->
                        <link href="external/page-pilling/jquery.pagepilling.css" rel="stylesheet" />
                        <-- Swiper slider -->
                        <link href="external/swiper/idangerous.swiper.css" rel="stylesheet" />           
                        <-- mCustomScrollbar -->
                        <link href="external/mCustomScrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
                                                
                        <-- Isotope  -->
                        <link href="external/isotope/isotope.css" rel="stylesheet" />
                        <-- Magnific-popup -->
                        <link href="external/magnific-popup/magnific-popup.css" rel="stylesheet" />
                        <-- Colorbox -->
                        <link href="external/flickr/colorbox.css" rel="stylesheet" />
                        <-- Wijmo Widgets CSS -->
                        <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20141.34.min.css" rel="stylesheet" />
                        <-- Select box  -->
                        <link href="external/bootstrap-select/bootstrap-select.css" rel="stylesheet" />
                        <-- Datepicker -->
                        <link href="external/bootstrap-datepicker/datepicker.css" rel="stylesheet" />
                        <-- Nouislider range slider -->
                        <link href="external/range-slider/jquery.nouislider.css" rel="stylesheet" />
                        <-- Raty js -->
                        <link href="external/raty/jquery.raty.css" rel="stylesheet" />
                        <-- Quick product preview -->
                        <link href="external/quickview/css/style.css" rel="stylesheet" />

                        <-- Components styles -->
                        <link href="external/animated-header.css" rel="stylesheet" />
                        <link href="external/tabs/tabs.css" rel="stylesheet" />
                        <link href="external/tabs/tablstyles.css" rel="stylesheet" />
                        <link href="external/tooltip/tooltip-box.css" rel="stylesheet" />
                        <link href="external/tooltip/tooltip-classic.css" rel="stylesheet" />
                        <link href="external/tooltip/tooltip-flip.css" rel="stylesheet" />
                        <link href="external/tooltip/tooltip-line.css" rel="stylesheet" />
                        <link href="external/tooltip/tooltip-round.css" rel="stylesheet" />                     
                                                
                        <-- Custom css files -->
                        <-- IE9 -->
                        <link href="css/ie9.css?v=1" rel="stylesheet" />
                        <-- Touch -->
                        <link href="css/touch.css?v=1" rel="stylesheet" />
                        <-- Style -->
                        <link href="css/style.css?v=1" rel="stylesheet" />
                    
z-nav.css

It contains styles for menu view. It has two formats of main menu view:

  • full format (opened) menu – the menu that is used for large and medium displays (desktops, laptops, tablets (landscape view));
  • narrow format (closed) menu – styles that are used for small screens (phones, tablets (portrait view)).
Transition point value is 768 pixels (is used as max-width condition for media query)

ie9.css
It is a css file with callback rules for appropriate view elements in IE9.

touch.css

It contains rules for touchscreen devices. The main purpose of this file is to provide certain hacks for mobile devices and to cancel animation used for desktop version.

style.css

Style.css is a generated file from less files. It includes a part of Bootstrap 3.3.5 css and all custom style rules.

Here you can find less files structure:

  • base group:
    • bootstrap/less/variables.less - collection of core bootstrap variables (read more );
    • vars.less - collection of custom variables (colors and fonts mostly);
    • normalize.less - a modern HTML5-ready alternative to СSS resets;
    • bootstrap/less/type.less - bootstrap core types for heading and typography;
    • bootstrap/less/scaffolding.less - a handful of variables for quick customization of key elements of your site's skeleton;
    • bootstrap/less/mixins.less - bootstrap function to speed up coding process; (read more )
    • base.less - custom rules for unclassed element, some most general rules, font init place;

  • layout group:
    • bootstrap-grid.less - bootstrap 12-col grid system;
    • responsive-utilities.less - classes for toggling content visibility across viewport breakpoints;
    • boxed.less - file that contains styles for header block

  • object group:
    • bootstrap/less/alerts.less - default styles for bootstrap component - alert;
    • bootstrap/less/buttons.less - default styles for bootstrap component - button;
    • bootstrap/less/buttons.less - default styles for bootstrap component - modal windows;
    • bootstrap/less/navs.less - default styles for bootstrap component - tabs and accordions (partly);
    • bootstrap/less/panels.less - default styles for bootstrap component - tabs and accordions (partly);
    • bootstrap/less/breadcrumbs.less - default styles for bootstrap component - breadcrumbs;
    • bootstrap/less/progress-bars.less - default styles for bootstrap component - progress-bars;
    • bootstrap/less/tables.less - default styles for bootstrap component - tables;
    • bootstrap/less/dropdowns.less - default styles for bootstrap component -dropdowns ;
    • bootstrap/less/tooltip.less - default styles for bootstrap component - tooltip;
    • bootstrap/less/component-animations.less - respond for smoothing effect on animated components;
    • header.less - file that contains styles for header block (fixed header, navigation);
    • footer.less - file that contains styles for footer;
    • sliders.less - file that contains styles for all kind slider (main for home page and inner slider);
    • forms.less - file that contains styles for form pattern and form components;
    • modals.less - file that contains styles for modal windows;
    • gallery.less - file that contains styles for gallery;
    • post.less - file that contains styles for blog;
    • widgets.less - file that contains styles for all dashboard elements;
    • objects.less - main file that contains styles for rest patterns;
    • shop-ecwid.less - file that contains styles for Ecwid E-Commerce;

  • state group:
    • state.less - file that contains rules for all patterns variations and responsive blocks.
    • style-rtl.less - file that contains rules for RTL version.
    • responsive.less - file that contains responsive rules for whole template (all media query rules).

The rest of css files are needed to display defualt view of components. Most of them are override in the file "style.css".


JavaScript

This template imports 42 Javascript files.

                        <-- Core js files -->
                        <-- jQuery 1.9.1 -->
                        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
                        <script>window.jQuery || document.write(‘<script src="external/jquery/jquery-1.10.1.min.js"><\/script>’)</script>
                        <-- jQuery UI -->
                        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
                        <-- Bootstrap 3 -->
                        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
                        <-- Modernizr -->
                        <script src="external/modernizr/modernizr.custom.js"></script>

                        <-- Slider -->
                        <-- jQuery REVOLUTION Slider -->
                        <script type="text/javascript" src="external/rs-plugin/js/jquery.themepunch.tools.min.js?rev=5.0"></script>
                        <script type="text/javascript" src="external/rs-plugin/js/jquery.themepunch.revolution.min.js?rev=5.0"></script>
                        <-- Swiper slider -->
                        <script src="external/swiper/idangerous.swiper.js"></script>
                        <-- RoyalSlider -->
                        <script src="external/royalslider/jquery.royalslider.min.js"></script>   
                        <-- Flexslider -->
                        <script src="external/flexslider/jquery.flexslider-min.js"></script>
                        <--  Gallery slider with thumb -->
                        <script src="external/galleriffic/jquery.galleriffic.js"></script>
                        <-- Original scroll slider -->
                        <script src="external/page-pilling/jquery.pagepiling.min.js"></script>
                        <-- mCustomScrollbar -->
                        <script src="external/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

                        <-- Files (js) for improve interface -->
                        <-- Mobile menu -->
                        <script src="external/z-nav/jquery.mobile.menu.js"></script>
                                            
                        <-- Widgets -->  
                        <-- Select box -->
                        <script src="external/bootstrap-select/bootstrap-select.js"></script>
                        <-- Datepicker -->
                        <script src="external/bootstrap-datepicker/bootstrap-datepicker.js"></script>
                        <-- Knob js -->
                        <script src="external/knob/jquery.knob.js"></script>
                        <-- Nouislider range slider -->
                        <script src="external/range-slider/jquery.nouislider.min.js"></script>
                        <-- Charts widget scripts -->
                        <-- Wijmo Widgets JavaScript -->
                        <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20141.34.min.js"></script>
                        <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20141.34.min.js"></script>
                        <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20141.34.js"></script>
                                            
                        <-- Isotope -->
                        <script src="external/isotope/jquery.isotope.js"></script>
                        <-- Magnific-popup -->
                        <script src="external/magnific-popup/jquery.magnific-popup.min.js"></script>
                        <-- Waypoints -->
                        <script src="external/waypoint/waypoints.min.js"></script>
                        <-- Inview -->
                        <script src="external/inview/jquery.inview.js"></script>
                        <-- Twitter feed -->
                        <script src="external/twitterfeed/twitterfeed.js"></script>
                        <-- Flickr -->
                        <script src="external/flickr/jflickrfeed.js"></script>
                        <-- Colorbox  -->
                        <script src="external/flickr/jquery.colorbox.js"></script>
                        <-- Stars rate -->
                        <script src="external/raty/jquery.raty.js"></script>
                        <-- Product quickview -->
                        <script src="external/quickview/js/velocity.min.js"></script>
                        <script src="external/quickview/js/main.js"></script>
                        <-- Count comimg soon -->
                        <script src="external/count/count.down.js"></script> 

                        <-- Maps -->
                        <-- *** Google map  *** -->
                        <script src="https://maps.google.com/maps/api/js?sensor=true"></script>

                        <-- Livicons  -->
                        <script src="external/livicons/livicons-1.3.min.js"></script>
                        <script src="external/livicons/raphael-min.js"></script>
                        <-- Custom tabs -->
                        <script src="external/tabs/cbpFWTabs.js"></script>
                        <-- Scroll to plugin -->
                        <script src="external/scrollto/jquery.scrollTo.min.js"></script>
                        <-- Smooth Scroll -->
                        <script src="external/SmoothScroll/SmoothScroll.js"></script>
                        <-- ClassList -->
                        <script src="external/classList/classList.js"></script>

                        <-- Cansav animation assets -->
                        <script src="external/animated-header/js/TweenLite.min.js"></script>
                        <script src="external/animated-header/js/EasePack.min.js"></script>
                        <script src="external/animated-header/js/rAF.js"></script>
                        <-- Geometry canvas animation -->
                        <script src="external/animated-header/js/header-animate.js"></script>
                        <-- Bubble canvas animation -->
                        <script src="external/animated-header/js/animation-bubble.js"></script>
                        <script src="external/animated-header/js/animation-bubble-fixed.js"></script>
                        <-- Snow canvas animation -->
                        <script src="external/snow/rectangleEmitter.js"></script>
                        <script src="external/snow/snow.js"></script>


                        <-- Form validation -->
                        <script src="js/form.js"></script>
                        <-- Custom -->
                        <script src="js/custom.js"></script>
                    

Here's a list of basic scripts that are used in all template pages:

jquery-1.10.1.min.js

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.

bootstrap.js

Powerful mobile-first front-end framework for web development. It connects to the site through CDN "http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css". You can get more information on official site http://getbootstrap.com/.Allec template uses the range of elements (accordions, tabs, tooltips etc.) which are based on use of this framework. You can find description of these elements here

modernizr.custom.js

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.

jquery.mobile.menu.js

Designer’s plugin for mobile menu. It has two patterns of interaction with main menu:

  • full format (opened) menu – the menu that is used for large and medium displays (desktops, laptops, tablets (landscape view)).
  • narrow format (closed) menu – the menu that is used for displaying in small screens (phones, tablets(portrait view)).
By default for mobile view, menu looks like a switch icon. After you open it, every link is divided into two parts. Main part is a direct link to the menu item. Additional link (which is marked by plus icon in closed state and minus icon in open state) enables you to open context menu list. The menu is well adopted for touch devices since touchstart event is also performed.

custom.js

It's a file that contain initialization of all third-party plugins and Allec custom code. The file contains set up used on every page and set up for each separate page as a function. You can call functions on every separate page on “script” tag on .html files. Don't forget to call the function, it uses patterns such as "slider".


Here's the rest of scripts that are used in Allec template on different pages:

jquery-ui.js

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. In this template, it is used to make wijmo widgets work properly.

jquery.themepunch.plugins.min.js and jquery.themepunch.revolution.min.js

Revolution slider is a responsive third-party jQuery plugin. Detailed documentation of which you can find at Revolution slider official documentation.

idangerous.swiper.js

Swiper slider is a third-party mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. Detailed documentation of which you can find at Swiper Slider official website.

jquery.royalslider.min.js

RoyalSlider is an image gallery and content slider plugin. Every slider template is responsive and touch friendly. More information and API you can find in Royal Slider online documentation.

jquery.flexslider-min.js

FlexSlider is a free responsive jQuery slider toolkit. Supported in all major browsers with custom navigation options and touch swipe support. As it is a third-party plugin, you can find its detailed documentation at FlexSlider official website.

jquery.galleriffic.js

It is a third-party plugin for execution of thumbnail gallery. It is used in the template on page single-product.html and single-product-full.html to represent shop item. But this shortcode is reusable and can be use in any other page. To add additional settings in gallery display you are recommended to read plugin's online documentation

jquery.mCustomScrollbar.concat.min.js

It is highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks. Detailed information about this third-party plugin you can find at its official website.

jquery.form.js

The script presupposes 3 objectives:

  • to test inputs placeholder availability and control of its corresponding display.
  • to checkup an input data in form inputs. If you face incompatibility (terms are not performed) the error handler will be shown.
  • to form data for sending message into php file. Using this data the message will be crafted and then it will be sent.

jquery.raty.js

jQuery Raty is a third-party plugin that generates a customizable star rating. More information about setting you can find at its official website

jquery.knob.js

jQuery Knob is a third-party canvas based plugin that enables you to create different sort of pie charts. It supports touch, mouse and mousewheel, keyboard events and is downward compatible. More information you can find at its official website.

count.down.js

It is a simple JavaScript API for producing an accurate, intuitive description of the timespan between two date instances. More information on this matter you can find at plugin's official website

jquery.magnific-popup.min.js

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. Plugin documentation have full information about customization.

bootstrap-select.js

It is a custom select for Bootstrap using button dropdown. If you need more information regarding this element you can find it at plugin's official website

bootstrap-datepicker.js

Bootstrap-datepicker provides a flexible datepicker widget in the Twitter bootstrap style. These are the specific versions bootstrap-datepicker is tested against (js files) and built against (css files). Use other versions at your own risk. Documentation. Also you can configurate datepicker for your needs use online generator.

jquery.wijmo.js

Wijmo is a kit of UI widgets based on jQuery UI. The template uses three types of widgets: pie chart, bar chart and linear graph (with time axis). You can find information about other widgets at Wijimo official website. To find out additional settings of pie chart follow this link. You can find documentation concerning linear graph after this link. If you want to design widgets by your own you should keep in mind that svg tags use specific css rules, therefore it is recommended to read documentation concerning this issue.

jquery.nouislider.min.js

noUiSlider is a third-party plugin that allows to create a range slider without bloat. It supports responsive and draggable performance. It is suitable if you would like to create a price range etc. You can find extra information how this plugin works at its official website.

jquery.isotope.js

It is a third-party plugin that can hide and show item elements via the filter option. Items that match that filter will be shown. Items that do not match will be hidden. This technic is used in the page "Fullwidth gallery". More details about availble configuration find at Isotope official website.

waypoints.min.js

Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element. This plugin use data-attribute to define type of animation for each direction.

jflickrfeed.js

This plugin works by pulling a JSON feed from Flickr and applying the data it gets back to a template. As it is a third-party plugin, you may find detailed information about it in its online documentation.

jquery.colorbox.js

Colorbox is a jQuery plugin, meaning that it extends the jQuery JavaScript library to include extra functionality. It is used for better perfomance of popups in this template. More information about this plugin you may find at its official website.

livicons-1.3.min.js

Livicons are animated vector icons (except brand names ones), so there are not any images like JPGs, PNGs or GIFs. All their appearance and behaviour are based on Javascript program code. So they can be animated or static, with any color and size with good look at usual and high resolution devices. Livicons are being created with SVG (Scalable Vector Graphic) in all modern browsers and VML (Vector Markup Language) in IE6 - IE8. Documentation and step by step using can be found at its official website .

smoothscroll.js

A lightweight script to animate scrolling to anchor links.More information you can find in its documentation.

maps.google.com/maps/api/js

The script serves to add Google map on a template page. You can find step by step instruction of map insertion in its documentation.

twitterfeed.js

Script that allows to download recent news from twitter account to your website. You can find information how to adjust this scropt to your own account in FAQs section of this documentation.

jquery.inview.js

Script that will be triggered when the element is scrolled in to the viewport. Allec uses checkups for assignment for blocks of animation effects when they appear in displaying area. Plugin development is in open-source on github.


PSD Files

Allec contains 85 psd files:

  • 01_Homepage v_1
  • 02_Homepage v_2
  • 03_Homepage v_3
  • 04_Homepage v_4
  • 05_Homepage v_5
  • 06_About
  • 07_Single Employee
  • 08_Services v_1
  • 09_Services v_2
  • 10_Services v_3
  • 11_Single Service
  • 12_Pricing tables
  • 13_Portfolio 2 Columns
  • 14_Portfolio 3 Columns
  • 15_Portfolio 4 Columns
  • 16_Portfolio Fullwidth
  • 17_Case Study
  • 18_Support
  • 19_Contact v_1
  • 20_Contact v_2
  • 21_Contact v_3
  • 22_Contact v_4
  • 23_Coming soon
  • 24_Login_Registration
  • 25_404 error
  • 26_Blog v_1
  • 27_Single Post with Sidebar
  • 28_Fullwidth Blog
  • 29_Fullwidth Single Post
  • 30_Blog Author
  • 31_Masonry Blog
  • 32_Timeline Blog
  • 33_Audio Blog
  • 34_Video Blog
  • 35_Sitemap
  • 36_Dashboard screen
  • 37_Onepage Layout
  • 38_Hosting Homepage
  • 39_E-commerce Homepage
  • 40_Fullwidth Catatog (Grid View)
  • 41_Fullwidth Catalog (List View)
  • 42_Catalog with Sidebar (Grid View)
  • 43_Catalog with Sidebar (List View)
  • 44_Product Quick View Popup
  • 45_Single Product Fullwidth
  • 46_Single Product Sidebar
  • 47_Wishlist
  • 48_My Orders
  • 49_Checkout
  • 50_Shopping Cart
  • 51_Forum Page
  • 52_Forum Thread page
  • 53_Careers
  • 54_Testimonials
  • 55_Shortcodes
  • 56_Homepage v_1 hovers
  • 57_Ipad View Homepage v_1
  • 58_Ipad View Homepage v_2
  • 59_Ipad View Homepage v_3
  • 60_Ipad View Hosting Homepage
  • 61_Ipad View E-commerce Homepage
  • 62_Iphone Homepage v_1
  • 63_Iphone Homepage v_2
  • 64_Iphone Homepage v_3
  • 65_Iphone Hosting Homepage
  • 66_Iphone E-commerce Homepage
  • 67_Homepage v_1 Dark Skin
  • 68_Homepage v_2 Dark Skin
  • 69_Homepage v_3 Dark Skin
  • 70_Hosting Homepage Dark Skin
  • 71_E-commerce Homepage Dark Skin
  • 72_Headers Variations
  • 73_Footer Variations
  • 74_Accordions
  • 75_Promoboxes
  • 76_Buttons.psd
  • 77_Counters.psd
  • 78_Dividers.psd
  • 79_Notification.psd
  • 80_Tooltips.psd
  • 81_Tabs.psd
  • 82_Sequences.psd
  • 83_Testimonials Styles.psd
  • 84_Christmas Landing Page.psd
  • 85_Allec_Email_Template.psd

All psd files are easy to edit and adjust due to your needs.


Fonts Used

The template uses three fonts. One of them (Font Awesome) is iconic font. It allows you to display icons in crossbrowsing and crossplatforming ways. Also you can display animated icon by using livicons script (details in FAQs section of this documentation). Two text fonts are also attached - Open Sans and VarelaRound. They both are generated through Google Fonts.

                        
                        
                        
                        
                        
                        
                    



Shortcodes and Patterns

This template is based on scalable and modular principles. Most elements are built like code templates.You can put this templates in any place in the page. It gives a default pattern view. You can add an additional class (class modificator) to the pattern root tag. It will give an alternative view.


Accordion

Three are 4 kinds of shortcodes for accordions. Block class accordion will represent default view bootstrap accordion. For custom configuration you can add a class-modificator accordion--blocks.

                        
                        
                            
Curabitur luctus iaculis bibendum. Donec scelerisque eros vel blandit luctus. Aliquam a semper nibh. Morbi pretium commodo ante sit amet congue. Proin nec mollis nulla. Ut commodo magna sed leo dapibus, sit amet imperdiet odio gravida. Quisque rhoncus dui ac odio venenatis, a tempor urna malesuada.
... *

* - the rest of code can be found in file accordions.html.

Result:

Here's another variant of accordion style. You shoud add class-modificator accordion--stack to css class panel-group accordion accordion--blocks.

Result:

Adding class-modificator acoordion--smooth you will get style of accordion as shown below.

Result:

If you want accordin with counter add class-modificator accordion--offer and code:

                        
<h4 class="panel-title"> Etiam augue sem, pellentesque.

You have just

hours
minutes
seconds

Morbi pretium commodo ante sit amet congue. Proin nec mollis nulla. Ut commodo magna sed leo dapibus, sit amet imperdiet odio gravida. Quisque rhoncus dui ac odio venenatis, a tempor urna malesuada.

Grab It Now
... *

* - the rest of code can be found in file accordions.html.

Result:


Alerts

There are 4 types of alert. They have block class alert and it adds positioning set of rules. Also you have 4 class-modificators for changing alert color scheme: alert-success, alert-info, alert-danger, alert-warning.

                        
                        
                        
Well done! You successfully read this important alert message.
Information for you! This alert is not super important.
Oh snap! Change a few things up and try submitting again.
Warning! Best check yourself, you're not looking too good.

Adding the code above you will get such kind of alerts as shown below.

Result:


Buttons

Allec Template has different styles of buttons. They have the main class btn which gives the typography style and hover effects. Also you have 6 class-modificators for changing button color: btn-info, btn-warning, btn-primary, btn-danger, btn-success, btn-general and 2 class-modificators for changing button size: btn-lg (normal size), btn-sm (small size).

                        
                        Button
                        Button
                        Button
                        Button
                        Button
                        Button
                    

Adding the code above you will get such kind of buttons as shown below.

Result:

First style. Adding class-modificator btn--decorated you will get a style shown below.

Result:

Second style. Add this construction to display round bordered buttons with special hover effect in your website.

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

Adding the code above you will get such kind of buttons as shown below.

Result:

Third style. Add this construction to display buttons with icon in your website.

                        
                         Button
                        Button
                        Button
                        Button
                        Button
                        Button
                    

Adding the code above you will get such kind of buttons as shown below.

Result:

Fourth style. Add this construction to display bordered buttons with icon in your website.

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

Adding the code above you will get such kind of buttons as shown below.

Result:

Fifth style. Add this construction to display small round buttons in your website.

                        Small Button
                        Small Button
                        Small Button
                        Small Button
                        Small Button
                        Small Button
                    

Adding the code above you will get such kind of buttons as shown below.

Result:

Sixth style. Add this construction to display small rectangle buttons in your website.

                        Small Button
                        Small Button
                        Small Button
                        Small Button
                        Small Button
                        Small Button
                    

Adding the code above you will get such kind of buttons as shown below.

Result:

Seventh style. Add this construction to display small bordered buttons in your website.

                        
                        
                        
                        
                        
                        
                    

Adding the code above you will get such kind of buttons as shown below.

Result:


Form

In this section you get default pattern for contact form. Block class is contact. If you want to add this shortcode to your page, you should change an attribute action to send.php and add a link to js file form.js.

                        
                        

Adding the code above you will get such kind of contact form as shown below.

Result:


Select

Custom select configuration can be enabled by using "bootstrap-selectbox". Default styles are represent with block class select.

                        
                        

Adding the code above you will get such kind of select as shown below.

Result:


Checkbox and radio buttons

Allec template has custom style for ckeckbox and radio buttons. Add this construction with block classes checkbox and radio to display such kind of checkboxes and radio buttons in your website.

                        
                        

Adding the code above you will get Allec custom checkboxes and radio buttons as shown below.

Result:

You can change the color scheme for checkbox and radio buttons, just add a class-modificator checkbox--dark and radio--dark after block class.

Result:


Icons

Default icons show pure icons without decoration. If you want to change it, you shoud add a suitable class-modificator. You can combine all representation modes with animated icons - livicons. More details about livicons you can find in section JavaScrtipt and FAQ's.

                        
                        
                        

Adding the code above you will get pure icons painted in solid color as shown below.

Result:

Adding class-modificator icon--strips you will get a style shown below.

Result:

Adding class-modificator icon--circle you will get icons on circle background as shown below.

Result:

Adding class-modificator icon--rect you will get icons on square background as shown below.

Result:

Adding class-modificator icon--shape you will get icons imbeded into pie-shape background as shown below.

Result:

Adding class-modificator icon--border you will get icons imbeded into thick border as shown below.

Result:


Images

There are several variants of image container style in Allec template. Each img tag has a container with block class image-container. This method enhances block scalable system that allows to add images in any block of the template pages. The below is base for all other images styles in Allec template.

                        
                        
<img src="images/sample/6.jpg" alt="">

Adding the code above you will get plain square image container as shown below.

Result:

You can add additional class-modificators to the initial class to get more sophisticated styles of image containers.

First style. Adding class-modificator image-container--border-inner to the basic class image-container you will get image with inner frame.

                        
                        
<img src="images/sample/6.jpg" alt="">

You need just to add the code above into your page to get image style shown below.

Result:

Second style. Adding class-modificator image-container--fading to the basic class image-container you will get faded image with date information.

                        
                        
<img src="images/sample/6.jpg" alt="">

You need just to add the code above into your page to get image style shown below.

Result:

Third style. Adding class-modificator image-container--describe to the basic class image-container you will get image with description information below.

                        
                        
<img src="images/sample/6.jpg" alt="">

You need just to add the code above into your page to get image style shown below.

Result:

Fourth style. Adding class-modificator image-container--empty to the basic class image-container you will get framed image with thin 1 px border and white space.

                        
                        
<img src="images/sample/6.jpg" alt="">

You need just to add the code above into your page to get image style shown below.

Result:

Fifth style. Adding class-modificator image-container--expository to the basic class image-container you will get framed image with description information below.

                        
                        
<img src="images/sample/6.jpg" alt="">

You need just to add the code above into your page to get image style shown below.

Result:

Sixth style. Adding class-modificator image-container--border to the basic class image-container you will get image wrapped with 1 px border.

                        
                        
<img src="images/sample/6.jpg" alt="">

You need just to add the code above into your page to get image style shown below.

Result:

Seventh style. Adding class-modificator image-container--border-huge to the basic class image-container you will get image wrapped with thick stroke.

                        
                        
<img src="images/sample/6.jpg" alt="">

You need just to add the code above into your page to get image style shown below.

Result:


Lists

Lists are an important part for content presentation in all pages. Allec template has several list views. Main class for it is called list. Here's a default code to show lists in your website.

                        
                        
  • Etiam augue sem, pellentesque
  • Duis nec neque posuere, gravida
  • Cras felis nunc, tempus ut
  • Ut tincidunt varius pellentesque.
  • Donec imperdiet posuere dolor, at fringilla augue

Adding the code above for a default list style you will get a list shown below. This type of list is called a unordered list. Its main tag is ul.

Result:

If your case requires ordered list (numerated one), you need to use tag ol. Here's an example of code for such kind of lists:

                        
                        
  1. Etiam augue sem, pellentesque
  2. Duis nec neque posuere, gravida
  3. Cras felis nunc, tempus ut
  4. Ut tincidunt varius pellentesque.
  5. Donec imperdiet posuere dolor, at fringilla augue

The code above will alow you to get a style shown below.

Result:

You also can use different classes-modificators for certain unordered list display.

First style.Add class-modificator list--sign to the main unordered list class list as shown in the code below to get arrow in a circle as a marker.

                        
                        
  • Etiam augue sem, pellentesque
  • Duis nec neque posuere, gravida
  • Cras felis nunc, tempus ut
  • Ut tincidunt varius pellentesque.
  • Donec imperdiet posuere dolor, at fringilla augue

Using this code above will allow you to get style shown below.

Result:

Second style. Add class-modificator list--check to the main unordered list class list as shown in the code below to get check list marker.

                        
                        
  • Etiam augue sem, pellentesque
  • Duis nec neque posuere, gravida
  • Cras felis nunc, tempus ut
  • Ut tincidunt varius pellentesque.
  • Donec imperdiet posuere dolor, at fringilla augue

Using this code above will allow you to get style shown below.

Result:

Third style. Add class-modificator list--arrow to the main unordered list class list as shown in the code below to get long arrow as a marker.

                        
                        
  • Etiam augue sem, pellentesque
  • Duis nec neque posuere, gravida
  • Cras felis nunc, tempus ut
  • Ut tincidunt varius pellentesque.
  • Donec imperdiet posuere dolor, at fringilla augue

Using this code above will allow you to get style shown below.

Result:

Fourth style. Add class-modificator list--expanded to the main unordered list class list as shown in the code below to get very customized marker which is suitable for a large amount of text as a list.

                        
                        
  • Etiam augue sem, pellentesque
  • Duis nec neque posuere, gravida
  • Cras felis nunc, tempus ut
  • Ut tincidunt varius pellentesque.
  • Donec imperdiet posuere dolor, at fringilla augue

Using this code above will allow you to get style shown below.

Result:


Pagination

Pagination ui elements are mostly used in blog and gallery pages of the site. Here's below a default code that is used in Allec template to represent pagination.

                        
                        

                    

Using the code above in your page, you get style shown in the screenshot below.

Result:

You can change Allec default view of pagination adding suitable class-modificator.

First style. Add class-modificator pagination--rect to the main class pagination to get style where every ui control element is embedded into a rectangle as shown in the code below.

                        
                        

                    

Using the code above in your page, you get style shown in the screenshot below.

Result:

Second style. Add class-modificator pagination--minimal to the main class pagination to get clean and minimal style as shown in the code below.

                        
                        

                    

Using the code above in your page, you get style shown in the screenshot below.

Result:

Third style. Add class-modificator pagination--circle to the main class pagination to get style where every ui control element is embedded into stroked circle as shown in the code below.

                        
                        

                    

Using the code above in your page, you get style shown in the screenshot below.

Result:


Progress bars

Allec shortcodes for progress bar are based on Bootstrap component. Here's an example of code that refers to default progress bar in Allec template. The main class for this ui element is progress-container.

                        
                        
UX/UI: 0%

Using the code above in your page, you get style shown in the screenshot below.

Result:

You can change Allec default view of progress bar adding suitable class-modificator.

First style. Add class-modificator progress--secondary to the main class progress-container to get style embedded into rounded container as shown in the code below.

                        
                        
UX/UI: 0%

Using the code above in your page, you get style shown in the screenshot below.

Result:

Second style. Add class-modificator progress--primary to the main class progress-container to get rounded style as shown in the code below.

                        
                        
UX/UI: 0%

Using the code above in your page, you get style shown in the screenshot below.

Result:

Third style. Add class-modificator progress--neutral to the main class progress-container to get simple rectangle style as shown in the code below.

                        
                        
UX/UI: 0%

Using the code above in your page, you get style shown in the screenshot below.

Result:


Tables

Here you find 3 variants of table styles. All of them are wrapped into tag div with class table-responsive. It gives opportunity to add scroll for tables on mobile devices. Each table style in Allec template has different class-mofificators.

First style. Add class-modificator table--vertical to the class of tag table to get two-column table as shown in the code below.

                        
                        
Resolution 1920 x 1080 1920 x 1080
Energy efficiency rating A+ A+
On-mode power consumption 115 W 115 W
Annual power consumption 160 kWh 160 kWh
Screen technology LED backlit LED backlit

Using the code above in your page, you get style shown in the screenshot below.

Result:

Second style. Add class-modificator table--wide to the class of tag table to get large table with multiple columns as shown in the code below.

                    	
                    		
# Date Ship to Order Total Status Action
100032993 05/14/2015 John Stewart $ 2 199.00 Pending View Order
100031364 05/14/2015 John Stewart $ 2 199.00 Pending View Order
100031002 05/14/2015 John Stewart $ 2 199.00 Delivered View Order
100026999 05/14/2015 John Stewart $ 2 199.00 Canceled View Order
100022712 05/14/2015 John Stewart $ 2 199.00 Delivered View Order

Using the code above in your page, you get similar style to what is shown in the screenshot below.

Result:

Third style. Add class-modificator table--target to the class of tag table to get table style focused on rows as shown in the code below.

                    	
                    		
Categories activity Threads Replies Last reply
General the most active Bob Gellar 43 543 by Mellie Hopkins May 15, 2015 10:53 am
Supportthe most active Mellie Hopkins 10 21 by Mellie Hopkins May 15, 2015 10:53 am
FAQ’sthe most active Richard Clark 5 2 by Mellie Hopkins May 15, 2015 10:53 am
Offtopthe most active Hugo Wesley 10 21 by Mellie Hopkins May 15, 2015 10:53 am
Miscellaneousthe most active Maria Cambell 5 2 by Mellie Hopkins May 15, 2015 10:53 am

Using the code above in your page, you get similar style to what is shown in the screenshot below.

Result:


Tabs

Tabs shortcodes have been built based on Bootstrap tabs components. The main class for this block is tabs. Here's an example of code responsible for default tabs style.

                        
                        

Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros.Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros. Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

You can change Allec default view of tabs adding suitable class-modificator.

First style. Add class-modificator tabs--minimal to the main class tabs to get minimal tabs style as shown in the code below.

                        
                        

Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros.Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros. Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Second style. Add class-modificator tabs--minimal-vertical to the main class tabs to get vertical minimal tabs style as shown in the code below.

                        
                        

Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros.Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros. Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Third style. Add class-modificator tabs--vertical to the main class tabs to get default vertical tabs style as shown in the code below.

                        
                        

Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros.Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et accumsan ante, et consequat neque. Fusce quis molestie eros. Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo.

Using the code above in your page, you get style as shown in the screenshot below.

Result:


Allec Template has also custom tabs with icons. The main class for this block is tabs-custom. Here's an example of code responsible for default tabs style.

First style. Add class-modificator tabs-style-flip to the main class tabs-custom and construction below to get flip tabs.

                        
                        

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cras consectetur fermentum erat, in placerat ligula pharetra eget.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Second style. Add class-modificator tabs-style-topline to the main class tabs-custom and construction below to get tabs with top line on active tab.

                        
                        

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cras consectetur fermentum erat, in placerat ligula pharetra eget.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Third style. Add class-modificator tabs-style-iconbox to the main class tabs-custom and construction below to get tabs with full-width header

                        
                        

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cras consectetur fermentum erat, in placerat ligula pharetra eget.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Fourth style. Add class-modificator tabs-style-circle to the main class tabs-custom and construction below to get clear tabs

                        
                        

Home. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Profile. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Attachments. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Projects Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cras consectetur fermentum erat, in placerat ligula pharetra eget.

Settings. Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper lacinia turpis at aliquet.

Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Using the code above in your page, you get style as shown in the screenshot below.

Result:


Testimonials

Testimonial shortcodes have a block class testimonial. If you want to change default view you should just add class-modificator.

                        
                        
<img src="images/avatars/1.jpg" alt="">

Valentino Sorano

CEO, Themeforest

“Donec euismod turpis id ullamcorper lobortis. Maecenas faucibus ipsum sem, sed consequat ante consectetur non. Nam at neque dui. Integer id risus sit amet justo varius semper quis ut enim.”

Using the code above in your page, you get style as shown in the screenshot below.

Result:

You can change Allec default view of testimonial adding suitable class-modificator.


First style. Add class-modificator testimonial--centered to the main class testimonial to get centered style in framed container as shown in the code below.

                        
                        
<img src="images/avatars/1.jpg" alt="">

Valentino Sorano

CEO, Themeforest

“Donec euismod turpis id ullamcorper lobortis. Maecenas faucibus ipsum sem, sed consequat ante consectetur non. Nam at neque dui. Integer id risus sit amet justo varius semper quis ut enim.”

Using the code above in your page, you get style as shown in the screenshot below.

Result:


Second style. Add class-modificator testimonial--border to the main class testimonial to get testimonial framed in container with thick stroke as shown in the code below.

                        
                        
<img src="images/avatars/1.jpg" alt="">

Valentino Sorano

CEO, Themeforest

“Donec euismod turpis id ullamcorper lobortis. Maecenas faucibus ipsum sem, sed consequat ante consectetur non. Nam at neque dui. Integer id risus sit amet justo varius semper quis ut enim.”

Using the code above in your page, you get style as shown in the screenshot below.

Result:


Third style. Add class-modificator testimonial--string to the main class testimonial to get testimonial on colored background without person's image as shown in the code below.

                        
                        
<img src="images/avatars/1.jpg" alt="">

Valentino Sorano

CEO, Themeforest

“Donec euismod turpis id ullamcorper lobortis. Maecenas faucibus ipsum sem, sed consequat ante consectetur non. Nam at neque dui. Integer id risus sit amet justo varius semper quis ut enim.”

Using the code above in your page, you get style as shown in the screenshot below.

Result:



Tooltips

There are 6 types of tooltips. Every tooltip block has default style without class-modificator. And they, also, have 3 class-modificators for changing tooltip color scheme: tooltip--secondary, tooltip--bordered, tooltip--shadow.

First style. Tooltip block tooltip-link to get classic simple style as shown in the code below.

                        
                        

Aenean porta, elit vitae tristique consequat, nisi tooltip 1 tellus tincidunt erat, sit amet interdum elit quam at velit. Mauris venenatis metus sed purus tincidunt placerat. Quisque lobortis tortor tooltip 2 et nisi commodo, at malesuada nunc sollicitudin. Curabitur quis ultrices tortor tooltip 3. Mauris porta erat vitae mauris tooltip 4 facilisis pellentesque. Praesent sed ornare ligula. Nunc at faucibus ante. Cras pellentesque diam eu porta egestas.

Adding the code above you will get such kind of tooltips as shown below.

Result:


Second style. Tooltip block tooltip-classic to get classic expended style as shown in the code below.

                        
                        

Aenean porta, elit vitae tristique consequat, nisi tooltip 1 <img src="../images/tooltip/sample.jpg" /> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur. tellus tincidunt erat, sit amet interdum elit quam at velit. Mauris venenatis metus sed purus tincidunt placerat. Quisque lobortis tortor tooltip 2 <img src="../images/tooltip/sample.jpg" /> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur. et nisi commodo, at malesuada nunc sollicitudin. Curabitur quis ultrices tortor tooltip 3 <img src="../images/tooltip/sample.jpg" /> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur. . Mauris porta erat vitae mauris facilisis pellentesque. Praesent sed ornare ligula. Nunc at faucibus ante. Cras pellentesque diam eu porta egestas.

Adding the code above you will get such kind of tooltips as shown below.

Result:


Third style. Add class-modificator tooltip-round to the main class tooltip-link to get round style as shown in the code below.

                        
                        

Aenean porta, elit vitae tristique consequat, nisi tooltip 1 tellus tincidunt erat, sit amet interdum elit quam at velit. Mauris venenatis metus sed purus tincidunt placerat. Quisque lobortis tortor tooltip 2 et nisi commodo, at malesuada nunc sollicitudin. Curabitur quis ultrices tortor tooltip 3. Mauris porta erat vitae mauris tooltip 4 facilisis pellentesque. Praesent sed ornare ligula. Nunc at faucibus ante. Cras pellentesque diam eu porta egestas.

Adding the code above you will get such kind of tooltips as shown below.

Result:


Fourth style.Tooltip block tooltip-box to get boxed style as shown in the code below.

                        
                        

Aenean porta, elit vitae tristique consequat, nisi tooltip 1 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur. Some Link tellus tincidunt erat, sit amet interdum elit quam at velit. Mauris venenatis metus sed purus tincidunt placerat. Quisque lobortis tortor tooltip 2 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur. Some Link et nisi commodo, at malesuada nunc sollicitudin. Curabitur quis ultrices tortor tooltip 3 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur. Some Link . Mauris porta erat vitae mauris facilisis pellentesque. Praesent sed ornare ligula. Nunc at faucibus ante. Cras pellentesque diam eu porta egestas.

Adding the code above you will get such kind of tooltips as shown below.

Result:


Fifth style. Add class-modificator tooltip-line to the main class tooltip-link to get round style as shown in the code below.

                        
                        

Aenean porta, elit vitae tristique consequat, nisi tooltip 1 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur. tellus tincidunt erat, sit amet interdum elit quam at velit. Mauris venenatis metus sed purus tincidunt placerat. Quisque lobortis tortor tooltip 2 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur. et nisi commodo, at malesuada nunc sollicitudin. Curabitur quis ultrices tortor tooltip 3 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur. . Mauris porta erat vitae mauris facilisis pellentesque. Praesent sed ornare ligula. Nunc at faucibus ante. Cras pellentesque diam eu porta egestas.

Adding the code above you will get such kind of tooltips as shown below.

Result:


Sixth style. Add class-modificator tooltip-flip to the main class tooltip-link to get tooltip with image as shown in the code below.

                        
                        

Aenean porta, elit vitae tristique consequat, nisi tooltip 1 <img src="../images/tooltip/avatar1.jpg" alt="user1"/> Sophie Cooper tellus tincidunt erat, sit amet interdum elit quam at velit. Mauris venenatis metus sed purus tincidunt placerat. Quisque lobortis tortor tooltip 2 <img src="../images/tooltip/avatar2.jpg" alt="user2"/ > Anton Price et nisi commodo, at malesuada nunc sollicitudin. Curabitur quis ultrices tortor tooltip 3 <img src="../images/tooltip/avatar3.jpg" alt="user3"/> Rebecca Banks . Mauris porta erat vitae mauris tooltip 4 <img src="../images/tooltip/avatar4.jpg" alt="user4"/> Benjamin Green facilisis pellentesque. Praesent sed ornare ligula. Nunc at faucibus ante. Cras pellentesque diam eu porta egestas.

Adding the code above you will get such kind of tooltips as shown below.

Result:


Dividers

There are several variants of divider style in Allec template. Main class for it is called divider. Here's a default code to show divider in your website.

                        
                        

Adding the code above you will get default divider as shown below.

Result:

Add class-modificator divider--double to the main class divider to get double line style as shown in the code below.

                        
                        

Adding the code above you will get such kind of divider as shown below.

Result:

Add class-modificator divider--double-dotted to the main class divider to get double dotted line style as shown in the code below.

                        
                        

Adding the code above you will get such kind of divider as shown below.

Result:

Add class-modificator divider--dotted to the main class divider to get dotted one line style as shown in the code below.

                        
                        

Adding the code above you will get such kind of divider as shown below.

Result:

Add class-modificator divider--colored to the main class divider to get line with colored circles on the center as shown in the code below.

                        
                        

Adding the code above you will get such kind of divider as shown below.

Result:

Add class-modificator divider--icon to the main class divider to get line with icon on the center as shown in the code below.

                        
                        

Adding the code above you will get such kind of divider as shown below.

Result:

Other the main class divider-brand gives divider with color line on the center

                        
                        

Adding the code above you will get such kind of divider as shown below.

Result:


Sequences

Allec Template has 5 types of sequence.

First style. Add class-modificator sequence--clickable to the main class sequence to get round style as shown in the code below.

                        
                        
{1}
Research
{2}
Prototyping
{3}
Design
{4}
Development
{5}
Result

Adding the code above you will get such kind of sequence as shown below.

Result:


Second style. Add class-modificator sequence--colored to the main class sequence to get colored round style as shown in the code below.

                        
                        

Adding the code above you will get such kind of sequence as shown below.

Result:


Third style. Add class-modificator sequence--progress to the main class sequence to get progress style as shown in the code below.

                        
                        
Done
2
Prototyping
3
Design
4
Development
5
Result

Adding the code above you will get such kind of sequence as shown below.

Result:


Fourth style. Add class-modificator sequence--progress-alt to the main class sequence and sequence--progress to get alternative progress style as shown in the code below.

                        
                        
Done
2
Prototyping
3
Design
4
Development
5
Result

Adding the code above you will get such kind of sequence as shown below.

Result:


Fifth style. Add class-modificator sequence--progress-commerce to the main class sequence and sequence--progress to get commerce progress style as shown in the code below.

                        
                        
review cart
enter shipping info
enter billing info
complete payment
ordered

Adding the code above you will get such kind of sequence as shown below.

Result:



Breadcrumbs

If you want to use breadcrumbs on the page, paste the code below after header section on your page:

                        
<h2 class="heading">Notifications</h2>

Adding the code above you will get breadcrumb as shown below.

Result:



Modal windows

Modal window shortcodes have been built based on Bootstrap modal components. Here's an example of code responsible for default modal window style.

                          
                          <div class="modal" id="modal">
                            <div class="modal-dialog">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal">
                                  
                                </div>

                                <div class="modal-body">
                                    
                                </div>
                                
                                <div class="modal-footer">
                                    
                                </div>
                              </div>
                            </div>
                          </div>
                          
                    

Adding the code above you will get modal window as shown below.

Result:

Every window could has a fade effect. There are effects available in Allec: fade fade--in, fade fade--zoom, fade fade--scale, fade fade--flip



Note! All this patterns and their code you can find in demo html files in folder "shortcodes". This is main shortcodes, but you should remember that many other parts of code can be reused in many pages. You can combine elements as you need without losing quality.




Page Constructor

Allec template has a special file for starting work on a new page using elements you need from other pages. It is page-constructor.html. This file contains default pattern for header with full working navigation block and footer with working twitter feed.


How to work with page constuctor?

  1. Create copy of file page-constructor.html and change name on your new page [1].
  2. Open this file with a text editor (SublimeText, Notepad++, Notepad, Dreamweaver etc.).
  3. Copy code of an appropriate block. Example of code can be found in this section (Page Constructor) below. For example, copy code of “Block with Special offer”:
                                    
    <h2 class="block-title block-title--simple block-title--bottom-s block-title--top-middle">Special Deals</h2>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.

    $40

    Grab It Now
  4. Insert recently copied code into your opened file in line 351 (after a comment <!-- COPY YOUR CODE OF BLOCK BELOW -->).
  5. Save changes.
  6. Open you file to see changes. For our example we get this page with “Block with Special offer”:

Primary block for page constuctor

There is a list of reusable, reliable and separated blocks that you can use with page-constructor.html. You can combine all these blocks as you need.


Default fullwidth slider

Here's an example of code that refers to Default fullwidth slider in Allec template.

                        

                        
                        
<h2 class="full-placeholeder__headind slider__heading">Just Awesome
&
Worth to Try</h2> Download Now

Great pixel perfect template which suites any needs. Some subheader text goes here.

Note! Don't forget to change the path to your images.

Additionally you need to include stylesheet for this slider in <head> tag:

                        
                        
                        <link rel="stylesheet" href="external/rs-plugin/css/settings.css">
                        
                        <link rel="stylesheet" href="external/rs-plugin/css/layers.css">
                        <link rel="stylesheet" href="external/rs-plugin/css/navigation.css">
                    

And javascript file at bottom of page (before closed tag <body>):

                        
                        
                        <script src="external/rs-plugin/js/jquery.themepunch.tools.min.js?rev=5.0">
                        <script src="external/rs-plugin/js/jquery.themepunch.revolution.min.js?rev=5.0">

                        <script>
                            $(document).ready(function() {
                                revDefault();
                            });
                        </script>
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Default fullwidth shop slider

Here's an example of code that refers to Default fullwidth shop slider in Allec template.

                        
                        
                        
<h2 class="slider__heading--sm-danger">Only on Allec May Offer</h2> <h2 class="slider__heading--lg-primary">Best Pack of the Month</h2> Grab It Now

Note! Don't forget to change the path to your images.

Additionally you need to include stylesheet for this slider in <head> tag:

                        
                        
                        <link rel="stylesheet" href="external/rs-plugin/css/settings.css">
                        
                        <link rel="stylesheet" href="external/rs-plugin/css/layers.css">
                        <link rel="stylesheet" href="external/rs-plugin/css/navigation.css">

                    

And javascript file at the bottom of the page (before closed tag <body>):

                        
                        
                        <script src="external/rs-plugin/js/jquery.themepunch.tools.min.js?rev=5.0">
                        <script src="external/rs-plugin/js/jquery.themepunch.revolution.min.js?rev=5.0">

                        <script>
                            $(document).ready(function() {
                                revAlternative();
                            });
                        </script>
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Feature block (slider view for mobile device)

Here's an example of code that refers to Feature block in Allec template.

                        
                        
<h3 class="not-visible">Main conrainer</h3>
<img src="images/feature/1.png" alt="">
<h3 class="feature__heading">Allec showcase</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.

<img src="images/feature/2.png" alt="">
<h3 class="feature__heading">Compatible with any device</h3>

Aenean porta, elit vitae tristique consequat, nisi tellus tincidunt erat, sit amet interdum elit quam at velit. Mauris venenatis metus sed purus tincidunt placerat.

<img src="images/feature/3.png" alt="">
<h3 class="feature__heading">Quick implementation</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.

Additionally you need to include javascript code at the bottom of the page (before closed tag <body>):

                        
                        <script>
                            $(document).ready(function() {
                                featureSlider();
                            });
                        </script>
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Number block (count active)

Here's an example of code that refers to Number block (count active) in Allec template.

                        
                        
<h2 class="block-title block-title--simple" id="number-start">Allec in Numbers</h2>

download

0

spent hours

0

countries

0

loyal clients

0

Additionally you need to include javascript file and code at the bottom of the page (before closed tag <body>):

                        
                         
                        <script src="external/inview/jquery.inview.js"></script>

                         <script>
                            $(document).ready(function() {
                                numberStart();
                            });
                        </script>
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Fading slider

Here's an example of code that refers to Fading slider in Allec template.

                        

                        
<h2 class="block-title block-title--top-larger">Available Services</h2>
<h3 class="service__heading">Reasonable Price</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.

<h3 class="service__heading">Made with Love</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.

<h3 class="service__heading">Fully Customizable</h3>

Nullam lacinia nibh et nisi luctus rhoncus. Cras vitae purus volutpat, rhoncus mauris quis, elementum neque. In cursus magna eget consequat placerat. Nulla facilisi.

<h3 class="service__heading">Premium-class Support</h3>

Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.

<h3 class="service__heading">Efficient Workflow</h3>

Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.

<h3 class="service__heading">Innovative Technologies</h3>

Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.

Additionally you need to include javascript file at the bottom of the page (before closed tag <body>):

                        
                        fadingSlider();
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Video block

Here's an example of code that refers to Video block in Allec template.

                        

                        
<h2 class="block-title block-title--simple block-title--bottom-s block-title--top-large">Check Allec in Action</h2>
  • Etiam augue sem, pellentesque
  • Duis nec neque posuere, gravida
  • Cras felis nunc, tempus ut
  • Ut tincidunt varius pellentesque. Aenean laoreet nibh et nulla
  • Donec imperdiet posuere dolor, at fringilla augue
  • Etiam augue sem, pellentesque
  • Duis nec neque posuere, gravida
  • Cras felis nunc, tempus ut
  • Ut tincidunt varius pellentesque. Aenean laoreet nibh et nulla
  • Donec imperdiet posuere dolor, at fringilla augue

Note! Replace src attribute value in iframe to isert your video.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Service block (small service icon)

Here's an example of code that refers to Service block (small service icon) in Allec template.

                        
                        
<h2 class="block-title block-title--top-larger">Available Services</h2>
<h3 class="service__heading">Made with Love</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.

<h3 class="service__heading">Fully Customizable</h3>

Nullam lacinia nibh et nisi luctus rhoncus. Cras vitae purus volutpat, rhoncus mauris quis, elementum neque. In cursus magna eget consequat placerat. Nulla facilisi.

<h3 class="service__heading">Premium-class Support</h3>

Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.

<h3 class="service__heading">Reasonable Price</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.

<h3 class="service__heading">Efficient Workflow</h3>

Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.

<h3 class="service__heading">Innovative Technologies</h3>

Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Service block (large service icon)

Here's an example of code that refers to Service block (large service icon) in Allec template.

                        
                        
<h2 class="block-title block-title--top-larger">We Offer You</h2>
<h3 class="service__heading">Cloud Computing</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est.

<h3 class="service__heading">Large Network</h3>

Fusce in posuere lorem. Proin eleifend viverra orci, at blandit arcu feugiat mollis. Nunc congue erat ornare metus congue venenatis.

<h3 class="service__heading">Good Mood</h3>

Phasellus scelerisque nunc dolor, at adipiscing purus molestie sollicitudin. Phasellus accumsan mi ultricies lorem feugiat sodales vitae sed turpis.

<h3 class="service__heading">Prompt Launch</h3>

Fusce diam nibh, sollicitudin eu fringilla eget, consequat tincidunt purus. Phasellus accumsan mi ultricies lorem feugiat sodales vitae sed turpis.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Service block with step description

Here's an example of code that refers to Service block with step description in Allec template.

                        
                        
01 <h2 class="service-step__heading">Responsive Web Design</h2>

Integer vel sollicitudin justo. Morbi odio ligula, imperdiet eget placerat nec, suscipit id urna. Aliquam erat volutpat. Cras vel sollicitudin felis. Curabitur erat eros, consectetur eu nibh ac, sodales commodo nisl.raesent placerat sed purus ac ullamcorper. Phasellus quis libero in tortor hendrerit facilisis sed sit amet nunc.

<img src="images/gallery/thumbs-full/1.jpg" alt="">
<img src="images/sample/22.jpg" alt="">
02 <h2 class="service-step__heading">Individual Approach</h2>

Donec eget molestie neque, dapibus lacinia elit. Aenean non erat et metus pulvinar dapibus. Maecenas eros erat, blandit eget arcu in, interdum ultricies neque. Praesent egestas tortor vitae congue luctus. Integer leo turpis, venenatis et lectus non, dictum egestas nibh. Phasellus rutrum odio quis sem dapibus.

<img src="images/blog/full-width/9.jpg" alt="">
<img src="images/gallery/thumbs-full/20.jpg" alt="">
03 <h2 class="service-step__heading">Spectaculous Support</h2>

Donec eget molestie neque, dapibus lacinia elit. Aenean non erat et metus pulvinar dapibus. Maecenas eros erat, blandit eget arcu in, interdum ultricies neque. Praesent egestas tortor vitae congue luctus. Integer leo turpis, venenatis et lectus non, dictum egestas nibh. Phasellus rutrum odio quis sem dapibus.

<img src="images/blog/full-width/7.jpg" alt="">
<img src="images/blog/full-width/8.jpg" alt="">

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Service block with presentation images

Here's an example of code that refers to Service block with presentation images in Allec template.

                        
                        
<img src="images/services/1.jpg" alt="">
<h3 class="service__heading">Cloud Computing</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est.

<h3 class="service__heading">Large Network</h3>

Fusce in posuere lorem. Proin eleifend viverra orci, at blandit arcu feugiat mollis. Nunc congue erat ornare metus congue venenatis.

<h3 class="service__heading">Prompt Launch</h3>

Fusce diam nibh, sollicitudin eu fringilla eget, consequat tincidunt purus. Phasellus accumsan mi ultricies lorem feugiat sodales vitae sed turpis.

<img src="images/services/2.jpg" alt="">
<h3 class="service__heading">Web Design</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est.

<h3 class="service__heading">App Design</h3>

Fusce in posuere lorem. Proin eleifend viverra orci, at blandit arcu feugiat mollis. Nunc congue erat ornare metus congue venenatis.

<h3 class="service__heading">Development</h3>

Fusce in posuere lorem. Proin eleifend viverra orci, at blandit arcu feugiat mollis. Nunc congue erat ornare metus congue venenatis.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Service block with icons shadow

Here's an example of code that refers to Service block with icons shadow in Allec template.

                        
                        
<h3 class="service__heading">Cloud Computing</h3>

Sed in lacus adipiscing, dictum elit viverra, ultricies mi. Aliquam quis placerat massa. Mauris at augue erat.

<h3 class="service__heading">Large Network</h3>

Praesent fermentum accumsan vulputate. Sed velit nulla, sagittis non erat id, dictum vestibulum ligula.

<h3 class="service__heading">Prompt Launch</h3>

Maecenas congue dui id posuere fermentum. Morbi at iaculis nibh, at semper augue.

<h3 class="service__heading">Web Design</h3>

Phasellus venenatis ligula in faucibus consequat. Aliquam dictum nulla eu varius porta.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Block with special offer

Here's an example of code that refers to Block with special offer in Allec template.

                        
                        
<2 class="block-title block-title--simple block-title--bottom-s block-title--top-middle">Special Deals</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.

$40

Grab It Now

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Block with special offer (extend version)

Here's an example of code that refers to Block with special offer (extend version) in Allec template.

                        
                        
<h2 class="block-title block-title--simple block-title--bottom-s">Today’s Special Deal</h2>
<img class="offer__images" src="images/components/dashboard1.png" alt="">

regular price

<img class="offer__images" src="images/components/dashboard2.png" alt="">

today’s discount

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in lacinia quam. Fusce quis nulla tincidunt, interdum magna vitae, viverra est. Nunc eu sodales turpis, varius viverra mauris.

Get It Now

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Blog preview (full blog layout)

Here's an example of code that refers to Blog preview (full blog layout) in Allec template.

                        
                        
<h2 class="block-title block-title--top-larger">Our Recent Research</h2>

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Subscribe area

Here's an example of code that refers to Subscribe area in Allec template.

                        
                        

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Pricing table area

Here's an example of code that refers to Pricing table area in Allec template.

                        
                        
<h2 class="block-title block-title--simple block-title--inverse">Choose Your Plan </h2>
<h4 class="price__package">{ 1 Gb }</h4>
  • -
  • -
  • $ 19 per month
<h4 class="price__package">{ 5 Gb }</h4>
  • -
  • fermentum consequat
  • $ 29per month
<h4 class="price__package">{ 10 Gb }</h4>
  • dictum risus vel
  • vel diam fringilla
  • $ 39per month
<h4 class="price__package">{ 15 Gb }</h4>
  • dictum risus vel
  • fermentum consequat
  • $ 49per month

Fusce in posuere lorem. Proin eleifend viverra orci, at blandit arcu feugiat mollis. Nunc congue erat ornare metus congue venenatis. Quisque sit amet leo tempor, adipiscing justo et, vulputate sapien. Donec tempus purus et vulputate faucibus.

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Standard pricing table area

Here's an example of code that refers to Standard pricing table area in Allec template.

                        
                        
<h2 class="block-title block-title--simple" id="prices">Choose Pricing Plan</h2>
<h4 class="price__package">Basic</h4>

$12

monthly

  • Limited Products
  • 30 Staff Login
  • 150 File Upload
  • -
  • Easy Control
<h4 class="price__package">advanced</h4>

$42

monthly

  • Unlimited Products
  • 70 Staff Login
  • 550 File Upload
  • Technical Support
  • Easy Control

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Clients/Partners slider

Here's an example of code that refers to Clients/Partners slider in Allec template.

                        
                        
<h2 class="block-title block-title--top-larger">Our Partners</h2>

Additionally you need to include javascript file at the bottom of the page (before closed tag <body>):

                        
                        <script>
                            $(document).ready(function() {
                                sliderSides();
                            });
                        </script>
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Testimonial area

Here's an example of code that refers to Testimonial area in Allec template.

                        
                        
Testimonials
<h3 class="sub-header sub-header--simple">People who believe in us:</h3>
  • <img src="images/avatars/1.jpg" alt="">

    Valentino Sorano

    CEO, Themeforest

    “Donec euismod turpis id ullamcorper lobortis. Maecenas faucibus ipsum sem, sed consequat ante consectetur non. Nam at neque dui. Integer id risus sit amet justo varius semper quis ut enim.”

  • <img src="images/avatars/4.jpg" alt="">

    Ashley Spencer

    CEO, Envato

    “Aenean rutrum aliquet odio, ut posuere ante eleifend ac. Donec venenatis diam sapien, malesuada euismod diam rutrum a. ”

  • <img src="images/avatars/5.jpg" alt="">

    James Bennett

    CEO, Photodune

    Quisque feugiat facilisis ipsum ut lobortis. Integer hendrerit sodales nisl nec tristique. Aenean commodo sapien ac tellus pharetra, quis tristique mi posuere.

  • <img src="images/avatars/2.jpg" alt="">

    Valentino Sorano

    CEO, Themeforest

    “Aenean rutrum aliquet odio, ut posuere ante eleifend ac. Donec venenatis diam sapien, malesuada euismod diam rutrum a. ”

  • <img src="images/avatars/3.jpg" alt="">

    Valentino Sorano

    CEO, Themeforest

    Quisque feugiat facilisis ipsum ut lobortis. Integer hendrerit sodales nisl nec tristique. Aenean commodo sapien ac tellus pharetra, quis tristique mi posuere.

  • <img src="images/avatars/1.jpg" alt="">

    Valentino Sorano

    CEO, Themeforest

    “Donec euismod turpis id ullamcorper lobortis. Maecenas faucibus ipsum sem, sed consequat ante consectetur non. Nam at neque dui. Integer id risus sit amet justo varius semper quis ut enim.”

  • <img src="images/avatars/4.jpg" alt="">

    Ashley Spencer

    CEO, Envato

    “Aenean rutrum aliquet odio, ut posuere ante eleifend ac. Donec venenatis diam sapien, malesuada euismod diam rutrum a. ”

<h3 class="sub-header sub-header--simple sub-header--mobile">Support our team:</h3>

Additionally you need to include stylesheet for this slider in <head> tag:

                        
                        
                        <link href="external/mCustomScrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
                    

And javascript file at bottom of page (before closed tag <body>):

                        
                        
                        <script src="external/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

                        <script>
                            $(document).ready(function() {
                                scrollSlider();
                            });
                        </script>
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Testimonial block without background and additional block

Here's an example of code that refers to Testimonial block without background and additional block in Allec template.

                        
                        
<h2 class="block-title block-title--top-larger">What people Say</h2>
  • <img src="images/avatars/20.png" alt="">

    Valentino Sorano

    CEO, Themeforest

    “Donec euismod turpis id ullamcorper lobortis. Maecenas faucibus ipsum sem, sed consequat ante consectetur non. Nam at neque dui. Integer id risus sit amet justo varius semper quis ut enim.”

  • <img src="images/avatars/4.jpg" alt="">

    Ashley Spencer

    CEO, Envato

    “Aenean rutrum aliquet odio, ut posuere ante eleifend ac. Donec venenatis diam sapien, malesuada euismod diam rutrum a. ”

  • <img src="images/avatars/2.jpg" alt="">

    James Bennett

    CEO, Photodune

    Quisque feugiat facilisis ipsum ut lobortis. Integer hendrerit sodales nisl nec tristique. Aenean commodo sapien ac tellus pharetra, quis tristique mi posuere.

  • <img src="images/avatars/5.jpg" alt="">

    Valentino Sorano

    CEO, Themeforest

    “Aenean rutrum aliquet odio, ut posuere ante eleifend ac. Donec venenatis diam sapien, malesuada euismod diam rutrum a. ”

  • <img src="images/avatars/3.jpg" alt="">

    Valentino Sorano

    CEO, Themeforest

    Quisque feugiat facilisis ipsum ut lobortis. Integer hendrerit sodales nisl nec tristique. Aenean commodo sapien ac tellus pharetra, quis tristique mi posuere.

  • <img src="images/avatars/1.jpg" alt="">

    Valentino Sorano

    CEO, Themeforest

    “Donec euismod turpis id ullamcorper lobortis. Maecenas faucibus ipsum sem, sed consequat ante consectetur non. Nam at neque dui. Integer id risus sit amet justo varius semper quis ut enim.”

  • <img src="images/avatars/4.jpg" alt="">

    Ashley Spencer

    CEO, Envato

    “Aenean rutrum aliquet odio, ut posuere ante eleifend ac. Donec venenatis diam sapien, malesuada euismod diam rutrum a. ”

Additionally you need to include stylesheet for this slider in <head> tag:

                        
                        
                        <link href="external/mCustomScrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
                    

And javascript file at bottom of page (before closed tag <body>):

                        
                        
                        <script src="external/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js">

                        <script>
                            $(document).ready(function() {
                                scrollSlider();
                            });
                        </script>
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Contact block

Here's an example of code that refers to Contact block in Allec template.

                        
                        
Need Help? +1-888-555-5555 Call Our Support Team 24/7

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Recent/Similar post block

Here's an example of code that refers to Recent/Similar post block in Allec template.

                        
                        
                    

Additionally you need to include javascript code at the bottom of the page (before closed tag <body>):

                        <script>
                            $(document).ready(function() {
                                itemCarousel();
                            });
                        </script>
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Achievement block

Here's an example of code that refers to Achievement block in Allec template.

                        
                        
<h4 class="achivement-item__heading">2nd place</h4>

at International IT Competion

<h4 class="achivement-item__heading">1st place</h4>

on XX Annual Technology Conference

<h4 class="achivement-item__heading">2nd place</h4>

at Global Innovative Forum

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Default promobox

Here's an example of code that refers to Default promobox in Allec template.

                        
                        
<h3 class="promo__heading">Designzway Team</h3>

We are on our way to perfection

Contact Us

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Brand promobox

Here's an example of code that refers to Brand promobox in Allec template.

                        
                        
<h3 class="promo__heading">1 452 clients</h3>

They’re satisfied. We’re happy

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Parallax promobox

Here's an example of code that refers to parallax promobox with buttons in Allec template.

                        
                        
<h3 class="promo__heading">Sophisticated Solutions Here</h3>

Download Newest App

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Note! You need to change background image in class-modificator promo--parallax to your own


Video promobox

Here's an example of code that refers to promobox with video in Allec template.

                        
                        
<video id='video-promo' class="media-element" autoplay="autoplay" preload='none' loop="loop" muted="" src="../video/comp.mp4" > <source type="../video/webm" src="video/comp.webm"> <source type="../video/mp4" src="video/comp.mp4"> <source type="../video/ogg" src="video/comp.ogv"> </video> <h3 class="promo__heading">Watch and Admire</h3>

App Video Presentation

Learn More

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Note! You need to change video sources in video tag to your own


Promobox with bubble canvas animation

Here's an example of code that refers to promobox with bubble canvas animation in Allec template.

                        
                        
<h3 class="promo__heading">Serching for something special?</h3>

Allec is everything you need for outstanding website

Try It Today

Additionally you need to include javascript files at the bottom of the page (before closed tag <body>):

                        
                        <script src="../external/animated-header/js/TweenLite.min.js"></script>
                        <script src="../external/animated-header/js/EasePack.min.js"></script>
                        <script src="../external/animated-header/js/rAF.js"></script>
                        <script src="../external/animated-header/js/animation-bubble-fixed.js"></script>
                    

Using the code above in your page, you get style as shown in the screenshot below.

Result:

Note! You need to change background image in class-modificator promo--canvas to your own




Site Builder

Allec Site Builder is 176 modular, clear and well separated functional components, which allow you to create multiple pages and save them. In full Site Builder documentation your find details about work and installation (Note! Before installation, you must create an empty database).

Requirements

To be able to use AllecSite Builder, you must have the following:

  1. A LAMP server (Linux/Unix + Apache + MySQL + PHP)
  2. Apache web server with mod_rewrite enabled
  3. PHP 5.1.6 or newer
  4. PHP MySQLi extension (regular MySQL might work but is not tested)

If you want to work locally you can install, for example, Apache.

Drag and drop

Allec Site Builder allows users to drag HTML elements onto a canvas and drop them where they'd like them to appear. Once dropped onto the canvas, the position can be changed by dragging and dropping as well. Elements can be deleted individually or all elements on the current page can be deleted in one go.

Content editing

Allec Site Builder can also be used to edit almost all content inside each element (text, images, links, styles, videos, tables). This allows the user to click on any written text and change it (each element has a "reset" button as well which will return the element to its original state).

Cloning elements

Allec Site Builder allows users to clone elements on the canvas.

Editing HTML

With Allec Site Builder you can edit the source HTML of each block on the canvas.

Site and page settings

Allec Site Builder allows users configure certain settings for an entire site, you can also configure certain settings for each page within a given site.

Exporting and publishing sites

Allec Site Builder, also, allows users to export their sites at any given time and publish it to a live webserver using FTP. (Note! You can't export or publish your site in demo version. )




FAQs

Here you can find the answers to most frequently asked questions regarding Allec template.


How to work with Allec Template main menu?

You need to declare these files to make main menu works:

  • custom.js - initialization of main menu. (path: js/)
  • jquery.mobile.menu.js - main menu core javascript file. (path: external/z-nav/)
  • z-nav.css - default styles for main menu. (path: external/z-nav/)

All these files are included into pages.

For example, there is an html structure of main menu with menu level 2 and menu level 3:

                        
                    

Adding the code above you will get such kind of main menu as shown below.

Result:

Function of each classes:

  • z-nav - primary class of main menu
  • z-nav__toggle - toggle for menu mobile view [1]
  • z-nav-inner - container for menu
  • z-nav__list - list that contains all items of menu
  • z-nav__item - item of menu [2]
  • z-nav__link - link on menu item
  • z-nav__toggle-sub, plus - two classes for subsidiary menu toggle [3]
  • z-nav__link--active - class for active menu item
  • z-nav__list-secondary - class for second level menu [4]
  • z-nav__list-secondary, z-nav_nested - two classes that are needed for third menu level [5]

Initialization of main menu in custom.js begins in line 131. You can change:

  • triggerMenu - class of toggle for menu mobile view.
  • subMenuTrigger - class for subsidiary menu toogle in menu mobile view.
  • animationSpeed - speed of appearance mobile menu (in milliseconds).

For example:

                        triggerMenu: '.your-class',
                        subMenuTrigger: ".your-class-second",
                        animationSpeed: 850
                    


How to work with sliders?

In Allec template there are several specific sliders that need additional information about usage.

Each slider is initialized by own javascript function. These functions are located in custom.js (path js/custom.js):

  • revDefault() - line 240 Revolution Slider with default settings (you can see this slider on index1.html - hero slider).
  • revAlternative() - line 276 Revolution Slider (you can see this slider on index-commerce.html - hero slider).
  • royalSlider() - line 307 Royal Slider (you can see this slider on index2.html - hero slider).
  • flexSlider() - line 332 Flex Slider (you can see this slider on index3.html - hero slider).
  • staffSlider() - line 345 slider with 2 row (you can see this slider on about.html - our team section)
  • minimalSlider() - line 366 slider with minimal designs (you can see this slider on case-study.html - slider for project)
  • dateSlider() - line 387 slider with date (you can see this slider on blog.html)
  • scrollSlider() - line 366 (you can see this slider on single-product-full.html)
  • fadingSlider() - line 647 (you can see this slider on index.html Available Services section)
  • productSlider() - line 854 (you can see this slider on single-product-full.html)

If you want to use the slide,you need to declare the appropriate function on the page with the corresponding html for this slide. This function is declaring at the bottom of the page, before closing <body>. For example:

                        <script>
                            $(document).ready(function() {
                            staffSlider();
                            });
                        </script>
                    


How to switch to boxed version?

Please go through the following steps to switch it at your page

  • Open an html file in text editior, where you want to use boxed layout.
  • Paste following code after declaring style.css:
    <link href="css/boxed.css?v=1" rel="stylesheet" />
  • Save changes


How to switch to RTL version?

Please go through the following steps to switch RTL version at your page

  • Open an html file in text editior, where you want to use RTL layout.
  • Paste following code after declaring style.css:
    <link href="css/style-rtl.css?v=1" rel="stylesheet" />
  • Save changes

How to work with Ecwid E-commerse?

Allec Template has embedded Ecwid E-commerce Shopping Cart from Ecwid. All you need is to copy “Store ID” and paste it into shop-ecwid.html. Go through the following steps to get working shop:

  1. "Log in" into your Control Panel at Ecwid.
  2. Copy "Store ID" number [1]
  3. Open shop-ecwid.html in text editor.
  4. Replace test store (1003) in source at your own in line 80. For example:
                                    <script type="text/javascript" src="http://app.ecwid.com/script.js?1003" charset="utf-8"></script>
                                
  5. Save changes.

More information about Ecwid can be found at Ecwid forum and Ecwid help center.


How to work with animated icons?

Livicons are animated vector icons. Please go through the following steps to enable them in your page.

  1. First of all you need to declare these JS files in your page.
                                        
                                        <script src="raphael-min.js">
                                        <script src="livicons-1.2.min.js">
                                    
  2. Add tag <i>, <span> or other tags with class "livicon" and data attribute.
    <i class="livicon" data-name="comments" data-color="#34495e" data-hovercolor="#34495e"></i>
  3. Save changes.
You can find more information about data attribute and depp configuration in livicon documentation .


How to change the Google map location?

  1. Open file js/custom.js
  2. Find one of these functions (it depends on what kind of map is used in the site):

    • initMap() (line 1069) - classic map
    • initMapVintage() (line 1099) - black and white map
    • initMapLocation() (line 1202) - grey and white map.

  3. Then find the line of code new google.maps.LatLng. This is a center of each map. This code is located in different lines depending on what function of mentioned above is used in the site:

    • initMap() - line 1074.
    • initMapVintage() - line 1104.
    • initMapLocation() - line 1207.

  4. You should change '40.717729,-74.006648' to your own. You can find an appropriate value at Google Maps GPS Coordinates

Also, You can add your own marker.

  1. You should change a path to the marker icon to your own in one of functions mentioned above depending on which one is used in your site.
  2. Add icon size in the end of code.

    For example:

                                    var myIconB = new google.maps.MarkerImage( “PATH TO YOUR ICON”, null, null, null, new google.maps.Size(57,64));
                                

    Here’s a list of lines of code where you can change icon path:

    • initMap() - line 1085.
    • initMapVintage() - line 1115.
    • initMapLocation() - line 1218.

More details about Google maps customization are at official Google Developers website


How to work with contact form?

Allec template contains fully working contact form. All you need is to insert your actual e-mail address:

  1. Open the send.php (file located in the root folder) with any text editor (SublimeText, Notepad++, Notepad, Dreamweaver etc.) and replace the instance of "YOUR_EMAIL_HERE" (line 13)
  2. Make the same changes in file question.php (line 13) to get working support form at “Contact” pages.

If you want to add a new field to contact form go through the following steps:

  1. Open html file with contact form.
  2. Add a new field to a contact form.
  3. Add class, type and name attributes, for example:
                                    
                                
  4. Open file form.js in js folder.
  5. Add new variables in contact form declaration, for example:
    • add new variable after line 27 :
                                              var $address = self.find('[name=contact-address]');
                                          
    • add validation block after line 51:
                                              if($address.val().length>2 && $address.val()!= $address.attr('placeholder')) {
                                                 $address.removeClass('invalid_field');
                                              }
                                              else {
                                                 createErrTult('There is no any address.', $address)
                                                 error++;
                                              }
                                          

      This will generate error if field is empty. You can change createErrTult() (line 6 in example above) first argument which is an error message.

  6. Open send.php file, that are located in the root folder.
  7. Add new variable, for example, after line 16:
                                    $address = $_POST["contact-address"];
                                
    contact-address - a name of a newly created field
  8. Add new value line with previously created variable $address into variable $text (this is a text that you get in email when user sends the message via your contact form). For example:
                                    $text = "Name: $name
    Email: $email
    Address: $address
    Message: $message";

How to work with MailChimp Subscribe Forms?

Allec Template has embedded subscribe form from Mailchimp. All you need is to copy “action URL” and paste it into subscribe forms in your pages. Go through the following steps to get working subscribe form:

  1. "Log in" into your account at MailChimp.
  2. Click “Lists” [1], then choose “Signup Forms” from dropdown menu [2]. If you don’t have list you need to create it [2a].
  3. On the next page select “Embedded Forms” [4].
  4. Click on “Super Slim” tab [5].
  5. In "Copy/paste onto your site" section find tag <form> and copy action value [6].
  6. Replace copied value into form in your pages.

After these actions are done, newly created form will subscribe users to chosen list in your account.


How to work with Twitter Feed?

Getting Twitter Api Keys

  1. “Sign in” into your Twitter account at official Twitter Management website.
  2. Click “Create new App” [1] and enter the application details:
    • The name and description can be anything you like, but you can't use 'Twitter' in the name.
    • The website field can be your main website and doesn't have to be the site where your Twitter feed is located.
    • Callback URL can be left blank.
    • Click “Create your twitter application”.
  3. After creating application click on tab “Key and Access Tokens” [2], then click “create my access token”. You may have a need to refresh the page after a few seconds if it doesn't appear automatically.
  4. Make a note of the Consumer key, Consumer secret, Access token and Access token secret.


Setup Allec Twitter application

  1. Open get-tweets1.1.php (file located in the root folder) file in your text editor.
  2. Enter your twitter user name for $twitteruser = ""; (line 5)
  3. Enter your consumer key for $consumerkey = ""; (line 7)
  4. Enter your consumer secret key for $consumersecret = ""; (line 8)
  5. Enter your access token for $accesstoken = ""; (line 9)
  6. Enter your access token secret for $accesstokensecret = ""; (line 10)
  7. Save changes.

    For example:

                                    $twitteruser = "@OliaGozha";
                                    $consumerkey = "oN4CjnK9b9UPYKhtdYng";
                                    $consumersecret = "T2IjQ7gyhfmNwv0mUF3piYWZIoTgn7e4f8jbf1I9wU";
                                    $accesstoken = "89252733-7jIxFePY4shQbTArc5m0vojMIP7qs8niTqEjYKuPQ";
                                    $accesstokensecret = "3awDk0mUIenFkfEH9tER4VOLpi3XMJqxSBfosLfNJypgl";
                                
  8. Open external/twitterfeed/twitterfeed.js file in your text editor.
  9. Enter your twitter profile name for twitterprofile = ""; (line 6)
  10. Enter your twitter screen name for screenname = ""; (line 7)
  11. Save changes.

    For example:

                                    var twitterprofile = "OliaGozha";
                                    var screenname = "OliaGozha";
                                

Note! This is a technology for twitter stream using php for last news. For correct work you need any kind of php server for debugging website.


How to configure Disqus comments area?

  1. Log in at Disqus
  2. Choose “Add Disqus To Site” in profile dropdown [1].
  3. In next windows fill form [2-4] and click “Finish Registration” [5].
  4. Choose “Universal code” [6]
  5. In “Place the following code where you'd like Disqus to load:” section find variable disqus_shortname and copy value [7].
  6. Open an html file with disqus comments in text editor and find lines with javascript code (for example, page single-post-disqus.html line 450):
                                    var twitterprofile = "OliaGozha";
                                    var screenname = "OliaGozha";
                                
  7. Replace value of variable disqus_shortname in copied value in step 5.
  8. Save changes.

More information can be found at Disqus support page


How to add Facebook group like box to website?

  1. Go to Facebook social plugin documentation link.
  2. In right sidebar choose "Like box".
  3. Make your custom configuration. Preview window will show final result.
  4. Click on button "Get code".
  5. Choose tab "IFRAME" and copy code.
  6. Paste this code in appropriate place in html document.
  7. Save changes.

I have updated Site Builder to 1.7.6. Now, when I create a new project or open a site I get a white page. How to fix this issue?

You probably have compatibility issue with the database.
To fix the issue, simply run the following SQL statements on your Site builder database:

                            ALTER TABLE `pages` ADD `pages_preview` TEXT NOT NULL AFTER `pages_header_includes`;
                            ALTER TABLE `pages` ADD `pages_template` INT(1) NOT NULL DEFAULT '0';
                            ALTER TABLE `frames` ADD `frames_sandbox` INT(1) NOT NULL DEFAULT '0' AFTER frames_original_url;
                            ALTER TABLE `frames` ADD `frames_loaderfunction` VARCHAR(255) NOT NULL AFTER frames_original_url;
                        


How to assign values for counters in Numbers and Progressbar blocks?

To assign the values in Numbers block (counters) you should:

  1. Open an html file with counters in text editor. For example, file index.html
  2. Find code with counter container. For example:
  3.                                 

    download

    0
  4. Assign attribute value data-result (that is the final value and it can take different formats: number and string) and data-value (that is the value up to which you should count in script execution, it takes only numeric format) for the container.
  5. Save changes.

For Progressbar block you should:

  1. Open an html file with counters in text editor. For example, file single-employee.html
  2. Find code with progress block. For example:
  3.                                 
    UX/UI: 0%
  4. Assign attribute value data-level (that is a value within 0 and up to hundred which a script should count, it is also a final result) for the element.
  5. Save changes.


How to work with Flickr Feed?

  1. Open js/custom.js in text editor.
  2. Change Flickr id (line 871). For example:
    qstrings:       {id: '52617155@N08'},
  3. Save your changes.

How to work with Instagram Feed?

  1. Go to website Websta Instagram Web Viewer.
  2. Choose one of Parts Type (username, hashtag, popular) [1] [2].
  3. Choose widget item size and layout (how much items should be displayed) [3] [4].
  4. Choose decoration for widget item (border, background, spacing).
  5. Click on "Generate code" button [5].
  6. Copy code, open your page in text editor and paste copied code.
  7. Save your changes.

Setting time on Coming soon page

  1. Open coming-soon.html in text editor. At the bottom of the page find javascript code:
                                    <script>
                                        $(document).ready(function() {
                                                //CountDown
                                                var dateOfBeginning = "Jan 20, 2015",
                                                      dateOfEnd = "Dec 28, 2015";
    
                                                countDown(dateOfBeginning, dateOfEnd);            
                                            });
                                    </script>
                                
  2. Set two value:
    • dateOfBeginning - date of the beginning
    • dateOfEnd - date of the end
  3. Save your changes.

To set time on Coming soon page in Site Builder you need:

  1. Open elements/js/custom.js in your text editor.
  2. In counter init section (line 261) set two value:
                                    dateOfBeginning = "Jan 20, 2015", //type your date of the Beginnig
                                    dateOfEnd = "Dec 28, 2015"; //type your date of the end
                                
  3. Save your changes.



Credits


Once again, thank you so much for purchasing this template. As we've said at the beginning, we'd be glad to help you if you have any questions relating to this template. No guarantees, but we'll do our best to assist. If you have a more general question relating to the item on ThemeForest, you might consider visiting the forum and asking your question in the "Item Discussion" section.


Congruity Hub with Love