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:

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.

Also we use one free font 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

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.