• Get Started

• PHP Tutorial

• Elements

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.
4. 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/...).
5. Read please the license and look at the credits.
6. Give me know if you will find some issues, or if you have some ideas. On this email address: [email protected]

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.

                
                

                

                    

                        Full name
                        

                            

                                
                                
                            
                        
                    
                    

                        Email
                        

                            

                                
                                
                            
                        
                    
                    

                        Message
                        

                            

                                
                                
                            
                        
                    

                    

                        

                            
                                Send Message
                        
                    
                
        

2. Then you will need to copy mailer.php from the root folder, and add line of code which you see below.