- Start
- HTML Structure
- CSS Files & Structure
- Javascript
- Typography
- Booking Form
- Sources & Credits

## Wedding - Wedding Template

Created: September 1, 2016
Latest Update: September 12, 2016
By: VeroThemes
http://themeforest.net/user/verothemes
Email: verothemes@gmail.com

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to email via the user page contact form on this page. http://themeforest.net/user/verothemes Thanks so much!

## 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

### Intro (Slider)

Example:

    <!-- Slider -->
    <div class="wed_slider wed_image_bck wed_fixed wed_wht_txt" data-stellar-background-ratio="0.2" data-image="images/slider/sl1.jpg">

        <div class="wed_over" data-color="#000" data-opacity="0.5"></div>

        <div class="container">

            <!-- Slider Texts -->
            <div class="wed_slide_txt wed_slide_center_middle text-center" data-0="opacity:1; margin-top:0px" data--400-bottom="opacity:0; margin-top:-100px">
                <div class="wed_slide_title">We're All Working <br>Together</div>
                <div class="wed_slide_subtitle">That's the Secter</div>
            </div>
            <!-- Slider Texts End -->

        </div>
        <!-- container end -->

        <!-- Slide Down -->
        <a class="wed_scroll_down wed_go" href="#wed_content" data-0="opacity:1; bottom:40px;" data--400-bottom="opacity:0; bottom:80px;">
            <b data-0="height:40px" data--400-bottom="height:55px"></b>
            Scroll
        </a>

    </div>
    <!-- Slider End -->

wed_slide_title - Great Title, also can be (wed_slide_title_great, wed_slide_title_middle)
wed_slide_subtitle - Great SubTitle
Titles alignment
wed_slide_right_middle - Right Middle
wed_slide_right_top - Right Top
wed_slide_right_bottom - Right Bottom
wed_slide_left_middle - Left Middle
wed_slide_left_top - Left Top
wed_slide_left_bottom - Left Bottom
wed_slide_center_middle - Center Middle
wed_slide_center_top - Center Top
wed_slide_center_bottom - Center Bottom

### Sections classes

                        <section class="wed_section wed_image_bck" data-color="#f2f2f2">
                        <section id="services" class="wed_section wed_section_sml_padding wed_image_bck wed_wht_txt wed_fixed" data-stellar-background-ratio="0.2" data-image="images/corporate2/shutterstock_327359807.jpg">

wed_wht_txt - White Text
wed_section_sml_padding - Section Small Padding
wed_image_bck - Color or Image background
wed_fixed - Fixed Class for Parallax Effect br data-stellar-background-ratio="0.2" - Parallax Speed
data-image="images/corporate2/shutterstock_327359807.jpg" - Background Image
data-color="#f2f2f2" - Background Color

                        <!-- Over -->
                        <div class="wed_over" data-color="#292929" data-opacity="0.9"></div>

wed_over - Overlay
data-color="#292929" - overlay color
data-opacity="0.9" - overlay opacity

### Logo

You can edit all texts in logo.

    <!-- Logo -->
    <a href="/" class="wed_logo">Wedding</a>

### Themify Icons

Themify Icons Official Page - http://themify.me/themify-icons
You can choose from 320+ available icons :

HTML markup:

    <!-- Themify Icons -->
    <i class="ti ti-time"></i>

### Hensa Font

Hensa Font Official Page - http://graphicburger.com/hensa-free-brush-script-font/
You can edit slider text in photoshop (all files provided) :

####

###

          12.09.2016
          Sally & Mark

## CSS Files & Structure

All of the specific stylings for the page are in style.css ("theme"/css/wed_style.css) file.

    <!-- Theme CSS -->
    <link href="css/wed_style.css" rel="stylesheet">

The file is separated into sections using:

    01. Main Styles
        01.1 White Text
        01.2 Titles
    02. Bootstrap
        02.1 Align Center
        02.2 Tabs
        02.3.Buttons
        02.4 Labels
        02.5 Alerts
        02.6 Lightbox
        02.7 Pagination
        02.8 Progress Bars
    03. Sidebars
        03.1 Content
        03.2 Main Sidebar
        03.3 Section
    04. Header
        04.1 Logo Animation
        04.2 Logo Img
        04.3 Tranparency Menu
        04.4 Full Width Submenu
        04.5 Horizontal Menu
        04.6 Language Menu
        04.7 Mobile Menu
        04.8 Header Animation
    05. Slider
        05.1 Slider Text
        05.2 Slider Aligns
        05.3 Scroll Down
    06. Shortcodes
        06.1 Our Love Story
        06.2 Animation Blocks
        06.3 Browsers Images
        06.4 Best Friends
        06.5 Sliders
        06.6 Wedding Journal
        06.7 Around Block
        06.8 Price
        06.9 Services Block
    07. Footer
        07.1 To Top
        07.2 Map
    08. Inside Pages
        08.1 Portfolio
        08.2 Pages Title
        08.3 Breadcrumbs
        08.4 Demos
        08.5 One Page Nav
        08.6 Blog
        08.7 Widgets
        08.8 Comments
        08.9 Masonry
        08.10 Projects
        08.11 Shop
        08.12 Tags
        08.13 Related Products
        08.14 Checkout
        08.15 Cart
        08.16 Single Products

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

## Javascript

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

- Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
- jQuery v1.11.3 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.)
- OWL Carousel - Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
  Documentation:http://owlgraphic.com/owlcarousel/#how-to
- magnific-popup - A lightweight customizable lightbox plugin for jQuery
  Documentation:http://dimsemenov.com/plugins/magnific-popup/
- Firefly - A lightweight customizable firefly effect for jQuery
  Documentation:https://github.com/motyar/firefly
- Leaves - Like-Falling-Leaves was transformed by Wedding author into going up elements
  Documentation:https://github.com/like-falling-leaves/jsfiddler
- Hearts - CSS3-Snowflakes lightweight customizable snowflakes effect for jQuery(used like hearts creator)
  Documentation:https://github.com/dmolsen/CSS3-Snowflakes/commit/2a9f1a9c30934cd9afa48cd3ee85e6f02e1dcd6d
- prefixfree -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
- JQuery CountDown - A jQuery plugin that sets a div or span to show a countdown to a given time.
  Documentation:http://www.keith-wood.name/countdown.html
- JQuery UI - jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
  Documentation:http://jqueryui.com/
- Masonry - Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
  Documentation:http://masonry.desandro.com/
- imagesloaded.pkgd.min.js - Images Loaded for Masonry.
  Documentation:http://imagesloaded.desandro.com/
- jquery.appear.js - jQuery plugin for tracking element's appearance in browser viewport
  Documentation:https://github.com/morr/jquery.appear
- jquery.countTo.js - A jQuery plugin that will count up (or down) to a target number at a specified speed.
  Documentation:https://github.com/mhuggins/jquery-countTo
- jquery.lettering.js - A jQuery plugin for radical web typography
  Documentation:http://letteringjs.com/
- jquery.stellar.min.js - Parallax has never been easier
  Documentation:http://markdalgleish.com/projects/stellar.js/
- modernizr.js - Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
  Documentation:https://modernizr.com/
- skrollr.min.js - Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
  Documentation:https://github.com/Prinzhorn/skrollr
- twitterfetcher.min.js - A jQuery plugin to fetch tweets from a person or it's list.
  Documentation:https://github.com/jaysonsantos/jquery-twitter-fetcher

### OWL Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

    <div id="owl-example" class="owl-carousel">
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    <div> Your Content </div>
    ...
    </div>

Now call the Owl initializer function and your carousel is ready.

    $("#owl-example").owlCarousel();

## Typography

We use google font service to include fonts or font face sets.

- Lato
- Bree Serif

Also we use one free font Hensa

- Hensa

## Booking Form

Template comes with ready to use Booking Form.

To configure form just edit "theme"/js/wed_script.js and change e-mail to your own at these lines :

    $.ajax({
            method: "POST",
            url: "http://formspree.io/your@mail.com",
            data: dataString,
            dataType: "json",
            success: function() {
            $('#div_'+type).html("Thank you for your request, we will contact you as soon as possible.", 1500);
        }
        });

The Booking Form used http://formspree.io/ script and doesn't need PHP.
The Booking Form doesn't work on 'localhost'. Works only on host.

## Sources & 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
- OWL Carusel - http://owlgraphic.com/owlcarousel/#how-to
- Font-Awesome - http://fontawesome.io/
- Flaticon Icons - http://flaticon.com
- magnific-popup - http://dimsemenov.com/plugins/magnific-popup/
- prefixfree - http://leaverou.github.io/prefixfree/
- JQuery UI - http://jqueryui.com/
- JQuery CountDown - http://www.keith-wood.name/countdown.html
- Masonry - http://masonry.desandro.com/
- jquery.mb.YTPlayer - https://github.com/pupunzi/jquery.mb.YTPlayer
- Hearts - CSS3-Snowflakes - https://github.com/dmolsen/CSS3-Snowflakes/commit/2a9f1a9c30934cd9afa48cd3ee85e6f02e1dcd6d
- Firefly - https://github.com/motyar/firefly
- Like-Falling-Leaves - https://github.com/like-falling-leaves/jsfiddler
- jquery.lettering.js - http://letteringjs.com/
- jquery.stellar.min.js - http://markdalgleish.com/projects/stellar.js/
- modernizr.js - https://modernizr.com/
- skrollr.min.js - https://github.com/Prinzhorn/skrollr
- twitterfetcher.min.js - https://github.com/jaysonsantos/jquery-twitter-fetcher

Photos:
Flickr.com
graphicburger.com
dollarphotoclub.com
Pixabay
Unsplash
stocksnap.io
shutterstock.com

Once again, thank you so much for purchasing this theme. If you have any questions, feel free to email me via my user page contact form.