• Facebook
  • Twitter

Delimondo 2.0 HTML – 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.

I.E.

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.

Colors

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:

Icons

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.

style.less
1. Animations
2. Utilities
3. Font awesome
4. Menu
5. Slick slider
6. Media Sections
7. Selectize
8. Magnificpopup
9. Typography
10. Section header
11. Portfolio
12. Icon box
13. Article box
14. Blockquote
15. Lists
16. Buttons
17. Slick navigation
18. Socials
19. Footer
20. Main slider
21. Booking box
22. Forms
23. Image box
24. Page header
25. Accordions
26. Pricing box
27. Testimonials
28. Gallery container
29. Blog
30. Pagination
31. Google maps
32. Info box
33. Pre loader
34. Progress bar
35. Tabs
36. Counters
37. Tables
38. Person box
39. Icons

For more advanced user – we included also folder with less files  – under assets/less you will find the following files:

motive.less – file for motive styling
buttons.less – file for buttons styling (colors, sizes etc.)


Javascript Components


JavaScript files:

  • /charts/ – script for canvas charts animating
  • /counters/ – Files needed for initialising the animation number after loading pages.
  • /ct-mediaSection/ – Media sections where we can add parralax, kenburns or video to the section. Dynamical content of medias.
  • /gmaps/ – Plugin needed for displaying google map on the page.
  • /magnificpopup/ – Needed for galleries and their popups images where we can review them with slides via arrows.
  • /portfolio/ – scripts for gallery isotope
  • /progressbars/ – files needed for initialising the animation bars after loading pages
  • /progressicons/ – files needed for initialising the animation icons after loading pages
  • /selectize/ – Plugin which creates select box for select tag in the page. It generates html code via javascript so that each browser can have the same select box.
  • /slick/ – Files which initialize sliders in the page.
  • /external.js/ – One big file where are minifixed javascript files:_ 1.jquery 2.boostrap 3.placeholder 4. easing 5. device.min.js 6. jquery browser 7.Snap min JS 8. jquery appear_
  • /main.js/ – The main javascript initializaions and other major snippets.

Screenshot

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

  • data-location – address to show
  • data-height – map height (if undefined height will be 220px)
  • data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here
HTML Markup:

All javascript code can be found in js/main.js file.

jquery.appear

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/

Charts.js

This plugin is used to make graphics.
Documentation: http://www.chartjs.org/


Blog – main page


Blog - Main Page

Blog – Main Page

HTML markup

Blog page in Delimondo 2.0 HTML has an option that user can see the other hidden posts. If the customer will click on the button the rest post will appear on the page. If the customer want to hide more posts – it is possible by adding .hidden class to the blog like here :

Adding .hidden Class

Adding .hidden Class


Blog – single page


Blog - Single Page

Blog – Single Page

 

HTML markup


Map


Map

Map

HTML markup

If the user click on the HIDE INFORMATION button, the map will slide up and the button changed the text. The component works like a accordion.

— Here we have a map from Google Map Plugin

HTML markup

Google maps – data attributes explanation

— data-location – use it for display your location on the Google map (e.g. can be a string: “New York”, or cords: 40.7198584,-74.0021416)
— data-height – use it for height adjustment
— data-zoom – use it to set the zoom

JavaScript – for both version

<script src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script src=”../assets/js/gmaps/gmap3.min.js”></script>
<script src=”../assets/js/gmaps/init.js”></script>


Map With Image Component


Delimondo 2.0 HTML has option to switch to the image instead of map. If you want to swap it, click on the button SHOW IMAGE/ SHOW MAP on the map section.

Map With Image Component

Map With Image Component

HTML markup

JavaScript – can be find in main.js file

Google maps – data attributes explanation

— data-location – use it for display your location on the Google map (e.g. can be a string: “New York”, or cords: 40.7198584,-74.0021416)
— data-height – use it for height adjustment
— data-zoom – use it to set the zoom

JavaScript – for both version

<script src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script src=”../assets/js/gmaps/gmap3.min.js”></script>
<script src=”../assets/js/gmaps/init.js”></script>


Menu


Delimondo 2.0 HTML has a following list of menus variations

Default Menu

Default Menu

Default Menu

HTML markup

–> ct-mainMenu

Centered Menu

Centered Menu.png

Centered Menu.png

HTML markup

–> ct-centeredMenu

Transparent Fixed Default Menu

Transparent Default Fixed Menu

Transparent Default Fixed Menu

HTML markup

–> ct-mainMenu ct-mainMenu–color navbar-fixed-top

Transparent Fixed Centered Menu

Transparent Centered Fixed Menu

Transparent Centered Fixed Menu

HTML markup

–> ct-centeredMenu ct-centeredMenu–color navbar-fixed-top


Buttons


Button Sizes

Delimondo 2.0 HTML has three type of button sizes:

Button extra small

Button XS size

Button xs size

–> btn-xs

HTML markup

Button small

Button S size

Button small size

–> btn-sm

HTML markup

 

Button default

Button default size

Button default size

–> btn-default

HTML markup

 

Button large

Button large size

Button large size

–> btn-lg

HTML markup

 

Button Types

Each of this sizes can have one of the following variations:

Button solid

Button large size

Button solid type

–> btn-lg

HTML markup

 

Button transparent

Button trasnaprent type

Button transaprent type

–> btn–transparent

HTML markup

 

Button icon type

Button ticon type

Button icon type

–> btn-iconType

HTML markup

 


Media Sections


You can arrange your content with the following Media sections types

Parallax

Parallax

Parallax

HTML markup

 

Ken Burn

Kenburns

Kenburns

HTML markup

 

Video

Video

Video

HTML markup

 

Description
data-type – determines the type of media section
data-height – determines the height of media section
data-background – this attribute allows you to insert image for desktop devices
data-background-mobile – this attribute allows you to insert image for mobile devices

JavaScript

<script src=”../assets/js/smoothScroll.js”></script>
<script src=”../assets/js/jquery.stellar.min.js”></script>
<script src=”../assets/js/media-section.js”></script>


Counters


Counters

Counters

HTML markup

JavaScript

This code can be find in the Delimondo 2.0 HTML main.js file


Menucard – isotope component


Menucard used in Delimondo 2.0 HTML is done using isotope plugin and masonry plugin.

Menu Card

Menu Card

HTML markup

 

Plugins used in this component
– Jquery.isotope
– Masonry Plugin


Comments Box


Comments Box

Comments Box

HTML markup


Blog Page Navigation


This Delimondo 2.0 HTML feature is used for navigation between previous and next blog post on Single blog post paget.

Navigation

Navigation

HTML markup


Magnific Pop Up Box


In Delimondo 2.0 HTML theme we use Magnific Popup – v0.9.9

Magnific Pop Up Box

Magnific Pop Up Box

HTML markup

 

JavaScript

This code can be find in the Delimondo 2.0 HTML main.js file

JavaScript

<script src=”./assets/plugins/magnific-popup/magnificpopup.min.js”></script>
<script src=”./assets/plugins/magnific-popup/init.js”></script>


Book Table


Delimondo 2.0 HTML theme has book table component. If you would like to see it, click on the menu About us -> Book Table or just click on the button Book a Table on the main slider in home page.

Book Table

Book Table

HTML markup

JavaScript

This code can be find in the Delimondo 2.0 HTML main.js file


Twitter


Twitter

Twitter

HTML markup

JavaScript files
— jquery.tweet.js


Social icon


In Delimondo 2.0 HTML we have following different types of social icons

–> ct-socials

Social Icon 1

Social Icon 1

HTML markup

 

–> ct-socials–second

Social Icon 2

Social Icon 2

HTML markup

 

–> ct-socials–second–anotherHover

Social Icon 3

Social Icon 3

HTML markup

 


Footer


Footer in Delimondo 2.0 HTML has two variations :

Default footer

No extra class needed.

Fixed position footer

Needed ct-postFooter–fixedPosition class

Footer

Footer

 

HTML markup for fixed  position footer

JavaScript – this code can be find in the main.js file.

Gallery


In Delimondo 2.0 HTML theme to create a gallery we used masonry Magnific Pop-up Plugin to show the big images

Gallery

Gallery

HTML markup

JavaScript

<script src=”../assets/plugins/magnific-popup/magnificpopup.min.js”></script>
<script src=”../assets/plugins/magnific-popup/init.js”></script>


Slider


Delimondo 2.0 theme use two types of slider :

Owl Slider

Owl Slider

OWL Slider

HTML markup

JavaScript

<script src=”./assets/plugins/owl/owl.carousel.min.js”></script>
<script src=”./assets/plugins/owl/init.js”></script>

Slick Slider

Slick synchronized Slider

Slick synchronized Slider

HTML markup

JavaScript

<script src=”./assets/js/slick.min.js”></script>


Contact Form


Template comes with ready to use:

  • Contact Form

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

That’s it!

Contact Form

Delimondo 2.0 HTML has three kinds of design for contact form:

Type 1

 

HTML markup

–> input-typeFirst

 

Screen shot

 

Contact Form 1

Contact Form 1

 

Type 2

 

HTML markup

–> input-typeSecond

 

Screen shot

Contact Form 2

Contact Form 2

Type 3

 

HTML markup

 

–> input-typeThird

 

Screen shot

 

Contact Form 3

Contact Form 3

Options (can be changed in HTML) :

Options (can be changed in HTML) :

  • Mail Subject – just change value in :
  • Success Message – change successMessage div content
  • Error Message – change errorMessage div content

Sources and Credits


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

Twitter Bootstrap http://twitter.github.com/bootstrap/

jQuery – http://www.jquery.com


Elite Author
We are elite
CreateIT
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!