Introduction
Important Notes
Hi! Thanks for buying the Red Samurai HTML5 & CSS3 Template, we hope you enjoy our theme.
This documentation file will help you understand all the different options and features you will encounter.
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.com including your purchase code in the email or follow us on Twitter
Envato Elements
Support Info
Regarding item support, please keep in mind that this, being an Envato Elements item, 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: Red Samurai HTML5 and CSS3 Responsive Template that comes with a 6 months support period
The Pack
Template Specifications
- 26 HTML Files
- PSD Files Included ($14 Value)
- Fully Responsive Design
- Functional Contact Form
- Easy to Customize
Plugins
Credits
Fonts Used
Credits
Images
Credits
Home Page
index.html
The home page of the site has the following services:
- Contact form (contact.js)
- Pie Charts (main.js)
- Google maps API with custom markers (gmaps.js)
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, subject 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
Email - Message
The contact form of the page has a validate method attached that checks that the user entered a message and a valid email using regular expressions (main.js).
Email Styling
How to do it
Changes to email style can be done inside the Mailer class by modifying the setUpBody($content) method.
Remember that email styling must be done with inline CSS.
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.
Pie Charts
How it works
A callback function is used to determine up to which value each chart will be filled.
To make use of this functionality the template user must change the value of the attribute "data-percent" and the value inside the span tag of the div with class of "data".
The value inside the span tag of the div with class of "data" represents the total value (100%, 52 in this example), while the one inside the "data-percent" attribute represents what percent of the total value you want to fill (25% in this example).
Features
How it Works
- Account Forms
- Confirmation Email
- 3 Dish Presentation Styles
- Custom Radio Buttons, Checkboxes and Counters
Account Forms
How it Works
There are 3 account forms:
Login Form
Style
Register Form
Style
Reset Form
Style
These forms are shown when the user clicks on a link that has the class "popup" and one of the three form types classes "login", "register", "reset".
(Example: <a href="#" class="popup login">Login</a>)
When a form is shown, an overlay is placed below and the window scroll is locked until the user exits the form.
The forms are inserted on the page using javascript (forms.js)
Dish Presentation
How it Works
There are 3 Dish Presentation styles:
- Grid View
- Detail View
- List View
Grid View
Style
Detail View
Style
List View
Style
Dish presentation style is changed by adding or removing classes to the target ul tag.
The exception is the list type style that makes some changes in the html using javascript (adds a line, quantity type to description and changes the inner image of the circle - shop.js).
Custom Inputs
How it Works
- Radio Button
- Checkbox
- Counter
The checkbox and radio inputs are customized with css by using labels, on the other hand the counter for product quantity is custom made.
Counter
How it Works
The counter lets the user select a number of products by clicking on its up and down arrows.
The only limit that the counter has is that it cannot go below 1.
The counter functionality is in the file "item.js" and the file "checkout.js" where it also calls a function to update the product subtotal price.