Template documentation

# Documentation for Bakery template

Created: 16.12.2014

Version: 1.0

By: IgnitionThemes & ivanbohatyr

Template preview: Bakery Cakery & Bakery HTML5 Template

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email me via my user page contact form.

#### Contact: Do not contact me directly (email will probably end in spam folder anyway) - always use the contact form on my Themeforest profile. Thank you.

## Prologue

### Editing files

If you don't know anything about HTML and web pages, before doing anything with this template I recommend you to take at least some basic tutorial or hire somebody experienced to do this.

As for tutorials I recommend w3schools.com

Editing php and JavaScript files is really advanced stuff, only experienced person should edit them. If you're not sure, do not change anything, it might cause serious damage to the scripts. Hiring somebody, who knows what to do, is better solution.

If you are not familiar with these technologies, do not play around with these files.

### Tools

Show content

Inspect element - when editing html and css files utilities like firebug (free firefox plugin) are great helpers. With them you can easily find element style, even the stylesheet name and line number where the inspected style rule is.

Edit html/css/js/php files - use your favorite text editor. Editor, that highlights systax is good choice, Pspad(free) or Notepad++(free) might be enough.

View pages - any common browser like Mozilla Firefox(free)...

Upload on server - look for some FTP program - filezilla(free)...

### Licensing

All items in this template package are mine or properly licensed as themeforest requires. For items that, are not mine, I try to keep license information close to them. So if you want to see the license, look into the items folder or perhaps it can be found on first lines of these files. Sometimes author release item under some license, but the license file is not available, then you could try to find the license on web site (if this item has url specified) or contact the author.

If you are not sure about licensing, contact me and I will give you all the information I have.

## 1. Layout

Bootstrap used, if you have any questions please refer to the bootstrap docs http://getbootstrap.com/.

### Other prepared layout constructions:

Show content

#### Margins

##### Vertical margins

You may use defined margin classes: "margin-10", "margin-20" ... "margin-100" ("margin-10" = element with 10px height).

<div class="margin-30">content</div>

### Responsive layout

Responsive layout makes the content fit the window width. If content changes the responvity might get worse or even broken. This cannot be handled be template - if original menu has 6 items, the responsivity counts with this approximately width, but if this menu is made with 15 items, the original responsivity rules cannot handle such difference. So after editing content you should check, if the responsivity still works well and if not, then make some adjustments.

These responsivity rules are called media queries and usually are at the bottom of the stylesheets.

## 2. Skins

Dark Skin - see index_dark.html and css/dark-skin.css (.less)

You can make new skins quite simple via less stylesheet (as online less compiler use for example http://less2css.org/).

## 3. Plugins and JavaScript files

If in doubts always see documentation from plugin author (if available).

If the plugin file(s) is not icluded the functionality will be lost or partial.

All you should do with these plugins is: make html structure where plugin will work, adjust plugin settings and activate the plugin. Maybe you do not even need to do all of this - for example jQuery needs nothing more, than to be linked in the source code.

If needed edit plugin's stylesheets. Making changes in plugin's source code (js files) is in most cases not recommended.

Some plugins require jQuery library to be included first.

Show content

### jQuery

JavaScript library.

Many plugins use this library - jQuery has to be included first.

File(s):

- js/jquery-XXX.min.js

License: MIT license (online)

Home site: http://jquery.com/

Documentation: http://api.jquery.com/

### Modernizr

Small JavaScript library that detects the availability of native implementations for next-generation web technologies.

File(s):

- js/modernizr-custom.js

License: MIT license

Home site: http://modernizr.com/

Documentation: http://modernizr.com/docs/

### Masterslider

Text and image slider.

File(s):

- masterslider/*

License: you are allowed to use it in this template only, you have to buy a licence if you want to use in other projects (check codecanyon licensing for more info)

Home site: http://codecanyon.net/item/master-slider-responsive-touch-swipe-slider/6337671

Documentation: documentation/masterslider-documentation

### Owl-Carousel

Animated content slider.

File(s):

- owl-carousel/*

License: MIT license

Home site: http://owlgraphic.com/owlcarousel/

Documentation: http://owlgraphic.com/owlcarousel/#customizing

### Stellar

Responsive parallax background plugin.

File(s):

- js/jquery.stellar.min.js

License: MIT license

Home site: http://markdalgleish.com/projects/stellar.js/

Documentation: http://markdalgleish.com/projects/stellar.js/docs/

### Inview

Determines if element is in view area.

File(s):

- js/jquery.inview.min.js

License: Public license

Home site and documentation: https://github.com/protonet/jquery.inview

### Scroll To

Scrolls to an anchor.

File(s):

- js/jquery.scrollTo.min.js

License: MIT license

Home site and documentation: http://demos.flesler.com/jquery/scrollTo/

### Placeholder fallback

Small script that deals with no placeholder attribute support in old browsers.

File(s):

- js/placeholder-fallback.js

### custom.js

Contains pieces of javascript code (email sending, plugin activations...).

File(s):

- js/custom.js

## 4. Sources and credits

For plugins licenses see Plugins section.

Some items also in Others section.

### Items:

Wallpapers Wide

Wallpaper Abbys

olluyi

Note: Images in the template are used only for preview purposes, they are not included in package. The original ones are replaced with placeholders.

## 5. Graphics

PSDs included in folder PSD.

Original PSD-s for sale here: Bakery - Cakery & Bakery PSD Template

## 6. CSS files

Bootstrap styles in folder bootstrap.

Theme stylesheet files are in folder "styles", plugin stylesheets are usually in plugins folder.

Great helpers in style editing are element inspectors - like firebug (mentioned in Tools).

main.css - main stylesheet

main.less - less version of main stylesheet, this file is not directly used, it's included because it's faster to make changes here and then compile it to css (as online less compiler use for example http://less2css.org/). Contains elements.less licensed as public domain.

Skin css - see section skins

## 7. Contact and subscribe forms

Please note: these scripts need php support - so if you will try this on your personal computer it will probably not work (unless you have Apache server or something like that running). You have to try it on some web server and this server must have php support. PHP (and mail function) si reguired for sending emails. Most of the web servers have this support, it's basic equipment, but some might not.

### Prolog

Make changes based on this documentation, do not change anything else if you are not sure, what to do, you can cause serious damage to the scripts.

Do not change contact forms, unless you know for sure what to do. Elements in contact forms must correspond to the ajax variables.

After changes are made, remember to check if it works properly.

### Where to start?

Contact: open file send_email.php read the comments on the top lines and make the changes. That's all for contact form.

RSS: File save_rss.php is for RSS subscribe, the default setting is MailChimp, other options are: "save to email", "save to file".

When you pick one of these options, it needs to be activated, if you want to use mailchimp, you're done here, in other cases go to folder save_email_options pick the file you want and replace the original save_rss.php file with this file, keep the name save_rss.php

Open file save_rss.php read the comments on the top lines and make the changes. That's all for RSS form.

### Mailchimp

Online email marketing solution to manage contacts, send emails and track results.

Mailchimp api docs - http://apidocs.mailchimp.com/api/

### PHP files

Show content

#### class.emailSender.php (include/class.emailSender.php)

PHP class for sending emails.

Sending emails: this is just class file, include it to other scripts and use it there

Editing user messages: at the top of that file you can see $user_messages and $control_messages variables. They are set for two languages - EN and CZ - here you can change the messages (only the right side, do not delete whole line, it will cause errors and do not leave the message empty - for ajax empty message means everything's ok). For changing the language find variable "$language" (orignally "$language = 'EN';") and change it to another language code that is defined.

Adding new languages: copy one of the languages made, change the language code ('EN' to 'FR' for example) and change the messages (only the right side, do not delete whole line, it will cause errors and do not leave the message empty - for ajax empty message means everything's ok). Then change the language to the new one - find variable "$language" (orignally "$language = 'EN';") and change it to another language code that is defined.

#### MailChimp.php (include/mailchimp-api/src/Drewm/MailChimp.php)

PHP class for siple mailchimp API management.

License: MIT license (https://github.com/drewm/mailchimp-api/)

### Ajax

Visitors send messages via ajax - javascript utility, that can send data to php scripts without reloading the page.

Activation is in js/custom.js

#### Data to send

Ajax send data from contact forms - elements in contact forms must correspond to the ajax variables.

See functions form_to_ajax_request().

#### Custom messages

To edit messages from php scripts see those scripts.

Editing ajax messages - these messages are set as "data" attribute of corresponding form, for example attribut "data-success-msg" contains success message from ajax.

## 8. Others

### Icon-fonts

#### Font Awesome

CSS file: font-awesome/font-awesome/css/font-awesome.min.css (font-awesome/font-awesome/css/font-awesome-ie7.min.css for Internet Explorer 7). SIL OFL 1.1 License. List of all icons with their classes is here: font-awesome/index.html. Typefaces folder: font-awesome/font-awesome/font. URL: http://fortawesome.github.io/Font-Awesome/.

Example use with class "fa-glass":

<i class="fa fa-glass"></i>

### Favicon

Favicon is a small icon displayed in browser tab next to the page title. For more info and how to use it please read Wikipedia

## How To...

#### Set contact and subscribe form

Please refer to section "7. Contact and subscribe forms" and subsection "Where to start?"

#### Change head slider

This is plugin masterslider, please refer to documentation/masterslider-documentation

#### Add scroll-to event

Make an element with "scroll-to" class and attribute "href" leading to the anchor like href="#top"

#### Add on-scroll fade effect

Add onscroll-animate class to choosen element, be carefull if this element already has animation, or element that has both animation and transition might behave weird in some browsers.

#### Change google map position

In file custom.js look for code "google.maps.LatLng(40.714728,-73.998672)" where 40.714728 and -73.998672 are the position coordinates.

#### Block emails or IPs from sending spam messages

In selected php file adjust emailSender object to something like this: "new emailSender('blacklist_ips.txt', 'blacklist_emails.txt');" where "blacklist_ips.txt" is text file with ips to block, one ip on one line. Same for blocked emails.

Note: this is implemented only for emailSender() class, so it will work only if sending to email is used (not working for Mailchimp either saving to file).

#### Change form messages

See form attributes like data-success-msg etc., to change php messages see section "Contact and subscribe forms" > "PHP files" > "class.emailSender.php"

## FAQ

#### WordPress error while installing the theme

Well, this is correct, because this is not a WordPress theme. If you want to buy a WordPress theme, make sure it is in the right category - WordPress, HTML, Marketing, CMS, eCommerce...

So unfortunately I can't help you with this. And as I know Themeforest gives no refunds for templates bought by mistake. But you can still use this template, but not on WordPress.

#### "Ajax could not send the request" error message

This means, that php script is not available - wrong path to the script, or php is not running - if you do not have php running on your personal computer, it will not work, try it on web server and make sure the paths are correct.

#### Video player is not working

Note that this works only on web server, if you try it on your personal pc, it will not work.

#### "Problem on server side, please try again later." error message

This means, that php works, but mail function does not.

How to deal with it:

- Upgrade your hosting, so you will be able to send email from your web server
- Change the script - for saving emails (rss for example) three scripts are available, "mailchimp" and "save to file" do not require mail function. But sending messages from contact form requires mail function.
- Use other mail servers - for example servers from google. This option is beyond this template and is not implemented, I recommend using PHPMailer (you can see basic example at the bottom of send_email.php). This is advanced stuff that require php knowledge.
- If it worked before, it might be just temporary problem on server

## Epilogue

Do you want to adapt this theme for your needs or are these template changes too difficult, would you like someone else to do it? You can contact me, I'll be glad to adapt this theme for your needs - this job is of course beyond this template and needs to be payed separately.

Please let me know, if you find any bugs.

For general questions like: problems with downloading theme, payments... contact evanto support.

If you're not too busy, please rate the template and if you do not give it full 5 stars, plese leave a comment why. Any feedback is appreciated. Thank you.

Once again, thank you for purchasing this theme.

### Tests

- Mozzila Firefox (current version)
- Google Chrome (current version)
- Opera (current version)
- Safari (v5.1)
- IE11
- IE10
- IE9

All tests are performed on my personal computer. Behavior of mobile phones, either tablets is not tested and at this time I do not make any fixes for these devices.

If you encounter some performace problems turning css animations and transtions off should help or also try to disable some plugins.

Thanks for reading the documentation. If you miss there something, let me know.