• Facebook
  • Twitter

Actly – Responsive HTML5 Template

Support Our Blog

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!


Scope of free support


We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

HTML Structure

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

Page structure

Below you will find default page structure :

CSS files and structure

If you would like to edit the color, font, or style of any elements, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.


So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.


The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

In order to create mega menus read the documentation here:

Yamm 3 Documentation


We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.
CSS Files & Structure

1. variables
2. mixins
3. datepicker
4. fonts
5. sections
6. animate
7. utilities
8. motive
9. typography
10. menu
11. buttons
12. lists
13. iconbox
14. icon
15. skills
16. blockquote
17. pricing
18. table
19. cta
10. tooltip
21. accordion
22. tabs
23. footer
24. copyright
25. form
26. breadcrumbs
27. flexslider
28. magnificpopup
29. slider
30. testimonial
31. courselist
32. coursesgallery
33. dropdown
34. sidebarcolumn
35. badge
36. choiceviev
37. graph
38. team
39. newsletter
40. singlecourse
41. headersection
42. pagination
43. mediasections
44. memberpage
45. mainparallax
46. tweet
47. videowachers
48. teacherbox
49. blogcontent
50. singlearticle
52. program
53. contactpage
54. loginpage
55. socialicons
56. videoarchive
57. portfolio
58. maps
59. intro-effects
60. snap


Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

  • Actly uses utilities for the following categories:
  • Typography
  • Display Types
  • Paddings
  • Margins
  • Colors
  • Font Colors
  • Borders
  • Backgrounds Colors
  • Font Sizes
  • Triangles

Media Sections

Actly supports media sections with Parallax, KenBurns effect and videos.

Parallax Section

We are using stellar.js for the parallax effect. Check their documentation to check which attributes you can use in each parallax section.

Our custom data-attributes for the parallax section are:

  • data-height: Define the minimun height for the sections
  • data-type: Type of Media Section (parallax/kenburns/video)
  • data-image: Background image for the section.
  • data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. This will help you with the bandwidth, you’re welcome! 🙂

Ken Burns Sections

KenBurns section supports one or more images that you should add inside .media-section-image-container

Our custom data-attributes for the kenburns section are:

  • data-height: Define the minimun height for the sections
  • data-type: Type of Media Section (parallax/kenburns/video)
  • data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Kenburns it too much for ipads, iphones and so on, so we allow you to fallback to a normal image section. This way your browser won’t crash 🙂

Video Sections

We recommend you to use html5 video instead of vimeo, since in some specific browsers the sound won’t be muted.

Our custom data-attributes for the video section are:

  • data-height: Define the minimun height for the sections
  • data-type: Type of Media Section (parallax/kenburns/video)
  • data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Phones don’t autoplay video, so we just replace it for an image



There are 6 types of section buttons – each for every template style, but feel free to use them wherever you want.
To add button, use the following HTML markup:

variable color types can be create with the following CSS classes:

  • btn-link
  • btn-primary
  • btn-default
  • btn-icon-right
  • btn-block active
  • btn-block btn-disabled


Progress Bars

To create progress bar use the following HTML markup:

Progress Bars

Progress Bars

Also don’t forget to include the javascript code:

Progress Icons

You can present progress made also with Progress Icons

Progress Icons

Progress Icons

You can use them with the following HTML markup:

Also remember to include required javascript:


In Actly you can create a chart with the simple HTML markup:

And the following javascript snippet:




You can choose from two types and seven colors of Socials:

  • ct-socialIcons–circle
  • ct-socialIcons–circlelg
  • ct-socialIcons–bgMotive
  • ct-socialIcons–fgrey
  • ct-socialIcons–fwhite
  • ct-socialIcons–fgreySm
  • ct-socialIcons-bgDarkBlue
  • ct-socialIcons-bgRed
  • ct-socialIcons-bgBlue


Create nice selects with the following HTML markup:

And javascript code:



Google Map

With Actly you can easily create Google Map:

Google Map

Google Map

Just use simple HTML markup:

And don’t forget to include the following javascript in gmaps/init.js:

Javascript Actly

All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript scripts:

  • Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
  • jQuery v1.10.2 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.)
  • jQuery FlexSlider v2.2.0
  • GMAP3 Plugin for JQuery v. 5.1.1
  • jQuery.appear
  • isotope (http://isotope.metafizzy.co/)
  • ct-mediaSections(with stellar.js)
  • snap.js
  • jquery.easing.1.3
  • device
  • jquery.pagescroller.lite
  • chart.min
  • jquery.countTo
  • jquery.magnificpopup.min
  • animate.css
  • gmaps
  • infinitescroll.min
  • select2


This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/



To create Flexslider use the following HTML markup:




Template comes with ready to use:

  • Contact Form
  • Newsletter Form

All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/form.php and change e-mails to your own :

That’s it!

Contact Form

HTML Markup:

Newsletter Form

HTML markup:

Modern Form

Actly comes with extended Modern Form

Modern Form

Modern Form

You can use it with the following HTML markup:

Notice to include also the following javascript:

Twitter Feed

This is live twitter feed. This plugin will grab your latest tweets and display them on page.
Configuration: – just edit twitter/config.php file :

Where can I get these keys, tokens, etc?

Twitter API requires authentication to display tweets from your account.
To twiiter feed work you need to create the ‘application’
and generate 4 special keys for your twitter account via https://dev.twitter.com/apps:
– Consumer key (key)
– Consumer secret (secret)
– Access token (token)
– Access token secret (token_secret)
Video tutorial : “How to create Twitter App”

Sources & Credits

The following sources and files have been used to build up this theme

Elite Author
We are elite
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!