Introduction
Important Notes
Hi! Thanks for buying the theBebop HTML5 & CSS3 Responsive Template, we hope you enjoy our theme.
This documentation file will help you understand all the different options and features you will encounter. Please take the time to read through the documentation, as many support related questions can be answered simply by re-reading these instructions. Anyway, if you encounter with any problems, or have any further questions about the theme, just write us an email to: support@odindesign-themes.comincluding your purchase code in the email or follow us on Twitter
Envato Elements
Support Info
Regarding item support, please keep in mind that if you downloaded this file from Envato Elements, does not have support included, as per Envato's Policy, you can read more here: Item Support on Envato Elements
If you want, you can buy the main market item here: The Bebop Anime and Comic HTML Convention Template that comes with a 6 months support period
The Pack
Template Specifications
- 14 HTML Files
- 2 PHP Files
- Functional and Responsive Events Timeline
- Functional Contact Form
- 14 PSD Files Included ($12 Value)
- 8 Illustrator Flat Icons Included
- Fully Responsive
- Anime and Comic Versions
Plugins
Credits
Fonts Used
Credits
Images
Credits
Home Page
index.html
The home page of the site has the following services:
- Countdown Plugin
- Twitter Feed
- Accordion Plugin
- Tab Plugin
- Contact Form
- Flickr Feed
Countdown Plugin
API
- width
- height
- fillWidth
- color
- gradient
- gradientColors
- targetDate
width: the width of each countdown item. Default: 0
height: the height of each countdown item. Default: 0
fillWidth: the width of the border of each countdown item. Default: 0
color: the color of the border of each countdown item. Default: ''
gradient: boolean value indicating the use of gradient. Default: false
gradientColors: array containing the first and last gradient colors (Example: ['#26cfb1','#6c4788']). Default: []
targetDate: the target date of the countdown, it must be set using the javascript Date Object (Example: new Date(2015, 1, 27)). Default: false
Twitter Feed
How it works
This functionality consists in getting recent tweets from a user and displaying them in the slider of the page.
First of all you need your tweet app OAuth keys to grant access to the desired account.
Once you got your keys you need to replace them in the index.php file that is in the js/twitter directory of the template.
Then you should modify the tweet username variable in the main.js file: (the count variable indicates how many tweets are displayed)
And that's it!, now you should see the corresponding feed on the home page slider.
Accordion Plugin
API
- autoClose
- startOpen
- easing
- speed
autoClose: boolean value, if true, when opening an item the others close automatically. Default: true.
startOpen: index of item to be opened initially. Default: 0
easing: easing applied when opening items, compatible with any jQuery easing. Default: 'swing'
speed: the speed of the animation. Default: 600
Tab Plugin
API
startOpen: index of item to be opened initially. Default: 1
fade: boolean indicating if fade effect is applied. Default: false
speed: the speed of the fade. Default: 600
Contact
How it works
The Contact function lets people leave a message to the page owner.
The file containing the logic of the contact function is "contact.php" which receives the name, email and message from the user input and has a $to variable that has the email of the receiver (you will need to modify this value to the one you would like to receive the emails)
The Contact function uses a php class named Mailer (the API for this class is described in a submenu item).
The Contact function is handled with ajax (contact.js).
Validation
Name - Email - Message
The contact form of the page has a validate method attached that checks that the user entered a name, message and a valid email using regular expressions.
Flickr Widget
How it works
This widget uses flickr rss feed to get public images of a certain user (limit of 6).
The flickr rss is fetched using the getJSON jQuery function and then inserted on the footer.
To change the number of flickr photos displayed you have to change the return statement comparing number on the menu.js file.
Mailer
API
The Mailer class makes use of the php function mail.
This class is used to send mails while mantaining a general style structure.
- __construct($from, $to, $subject, $content) -> public
- setUpBody($content) -> private
- setUpHeader($from) -> private
- sendMail() -> public
__construct($from, $to, $subject, $content): sets the sender, receiver, subject and content of the email.
$from -> email of the sender.
$to -> email of the receiver.
$subject -> subject of the email.
$content -> content of the email (without styling)
setUpBody($content): formats the content of the email, style changes can be made here.
$content -> the content of the email
setUpHeader($from): creates the header of the email.
$from -> email of the sender
sendMail(): calls the mail php function with the parameters previously set to send the email.
Features
What it includes
The site has five main sections to complement the home page, which are the following:
- Blog
- Special Guests
- Gallery
- Timeline
- Floorplan
Timeline Plugin
API
- url
- showCount
- loadCount
- animation
url: relative or absolute url of the json file containing the data to be used in the timeline. Default: 'timeline-events.json'
showCount: indicates how many days are shown in the initial state. Default: 2
loadCount: indicates how many days are shown when the "Load More" button is pressed. Default: 1
animation: the animation used to show the events ('slide', 'scale', 'fade', false). Default: false
Timeline Data
How it Works
The timeline of the page gets its content from a json file
The following screenshot shows the structure an object in the array needs to have for the timeline to process it correctly:
