This is not a WordPress theme! If you are trying to use WordPress please buy the WordPress version.

WaterColor HTML Bundle Documentation

Version 1.0

Thanks for purchasing. This item is a collection of HTML files, PHP files, CSS and Graphic Assets that have been generated from our WordPress themes. These files will form the perfect base for your next creative project.

If you have any questions please reach out to us via our profile here: https://themeforest.net/user/dtbaker/portfolio

Enjoy!

Getting Started

Requirements

There are a few requirements before using the files in this template:

  • This is not a WordPress Theme - do not try to use this with WordPress.
  • Good knowledge of HTML, CSS and JavaScript.
  • A nice code editing tool like PhpStorm.
  • Web hosting if you wish to upload these HTML files somewhere.
  • PHP 5.6+ support on Web Hosting if you wish to use the included PHP files.

Installation

Unzip the file you downloaded from ThemeForest. Inside the extracted folder there will be a folder that contains all the files. Copy the files you need to your web development location.
Example: if you wish to use foliage-blog as a base for your project; copy that folder, make changes to the files and then upload the files to your hosting account.

Included Templates

There are 7 included templates in this package. These templates are based off the WordPress themes of the same name. If you wish to use any of these template elements in WordPress then we highly recommend you purchase the WordPress package instead. These are listed below:

Included Template Preview Page HTML Files PHP Files Image Assets Optional WordPress Theme
Beautiful Watercolor Open HTML Preview 156 159 168 Buy WordPress Version
BoHo Baby Open HTML Preview 39 42 33 Buy WordPress Version
Foliage Blog Open HTML Preview 33 36 49 Buy WordPress Version
Home Blogger Open HTML Preview 46 49 62 Buy WordPress Version
Leafy Blog Open HTML Preview 37 40 43 Buy WordPress Version
Pastel Floral Open HTML Preview 43 46 42 Buy WordPress Version
Summer Blog Open HTML Preview 105 108 132 Buy WordPress Version
Tendril Blog Open HTML Preview 33 36 30 Buy WordPress Version
Verge Blog Open HTML Preview 34 37 41 Buy WordPress Version

Beautiful Watercolor

The Beautiful Watercolor template comes with 156 static HTML files, 159 dynamic PHP files and 168 easy to access asset images. The easiest way to access these files is via the preview page located here or on the individual design variation preview pages below.

There are 5 design variations on this template. These are:

Beautiful Watercolor is also available as a WordPress Theme.

HTML Files

The HTML files in this template all follow a similar layout with comments through the HTML files. Please see the HTML section on how to use these files. The HTML files included in this template are as follows:

HTML files in the folder /beautiful-watercolor/html/:

Blue design variation files in the folder /beautiful-watercolor/blue/:

Gold design variation files in the folder /beautiful-watercolor/gold/:

Green design variation files in the folder /beautiful-watercolor/green/:

Grey design variation files in the folder /beautiful-watercolor/grey/:

Purple design variation files in the folder /beautiful-watercolor/purple/:

PHP Files

The PHP files in this template all follow a similar layout. Please see the PHP section on how to use these files. There is a global _header.php and _footer.php file that is shared between all page contents.

At the top of each file you will see a $page_configuration variable. This contains configuration variables for the page layout including: Page Title, body tag CSS classes, current navigation item to highlight, which CSS styles to load and which JavaScript files to load for the page.

The PHP files included in this template are as follows:

PHP files in the folder /beautiful-watercolor/php/:

Blue design variation PHP files in the folder /beautiful-watercolor/php-blue/:

Gold design variation PHP files in the folder /beautiful-watercolor/php-gold/:

Green design variation PHP files in the folder /beautiful-watercolor/php-green/:

Grey design variation PHP files in the folder /beautiful-watercolor/php-grey/:

Purple design variation PHP files in the folder /beautiful-watercolor/php-purple/:

BoHo Baby

The BoHo Baby template comes with 39 static HTML files, 42 dynamic PHP files and 33 easy to access asset images. The easiest way to access these files is via the preview page located here.

BoHo Baby is also available as a WordPress Theme.

HTML Files

The HTML files in this template all follow a similar layout with comments through the HTML files. Please see the HTML section on how to use these files. The HTML files included in this template are as follows:

HTML files in the folder /boho-baby/html/:

PHP Files

The PHP files in this template all follow a similar layout. Please see the PHP section on how to use these files. There is a global _header.php and _footer.php file that is shared between all page contents.

At the top of each file you will see a $page_configuration variable. This contains configuration variables for the page layout including: Page Title, body tag CSS classes, current navigation item to highlight, which CSS styles to load and which JavaScript files to load for the page.

The PHP files included in this template are as follows:

PHP files in the folder /boho-baby/php/:

Foliage Blog

The Foliage Blog template comes with 33 static HTML files, 36 dynamic PHP files and 49 easy to access asset images. The easiest way to access these files is via the preview page located here or on the individual design variation preview pages below.

There are 4 design variations on this template. These are:

Foliage Blog is also available as a WordPress Theme.

HTML Files

The HTML files in this template all follow a similar layout with comments through the HTML files. Please see the HTML section on how to use these files. The HTML files included in this template are as follows:

HTML files in the folder /foliage-blog/html/:

Header1 design variation files in the folder /foliage-blog/header1/:

Header2 design variation files in the folder /foliage-blog/header2/:

Header3 design variation files in the folder /foliage-blog/header3/:

No Header design variation files in the folder /foliage-blog/no-header/:

PHP Files

The PHP files in this template all follow a similar layout. Please see the PHP section on how to use these files. There is a global _header.php and _footer.php file that is shared between all page contents.

At the top of each file you will see a $page_configuration variable. This contains configuration variables for the page layout including: Page Title, body tag CSS classes, current navigation item to highlight, which CSS styles to load and which JavaScript files to load for the page.

The PHP files included in this template are as follows:

PHP files in the folder /foliage-blog/php/:

Home Blogger

The Home Blogger template comes with 46 static HTML files, 49 dynamic PHP files and 62 easy to access asset images. The easiest way to access these files is via the preview page located here.

Home Blogger is also available as a WordPress Theme.

HTML Files

The HTML files in this template all follow a similar layout with comments through the HTML files. Please see the HTML section on how to use these files. The HTML files included in this template are as follows:

HTML files in the folder /home-blogger/html/:

PHP Files

The PHP files in this template all follow a similar layout. Please see the PHP section on how to use these files. There is a global _header.php and _footer.php file that is shared between all page contents.

At the top of each file you will see a $page_configuration variable. This contains configuration variables for the page layout including: Page Title, body tag CSS classes, current navigation item to highlight, which CSS styles to load and which JavaScript files to load for the page.

The PHP files included in this template are as follows:

PHP files in the folder /home-blogger/php/:

Leafy Blog

The Leafy Blog template comes with 37 static HTML files, 40 dynamic PHP files and 43 easy to access asset images. The easiest way to access these files is via the preview page located here.

Leafy Blog is also available as a WordPress Theme.

HTML Files

The HTML files in this template all follow a similar layout with comments through the HTML files. Please see the HTML section on how to use these files. The HTML files included in this template are as follows:

HTML files in the folder /leafy-blog/html/:

PHP Files

The PHP files in this template all follow a similar layout. Please see the PHP section on how to use these files. There is a global _header.php and _footer.php file that is shared between all page contents.

At the top of each file you will see a $page_configuration variable. This contains configuration variables for the page layout including: Page Title, body tag CSS classes, current navigation item to highlight, which CSS styles to load and which JavaScript files to load for the page.

The PHP files included in this template are as follows:

PHP files in the folder /leafy-blog/php/:

Pastel Floral

The Pastel Floral template comes with 43 static HTML files, 46 dynamic PHP files and 42 easy to access asset images. The easiest way to access these files is via the preview page located here.

Pastel Floral is also available as a WordPress Theme.

HTML Files

The HTML files in this template all follow a similar layout with comments through the HTML files. Please see the HTML section on how to use these files. The HTML files included in this template are as follows:

HTML files in the folder /pastel-floral/html/:

PHP Files

The PHP files in this template all follow a similar layout. Please see the PHP section on how to use these files. There is a global _header.php and _footer.php file that is shared between all page contents.

At the top of each file you will see a $page_configuration variable. This contains configuration variables for the page layout including: Page Title, body tag CSS classes, current navigation item to highlight, which CSS styles to load and which JavaScript files to load for the page.

The PHP files included in this template are as follows:

PHP files in the folder /pastel-floral/php/:

Summer Blog

The Summer Blog template comes with 105 static HTML files, 108 dynamic PHP files and 132 easy to access asset images. The easiest way to access these files is via the preview page located here or on the individual design variation preview pages below.

There are 1 design variations on this template. These are:

Summer Blog is also available as a WordPress Theme.

HTML Files

The HTML files in this template all follow a similar layout with comments through the HTML files. Please see the HTML section on how to use these files. The HTML files included in this template are as follows:

HTML files in the folder /summer-blog/html/:

Dark design variation files in the folder /summer-blog/dark/:

PHP Files

The PHP files in this template all follow a similar layout. Please see the PHP section on how to use these files. There is a global _header.php and _footer.php file that is shared between all page contents.

At the top of each file you will see a $page_configuration variable. This contains configuration variables for the page layout including: Page Title, body tag CSS classes, current navigation item to highlight, which CSS styles to load and which JavaScript files to load for the page.

The PHP files included in this template are as follows:

PHP files in the folder /summer-blog/php/:

Dark design variation PHP files in the folder /summer-blog/php-dark/:

Tendril Blog

The Tendril Blog template comes with 33 static HTML files, 36 dynamic PHP files and 30 easy to access asset images. The easiest way to access these files is via the preview page located here or on the individual design variation preview pages below.

There are 6 design variations on this template. These are:

Tendril Blog is also available as a WordPress Theme.

HTML Files

The HTML files in this template all follow a similar layout with comments through the HTML files. Please see the HTML section on how to use these files. The HTML files included in this template are as follows:

HTML files in the folder /tendril-blog/html/:

Header2 design variation files in the folder /tendril-blog/header2/:

Header3 design variation files in the folder /tendril-blog/header3/:

Header4 design variation files in the folder /tendril-blog/header4/:

Header5 design variation files in the folder /tendril-blog/header5/:

Header6 design variation files in the folder /tendril-blog/header6/:

Header7 design variation files in the folder /tendril-blog/header7/:

PHP Files

The PHP files in this template all follow a similar layout. Please see the PHP section on how to use these files. There is a global _header.php and _footer.php file that is shared between all page contents.

At the top of each file you will see a $page_configuration variable. This contains configuration variables for the page layout including: Page Title, body tag CSS classes, current navigation item to highlight, which CSS styles to load and which JavaScript files to load for the page.

The PHP files included in this template are as follows:

PHP files in the folder /tendril-blog/php/:

Verge Blog

The Verge Blog template comes with 34 static HTML files, 37 dynamic PHP files and 41 easy to access asset images. The easiest way to access these files is via the preview page located here.

Verge Blog is also available as a WordPress Theme.

HTML Files

The HTML files in this template all follow a similar layout with comments through the HTML files. Please see the HTML section on how to use these files. The HTML files included in this template are as follows:

HTML files in the folder /verge-blog/html/:

PHP Files

The PHP files in this template all follow a similar layout. Please see the PHP section on how to use these files. There is a global _header.php and _footer.php file that is shared between all page contents.

At the top of each file you will see a $page_configuration variable. This contains configuration variables for the page layout including: Page Title, body tag CSS classes, current navigation item to highlight, which CSS styles to load and which JavaScript files to load for the page.

The PHP files included in this template are as follows:

PHP files in the folder /verge-blog/php/:

HTML Files

Requirements

There are a few requirements before using the Photoshop files included in this template:

  • Good knowledge HTML, CSS and JavaScript
  • A nice code editing tool like PhpStorm.
  • Web hosting if you wish to upload these HTML files somewhere.
  • PHP 5.6+ support on Web Hosting if you wish to use the included PHP files.

How to use the HTML files:

  1. Find a template that is suitable for your needs. Pick something that is close to what you are after so you don't have to make many changes.
  2. Copy the entire html/ folder (including the html/assets/ folder) onto your website.
  3. Edit the HTML files to suit your needs
  4. Edit the CSS and JavaScripts files under html/assets/ to suit your needs

What sections are in the HTML files:

To change the logo look for the Start Logo Area comment in the HTML and adjust as neccessary:

<!-- Start Logo Area -->
<a href="index.html" class="custom-logo-link" rel="home">
    <img width="48" height="110" src="../assets/image/content/logo-icon.png" class="custom-logo" alt="logo-icon" itemprop="logo" />
    <span>Logo Text Here</span> 
</a>
<!-- End Logo Area -->

To change the main navigation menu look for the Start Navigation Area comment in the HTML and adjust as neccessary:

<!-- Start Navigation Menu -->
<div class="menu-main-menu-container">
    <ul class="menu">
        <li class="menu-item"><a href="index.html">Home</a></li>
        <li class="menu-item current-menu-item">
            <a href="about.html">Demo</a> 
            <ul class="sub-menu">
                <li class="menu-item"><a href="about-demo-styled-images.html">Demo Styled Images</a></li>
                <li class="menu-item"><a href="about-full-width-page.html">Demo Full Width</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="shop.html">Shop</a> 
            <ul class="sub-menu">
                <li class="menu-item"><a href="my-account.html">My Account</a></li>
                <li class="menu-item"><a href="checkout.html">Checkout</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="blog.html">Blog</a></li>
        <li class="menu-item"><a href="contact.html">Contact</a></li>
    </ul>
</div>
<!-- End Navigation Menu -->

Sections of code are grouped together with <!-- Template Section Start --> and <!-- Template Section End --> HTML comments. For example the header and footer of each page are grouped like below. This makes it easier to identify sections of the page to change.

<!-- Template Section Start: header -->
<html>
<head>
......
......
<!-- Template Section End: header -->
<!-- Template Section Start: footer -->
......
......
</body>
</html>
<!-- Template Section End: footer -->

PHP Files

Requirements

There are a few requirements before using the PHP files included in this template:

  • Good knowledge PHP, HTML, CSS and JavaScript
  • A nice code editing tool like PhpStorm.
  • Web hosting if you wish to upload these PHP files somewhere.
  • PHP 5.6+ support on Web Hosting.

How to use

How to create your own basic PHP file from this template: Create a new page called my-page.php with the following content in it:

Note: it's easier to copy one of the existing PHP files rather than creating something from scratch.

<?php
		
$page_configuration = array (
  'bodyclass' => 'your-body-css-class-here',
  'page_title' => 'My Page Title Here',
  'header_scripts' => 
  array (
    '../assets/js/system/jquery.js',
    '../assets/js/system/jquery-migrate.min.js',
  ),
  'header_styles' => 
  array (
    array (
      '../assets/css/theme/style.min.css', 'all',
    ),
  ),
)

// Include our global header code:
include( '_header.php' );
?>

    <div id="main-content" class="site-content inner-content-width with-right-sidebar">
        <div id="primary" class="content-area">
            <main id="main" class="site-main">
                Put your page content here.
            </main>
        </div>
    </div>
    

<?php 
// Include our global footer code:
include( '_footer.php' );
?>

What are the various PHP files

The _header.php file: This file contains the opening html tag and body tag and the site logo that appears on every page. It also includes the _meta.php and _navigation.php files. This file looks like:

<!DOCTYPE html>
<html lang="en-US">
    <?php 
    // Include our meta page title and script code: 
    include( '_meta.php' );
    ?>
    <body class="<?php echo $page_configuration['bodyclass'];?>">
        <div id="page" class="site">
            <a class="skip-link screen-reader-text" href="#main-content">Skip to content</a> 
            <header id="masthead" class="site-header">
                <div class="site-branding">
                    <!-- Start Logo Area -->
                    <!-- End Logo Area -->
                    <div class="site-title">
                        <div><a href="index.php" rel="home">Home</a></div>
                    </div>
                </div>
                <!-- .site-branding -->
                <nav id="site-navigation" class="main-navigation">
                    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu</button>
                    <?php 
                    // Include our global navigation code for menu generation:
                    include( '_navigation.php' );
                    ?>
                </nav>
                <!-- #site-navigation -->
            </header>
            <!-- #masthead -->
            

The _meta.php file: This file contains the code within the HEAD html tag. This includes the page title along with any JavaScript and CSS files. This file looks like:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo $page_configuration['page_title'];?></title>
    <?php 
    // dynamically generate our required styles based on the page configuration array.
    if( !empty( $page_configuration[ 'header_styles' ] ) ){
        foreach( $page_configuration[ 'header_styles' ] as $src ) {
            if( is_array( $src ) ) {
                echo "<link rel='stylesheet' type='text/css' href='$src[0]' media='$src[1]' />\n";
            }else{
                echo "<link rel='stylesheet' type='text/css' href='$src' />\n";
            }
        }
    }
    // dynamically generate our required scripts based on the page configuration array.
    if( !empty( $page_configuration[ 'header_scripts' ] ) ){
        foreach( $page_configuration[ 'header_scripts' ] as $src ) {
            echo "<script type='text/javascript' src='$src'></script>\n";
        }
    }
    ?>
</head>

The _footer.php file contains the shared footer between all the PHP files. It also generates any footer scripts that are required for the page to render.

Asset Files

Requirements

There are a few requirements before using the asset files included in this template:

  • Good knowledge of how to add images to your website
  • Photoshop (or similar image editing tool) knowledge if you wish to adjust the image asset files
  • Web development skills if you wish to adjust the included CSS or JavaScript asset files

How to use the asset images:

The asset images included in these templates can be easily used in any project. Simply upload the desired asset image onto your website.

How to use the asset CSS and JavaScript files:

The CSS and JavaScript files are stored in the assets/ folder under each template. Generally you would want to edit the CSS files located in assets/css/theme/*.css and the JavaScript files located in assets/js/theme/*.js however you can edit the other files to suit your needs.

These CSS, JavaScript and Font assets are referenced from various pages of the template. Some files are used on every page, others (like those in assets/css/content/*.css) might only be used on a single page.

Photoshop Files

Requirements

There are a few requirements before using the Photoshop files included in this template:

  • Good knowledge of Photoshop
  • Photoshop version CS6 or above
  • Ability to download the photoshop files (30MB - 150MB each)

Downloading

In order to download the photoshop files please visit our online resource page here: https://dtbaker.net/files/envato/resources/. You will need to login with your Envato account to verify template purchase. Then you will be presented with a page that will let you download each of the individual PSD files one at a time.

Support

This template requires a moderate level of web developer experience. We cannot provide support for:

  • Custom modifications
  • Integration with 3rd party platforms

How to access support

Please head over to https://dtbaker.net/envato/ to access our support system.

Buy Now

If you haven't already purchased a license for this HTML bundle please do so by clicking here.