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:
Unzip Allec zip you have downloaded from ThemeForest
Open Allec HTML folder.
Find page you’re looking for to start work on your website.
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.
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.
Now you’ll see new window with Chrome Developer Tool where chosen element is highlighted in blue.
Remember the code that refers to your element or just copy it.
Switch to HTML text editor and find code you have just copied or remembered.
Make required changes in HTML text editor due to your needs.
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
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).
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;
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
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:
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:
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).
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:
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
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:
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.
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.
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:
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?
Create copy of file page-constructor.html and change name on your new page [1].
Open this file with a text editor (SublimeText, Notepad++, Notepad, Dreamweaver etc.).
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”:
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.
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.
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.
$ 9.99
Only on Allec May Offer
Best Pack of the Month
Duis aliquet ligula non risus sollicitudin commodo. Donec ullamcorper
lacinia turpis at aliquet. Cras consectetur fermentum erat,
in placerat ligula pharetra eget.
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.
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/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.
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>):
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.
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.
Nullam lacinia nibh et nisi luctus rhoncus. Cras vitae purus volutpat, rhoncus mauris quis, elementum neque. In cursus magna eget consequat placerat. Nulla facilisi.
Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.
Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.
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.
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.
Nullam lacinia nibh et nisi luctus rhoncus. Cras vitae purus volutpat, rhoncus mauris quis, elementum neque. In cursus magna eget consequat placerat. Nulla facilisi.
Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.
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.
Sed eget placerat arcu. Nullam porta faucibus ligula, egestas tempus tellus dapibus tincidunt. Nunc vitae interdum massa. Nam in augue quis elit sagittis accumsan.
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.
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.
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.
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.
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.
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.
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.
Join 51,000 community now and we’ll keep you posted!
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.
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. ”
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:
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:
A LAMP server (Linux/Unix + Apache + MySQL + PHP)
Apache web server with mod_rewrite enabled
PHP 5.1.6 or newer
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).
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:
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:
You can find more information about data attribute and depp configuration in livicon documentation .
How to change the Google map location?
Open file js/custom.js
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.
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.
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.
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.
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:
Allec template contains fully working contact form. All you need is to insert your actual e-mail address:
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)
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:
Open html file with contact form.
Add a new field to a contact form.
Add class, type and name attributes, for example:
Open file form.js in js folder.
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.
Open send.php file, that are located in the root folder.
Add new variable, for example, after line 16:
$address = $_POST["contact-address"];
contact-address - a name of a newly created field
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:
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:
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”.
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.
Make a note of the Consumer key, Consumer secret, Access token and Access token secret.
Setup Allec Twitter application
Open get-tweets1.1.php (file located in the root folder) file in your text editor.
Enter your twitter user name for $twitteruser = ""; (line 5)
Enter your consumer key for $consumerkey = ""; (line 7)
Enter your consumer secret key for $consumersecret = ""; (line 8)
Enter your access token for $accesstoken = ""; (line 9)
Enter your access token secret for $accesstokensecret = ""; (line 10)
Make your custom configuration. Preview window will show final result.
Click on button "Get code".
Choose tab "IFRAME" and copy code.
Paste this code in appropriate place in html document.
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:
Open an html file with counters in text editor. For example, file index.html
Find code with counter container. For example:
download
0
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.
Save changes.
For Progressbar block you should:
Open an html file with counters in text editor. For example, file single-employee.html
Find code with progress block. For example:
UX/UI: 0%
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.
