1. Start
  2. Files Structure
  3. HTML Structure
  4. CSS Structure
  5. Javascript
  6. Customization & Styles
  7. Fonts
  8. Icons
  9. Boxed Background Patterns
  10. Sliders
  11. Lightbox
  12. Timeline
  13. PHP Scripts
  14. Paypal Integration
  15. Social Media - Icons
  16. Source & Credits

EventMe

Responsive HTML5 Template

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us.

Files Structure

- assets
    - css (Template CSS)
        theme.css (Main Styles)

    - img (All Images)

    - js (Template JS)

    - php (Contact Form php files)

    - plugins (All external libs. We keep all of them in this folder to make updates easily.)

 

HTML Structure

The template is based on Bootstrap Framework - http://getbootstrap.com/

The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide depending on your viewport. Below 480px viewports, the columns become fluid and stack vertically.

Create a .row and add the appropriate number of .col-sm-* columns.
 

HTML Markup

1
2
3
4
5
6
7
8
9
<div class="row">
    <div class="col-sm-12">
        Level 1 column
        <div class="row">
            <div class="col-sm-6">Level 2</div>
            <div class="col-sm-6">Level 2</div>
        </div>
    </div>
</div>

 

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

CSS Structure

The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:

- assets
    - css
        - theme.css - (Main CSS file)
        - theme-blue.css - (Main CSS file)
        - theme-green.css - (Green Theme Color)
        - theme-orange.css - (Orange Theme Color)
        - theme-pink.css - (Pink Theme Color)
        - theme-purple.css - (Purple Theme Color)
        - theme-yellow.css - (Yellow Theme Color)

 

Javascript

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/

All the JavaScript libraries and files are included at the bottom of every HTML page like this:

1
<script src="assets/plugins/modernizr.custom.js"></script>

The initializations and parameters (sliders, effects, etc.) are contained in assets/js/main.js

Customization & Styles

In order to select the right combination of styles for your website find and edit the next lines in /assets/js/theme.js:

1
2
3
var color = 'blue'; //  black, blue, green, grey, lime, orange, pink, purple, red, river, yellow
var layout = 'wide'; // wide, boxed
var pattern = 'square_bg';

RTL Layout

In order to activate RTL Layout mode for the website put `rtl` class into <body> tag

Fonts

To change the embedded font, please take a look in the head part of assets/css/theme.css:

    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);

To change the font, first go to http://www.google.com/webfonts choose a font and add the generated code to the top of theme.css.

Then edit font-family in 

        body {
            font-family: 'Source Sans Pro', sans-serif;
            background: #ffffff;
            color: #787b80;

            -webkit-font-kerning: auto;
            -webkit-font-smoothing: antialiased;
            -webkit-backface-visibility: visible !important; /* reset animate.css / if hidden parallax buggy */
            position:relative;

            font-size: 16px;
            overflow-x: hidden;
        }

and

       h1, h2, h3, h4, h5, h6 {
            font-family: 'nexa_boldregular';
            text-transform: uppercase;
            color: #374146;
       }

and

        .btn-theme {
            color: #d2d2dc;
            background-color: transparent;
            border-width: 2px;
            border-color: #d2d2dc;
            text-transform: uppercase;
            font-size: 18px;
            font-weight: 700;
            padding: 20px 40px;
        }

Icons

Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.

If you need more information, please visit this site: http://fortawesome.github.com/Font-Awesome/

 

HTML Markup:

1
2
3
<i class="fa-edit"></i>
<i class="fa-search"></i>
...

 

Boxed Background Patterns

All patterns are downloaded from www.subtlepatterns.com
If you need more, that's where to get'em.

 

How to create colored pattern:

1
2
3
Open patterns.psd (Documentation/patterns.psd);
Right click on "Layer 0" (Layers);
Left click "Copy Layer Style";
1
2
3
4
Open any pattern in photoshop;
Menu select ... Image > Mode > RGB Color;
Layers > background right click > "convert to smart object";
Right click "Paste Layer Style" (now image colored);
To change color
1
2
3
Layer > Fx > double click "Color Overlay";
In popup window > "Color Overlay" > "Blend Mode:" > select another color;
Click ok;

 

Sliders

Owl Carousel

Owl Carousel is the slider you'll find in the content.
It's an easy to use lightweight carousel with some decent features. You can find more documentaion here http://owlgraphic.com/owlcarousel/

Timeline

The filter is driven by the Isotope script - http://isotope.metafizzy.co/

Here's an example of usage:


Timeline Data:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="row timeline isotope" id="timeline2">
 
<div class="item col-sm-6 isotope-item item-left">
    <span class="dot"></span>
    <article class="post-wrap thumbnail">
        <div class="post-media">
            <div class="thumbnail no-border do-hover">
                <img alt="" src="assets/img/preview/schedule-1.jpg" class="img-responsive">
                <div class="caption">
                    <div class="caption-wrapper div-table">
                        <div class="caption-inner div-cell">
                            <p class="caption-buttons">
                                <a class="btn caption-social facebook" href="#"><i class="fa fa-facebook"></i></a>
                                <a class="btn caption-social twitter" href="#"><i class="fa fa-twitter"></i></a>
                                <a class="btn caption-social google-plus" href="#"><i class="fa fa-google-plus"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="post-meta clearfix">
                <span class="pull-left"><span class="post-date"><i class="fa fa-clock-o"></i> 08:00 to 18:00 pm</span> <span class="post-location"><i class="fa fa-map-marker"></i> Hall B</span> </span>
                <span class="pull-right"><a href="#"><i class="fa fa-heart"></i> 26</a></span>
            </div>
        </div>
        <div class="post-header">
            <h4 class="post-title"><a href="#">Standart Speaker Content Header Here.</a></h4>
            <span class="post-author">by <a href="#">Author Name</a></span>
        </div>
        <div class="post-body">
            <div class="post-excerpt">Lorem ipsum dolor sit amet, ...</div>
        </div>
    </article>
</div>
. . .
</div>

 

PHP Scripts

Contact/Get Quote Form

For Contact Form and Get Quote Form to work only thing you need to do is to setup your email address and your name.
To do this, please open "assets/php/contact-form.php" and "assets/php/registration.php" files and change these lines:

1
2
$to = 'you@domain.com';
$toname = 'Your Name';

Subscribe Form (Mailchimp)

Subscription form works through the Mailchimp service. If you don't already have account there please create it. It's Free!

In your account you'll have to find API Key and List ID for the script to function. Both of those you have to create beforehand. Please use Mailchimp docs to find out how.
API Key is found in "Account Settings => Extras => API Keys"
List ID is found in "Lists => Your list => Settings => List name & defaults"

Then edit this file using the info: 

assets/php/mailchimp/subscribe.php
1
2
3
4
5
6
7
8
9
10
$MailChimp = new MailChimp('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-usx'); // Put your API Key here
$result = $MailChimp->call('lists/subscribe', array(
    'id'                => 'xxxxxxxxxx', // Put your list ID here
    'email'             => array('email'=>$_GET['email']),
    'merge_vars'        => array('FNAME'=>'', 'LNAME'=>''),
    'double_optin'      => false,
    'update_existing'   => false,
    'replace_interests' => false,
    'send_welcome'      => true,
));

One notice: this will be functional only on your server, php files can not be executed on your local computer.

Paypal Integration

You can use simple Paypal integration for receiving payments. In this case you have to rename index-paypal.html file to index.html

In this file just replace all the hosted_button_id=XXXXXXXXXXXXX with your Payment Button ID and you are ready to receive payments.

https://developer.paypal.com/webapps/developer/docs/classic/paypal-payments-standard/ht_create-pps-buttons/

Social Media - Icons

We are using FontAwesome for social media icons in this template. Insert icons like this:

1
<i class="fa fa-google-plus"></i>
Here's the complete list of available icons from FontAwesome docs:

Source & Credits


Fonts:
    Nexa (Light & Bold) - http://fontfabric.com/nexa-free-font/
    Google Fonts - http://www.google.com/webfonts
    Icons Font-face - http://fortawesome.github.com/Font-Awesome/

Scripts:
    jQuery - http://www.jquery.com/
    Bootstrap Framework - http://getbootstrap.com/
    OWL Carousel - http://www.owlgraphic.com/owlcarousel/
    Isotope Jquery plugin - http://isotope.metafizzy.co
    Modernizr - http://modernizr.com/
    Jquery Superfish Menu plugin - http://plugins.jquery.com/superfish/
    HTML5shiv - http://code.google.com/p/html5shiv/
    Respond.js - https://github.com/scottjehl/Respond
    PrettyPhoto- http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
    jQuery Easing - http://gsgd.co.uk/sandbox/jquery/easing/
    Smooth anchor scrolling plugin for jQuery - http://mths.be/smoothscroll
    Placeholder Caret Animation - http://placeholdem.jackrugile.com
    jQuery Waypoints - http://imakewebthings.com/jquery-waypoints/
    Countdown - http://keith-wood.name/countdown.html
    Animate.css - http://daneden.github.io/animate.css/

The images included in preview are for demonstration purposes and should always be replaced with your own work.

Images:
http://picjumbo.com/
http://www.shutterstock.com/
http://www.subtlepatterns.com/


jThemes