Chow

Recipes & Food HTML5 Template

Thank you for your purchase! If you have any questions that you feel should have been in this document, please log in using the account used to purchase the file and email via my user page contact form here. Thanks so much!

For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priority. You will need some knowledge of HTML/CSS to edit this theme.

Helpful Tips

Do not start from scratch, use an existing page I have created and modify it to learn how it works

Quickly find what you're looking for in this document by using your browser's "Find in Page" feature, typically Control+F.

Trying to locate/replace text, styles or code in themes? "Find in Files" command which is commonly found in any decent text editor which will save you hours of searching

Getting an error message, chances are someone else has seen it too, try a google search for a quick fix.

Many times plugins are to blame when a site fails, always try disabling any third-party plugins if you encounter an error you can't solve.

Don't forget to re-explore the live demo for layouts, usage ideas and sample code before asking for support

HTML Structure

Chow  template is based on Skeleton - a small collection of CSS & JS by Dave Gamache files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. I modified Skeleton and adapted to 1180px grid.

The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

Step 1: Add HTML container
<!-- Container -->
<div class="container"></div>
<!-- Container / End -->
Step 2: Add columns (from one to sixteen)
<!-- Container -->
   <div class="container">
      <div class="eight columns">1/2 Column - Content Here</div>
      <div class="eight columns">1/2 Column - Content Here</div>
   </div>
<!-- Container / End -->

I put some examples - check bottom of the "typography.html" file. That'll help you a lot.

CSS Structure

I used four CSS files in this template (all styles're imported in main file of CSS - style.css). By using of them, we can work round this. Those files also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the files below:

  1. style.css - main css file + media query layouts
  2. base.css - contains the basic styles like reset, typography
  3. responsive.css  - responsive grid
  4. icons.css  - font awesome icons and glyphicons halflings styles

Style.css table of contents:

1. Header
2. Navigation
3. SCEditor
4. Miscellaneous
5. Shortcodes
6. Royal Slider
7. Recipes
8. Sidebar
9. Shop
10. Magnific Popup
11. Media Queries

Magnific Popup

Single Image Lightbox
<a class="mfp-image" href="image1a.jpg" title="The Cleaner"><img src="image1b.jpg"></a>
 
Lightbox Gallery
<a class="mfp-gallery" href="image1a.jpg" title="The Cleaner"><img src="image1b.jpg"></a>
<a class="mfp-gallery" href="image2a.jpg" title="The Cleaner"><img src="image2b.jpg"></a>
<a class="mfp-gallery" href="image3a.jpg" title="The Cleaner"><img src="image3b.jpg"></a>
 
Popup With Video or Map
<a class="mfp-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>

<a class="mfp-vimeo" href="https://vimeo.com/45830194">Open Vimeo video</a>

<a class="mfp-gmaps" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
 
Popup With Content
<a class="popup-with-zoom-anim button color" href="#small-dialog" >Open</a>

<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
   <h2>Title</h2>
   <p>Content Here</p>
</div>

Contact Form

You don't have to know PHP. To change email adress, open "contact.php", find and edit code below:

$to_Email       = "info@vasterad.com"; //Replace with your email address
$subject        = 'Email from contact form on my page'; //Subject line for emails

Styles Switcher

1. Main Color

You can use one of predefinied colors or build custom CSS with color you want.

<link rel="stylesheet" href="css/colors/green.css" id="colors">
 
2. Layout Style

To change layout style set boxed or fullwidth class for body

<body class="boxed">
...
</body>
<body class="fullwidth">
...
</body>

 

3. Background

If you want to change background color/image, open "base.css" and modify on line 72 body.boxed class. I recommend SubtlePatters if you're looking for more patterns.

Don't forget to remove switcher from yout site after finishing work.

Sources & Credits

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

Photos are bought from PhotoDune and if you want to buy one just contact me and I'll provide you a link.

 

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

If you have a more general question relating to the themes on ThemeForest, basic HTML/CSS/JavaScript related questions, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Best Regards,
Vasterad