Get StartedDragonfly

Get Started

1How To Start

  1. After unzip the purchased file, you can choose HTML or PHP version of the Dragonfly. If you choose PHP version then you will need to install PHP localhost (to customize of the template in your computer). Tutorial how to install PHP localhost. HTML version doesn't need any installation.
  2. LESS Preprocessor - We recommend to customize Dragonfly right in this folder: assets/less/. Find the "variables.less" file and change for example one variable of color for whole template. Main file of all the LESS files called "main.less". All files are imported to this one main file. Also you can use some theme (structure of all themes are very similar to the "main.less", but every theme has difference variable of primary color). You can connect the main LESS file at the head of a page or you can compile it and then use as normal CSS file.
  3. Look at the Elements page, where you will find blocks of code. Shortcodes from dragonfly.css (dragonfly.css is generated from LESS files in the folder: assets/less/...).
  4. Read please the license and look at the credits.
  5. Give me know if you will find some issues, or if you have some ideas. On this email address:

2Structure of Files

  • Dragonfly.css

  • This file is generated from LESS files in the folder: assets/less/.

    List of the main category in the dragonfly.css file.

    1. Basic declaration
    2. Media Queries
    3. Typography - Headings, Body, Lists, Links, Colors
    4. Forms - Form with Icon, Transparent Form, Sign Up/In Pages
    5. Buttons - transparent buttons, extra large button, total transparent btn
    6. Images - max width 450px and 800px, max height 450px
    7. Helper Classes - spaces, hr, section, filling-section, small container
    8. Background - Background Color, Background Filter, Background Images
    9. Jumbotron / Header - Transparent Jumbotron
    10. Icons - Circle icons, Square icons, Colors of Icons
    11. Icons Effects - hovicon and few beautiful animations
    12. Icons Cover
    13. Content Boxes - Large Square, Right and Center Float Box
    14. Hover Content Boxes - Rotate (to the axis Y) Hover Effect, Slide from top and from bottom and more
    15. Thumbnails - News Thumbnail
    16. Navs - large tabs with icon, Full Width tabs, Inline Tabs, Filter Tabs, Filter Menu
    17. Collapse - accordion (using on the Support page)
    18. Navbar - Navbar Default (only dropdown-menu - rest of default navbar is in bootstrap.css ), transparent navbar
    19. Pagition - Pagition (circle)
    20. Animations - easeUp, easePulse
    21. Small Components - 404 Page, Testimonial, Alerts, Clients, Knobs, Google Maps, Back To Top, Slideshow - Macbook Pro frame
    22. Side Menu
    23. Footer
    24. Pricing Tables - 3 types
    25. Blog Page - categories, tags, comments
  • Scripts.js

    1. Separate scripts
      • Back to top button
      • Smooth scroll - from href to id
      • Remove conflict with loading animations
      • Sidebar
      • Smooth scrolling
      • Style Switcher
    2. Custom settings for plugins
      • Loading animations - wow.js
      • Filterable portfolio - jquery.mixitup.js
      • Slideshow - slippry.js
      • Make every elements sticky, just set a ID - jquery.sticky.js
      • Knobs - jquery.knob.js
  • Scripts inside the page

    1. About Us II (about-us-v2.php) and About Us III (about-us-v3.php) - Chart.js
    2. Contact (contact.php) and Home Page II (index-2.php) - Google Maps - initmap.min.js

3Contact Form (AJAX + PHP)

    Contact Form consists of three parts - mailer.php in the root folder, contact-form.js in the js folder (js/contact-form.js) and third part is in contact.php or index-2.php.

  1. You see below Html part of contact form.
  3. Then you will need to copy mailer.php from the root folder, and add line of code which you see below.