jEvent
Responsive HTML5 Template
- Created: 2015-09-01
- latest Update: 2015-09-01
- By: jThemes Studio
- Email: jakjim@gmail.com
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)
- assets/css/multicolors/ (Template Colors)
- assets/ico (Favicon and apple touch icon)
- assets/img (All Images)
- assets/js (Template JS)
- assets/php (Contact Form php files)
- assets/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
<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
- animate.css - (CSS Animation)
- media.css - (Responsive CSS)
- style.css - (Main CSS file)
- ...
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:
The initializations and parameters (sliders, effects, etc.) are contained in assets/js/theme.js
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=Open+Sans:400,700,400italic);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
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: 'Open Sans', sans-serif;
font-weight: normal;
background: #ffffff;
color: #7d7d7d;
-webkit-font-kerning: auto;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: visible !important;
overflow-x: hidden;
}
and
.secondery-font,.theme-btn, .theme-btn-big, .theme-btn-2, .section-title, .vertical-text, .section-heading, .jevent-title-1, .jevent-title-2,
.countdown-amount,.countdown-period,.post-title, .post-meta li,.read-more, .form-control, .widget-title,.article-title > h2, .comment-reply-title,
.comment-form input[type="submit"],.pricing-wrap.featured::before{
font-family: 'Montserrat', sans-serif;
}
Icons
Font Awesome is a @font-face iconset that you can change size and color of the icons usingCSS.
If you need more information, please visit this site: http://fortawesome.github.com/Font-Awesome/
HTML Markup:
<i class="fa-edit"></i>
<i class="fa-search"></i>
...
Logo
Open index.html and find this part of code
HTML Markup:
and past path to your logo image:
...
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 documentation here http://www.owlcarousel.owlgraphic.com/
Main slider
Main slider has id "banner" and each slide has '<div class="item">' wrapper for easy find where slide html code start.
To change the title in each slide, you need to find '<div class="title-wrap">'
If you wont remove some slide just remove div with all content like this '<div class="item">'
...
Php Conference In Instanbul
20.10.2015
Register
...
...
You can find more documentation here http://www.owlcarousel.owlgraphic.com/
If you wont change option for main slider you need to open assets/js/theme.js and find 'initMainSlider' function and set true/false for option what you wont to change
autoplay: true, - set autoplay for slider
nav: false, - hide navigation arrow
dots: true, - show dots navigation
// Brands Slider Start
jQuery("#brands-carousel-slider").owlCarousel({
autoPlay: true, //Set AutoPlay to 3 seconds
items: 6,
itemsDesktop: [1199, 6],
itemsDesktopSmall: [1024, 6],
itemsTablet: [991, 4],
itemsTabletSmall: [767, 3],
itemsMobile: [480, 2]
});
Google Map
Open assets/js/theme.js and find /*... GOOGLE API ...*/ and set your coordinates for map and marker.
in line:
{"latitude": "-37.8176419", "longitude": "144.9554397", "icon": "assets/img/map-locator.png", "baloon_text": '103 Prince St New York, NY 10012, United States'} past your coordinates for map
https://support.google.com/maps/answer/18539?hl=en
If you wont change icon for marker replace 'map-locator.png' by your icon in 'assets/img/' folder
/*... GOOGLE API ...*/
var myMarkers = {"markers": [
{"latitude": "-37.8176419", "longitude": "144.9554397", "icon": "assets/img/map-locator.png", "baloon_text": '103 Prince St New York, NY 10012, United States'}
]};
$("#map").mapmarker({
zoom: 15,
center: '121 King Street Melbourne Victoria 3000 Australia',
markers: myMarkers
});
PHP Scripts
Registration Form
For Registration 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/registration-form.php" file and change these lines:
$to = 'you@domain.com';
$toname = 'Your Name';
One notice: this will be functional only on your server, php files can not be executed on your local computer.
Countdown
The countdown is driven by the jQuery Countdown script
You can set you date by open assets/js/theme.js file and change it this code below
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
A note on Date - the JavaScript Date constructor expects the year, month, and day as parameters. However, the
month ranges from 0 to 11. To make explicit what date is intended (does a month of 3 mean March or April?) I
specify the month from 1 to 12 and manually subtract the 1. Thus the following denotes 25 December, 2015.
austDay = new Date(2015, 12-1, 25);
For more information check the documentation
Social Media - Icons
We are using FontAwesome for social media icons in this template. Insert icons like this:
Here's the complete list of available icons from FontAwesome docs: