Overview

Flatastic is a powerful and ultra-responsive theme which can perfectly serve any type of business, freelance or interactive sphere creation. For theme support that cannot be found in this documentation, please visit our support forum.

Version 1.0: 05/29/2015
Author: Arrowtheme
Design: mad_velikorodnov

Installation

There are several ways Flatastic can be installed. For existing sites that already have content, the first method will only involve the installation and activation of the theme. The second option includes a full Drupal 7 installation with the same SQL database file used to create the theme demo. Please choose which installation method works best for you and follow the instructions. We do highly recommend you to perform the full installation, especially if you plan on using the Commerce functionality.

Theme Installation only

Download Drupal: https://drupal.org/project/drupal to install default Drupal.

Video: Installing Drupal 7

Option 1: Option 2:

Full Drupal Installation

The following steps are designed for people that have experience in installing Drupal and importing databases manually. If you do not feel comfortable with performing these steps by yourself, contact your server administrator for help. NOTE this option is for a completely new Drupal install. Do not import the provided SQL file into an existing Drupal database or you will lose all of your data!

  1. Create a database for this installation of Drupal and import the SQL file that come with the theme.
  2. Follow these directions to create the settings.php file. Save this file somewhere so you can copy it over to the Drupal installation we have provided.
  3. Copy the entire contents of the Drupal_7 folder to the location on your web server where you want your site to be accessed. If you want your primary domain to point to your install of Flatastic, copy everything to the root folder. If you want your site to be accessed as a subsection of your domain (for example: yourdomain.com/drupal) then simply rename the Drupal_7 folder to the desired name and upload to the root of your server. Also be sure to copy over the settings.php file mentioned in the previous step
  4. Login to your site yourdomain.com/user with the username admin and the password admin123 and visit yourdomain.com/admin/people to change the admin username and password.
  5. Go through the Drupal configuration found in yourdomain.com/admin/config options and update all the necessary information to reflect your website. Also be sure to visit yourdomain.com/admin/config/media/file-system and change the Temporary Directory.

One Click Install Full Demo

The following steps are designed for people that have experience in installing Drupal and importing databases manually. If you do not feel comfortable performing these steps by yourself, contact your server administrator for help. NOTE this option is for a completely new Drupal install. Do not import the provided SQL file into an existing Drupal database or you will lose all of your data!

  1. Create a database for this installation of Drupal and import the SQL file that come with the theme.
  2. Step 1: Run url http://yourdomain.com/ and Choose Flatastic (Install profile for Flatastic themes)

  3. Step 2

  4. Step 3

  5. Step 4

  6. Step 5

  7. You can see this video

General Setting

Modules

You can find all of the modules used in the demo in the modules.zip archive in the root of the folder you downloaded from ThemeForest. Not all modules are required to use the theme, but below is a list of modules you will need to utilize various elements of the theme

Copy all folders under "/Theme Package/modules/*" to your existing drupal site "/sites/all/modules/*"

Copy all folder under "/Theme Package/libraries/*" to your existing drupal site "/sites/all/libraries/*", if you dont have "/sites/all/libraries" on your existing site, you need to create one.

General Required Modules

Shop

Notes

Visit yourdomain.com/admin/modules to activate all modules needed to install (select the following checkboxes to ENABLE those modules and click Save configuration).

Activate modules in Drupal core: Blog, Contact and PHP filter.

Set permissions for module Contact (Visit yourdomain.com/admin/people/permissions#module-contact and select all checkboxes of "Use the site-wide contact form").

Set permissions for module Search (Visit yourdomain.com/admin/people/permissions#module-search and select all checkboxes of "Use search").

Text Formats

Remove tag <br> auto insert in Block static: Visit yourdomain.com/admin/config/content/formats/full_html and uncheck Convert line breaks into HTML (i.e. <br> and <p>)

Theme Settings

Visit yourdomain.com/admin/appearance/settings/flatastic to configure your theme's settings. You can select Page layout, Header layout, Footer layout, Add your own custom CSS, Add your own custom logo, etc.

Settings Theme Layout

Visit yourdomain.com/admin/config/system/site-information select Tab Design You can select settings theme layout for Flatastic.

Settings for Logo, Site Name and slogan

You can change Logo by a logo image or use site name text and site slogan.

Visit yourdomain.com/admin/config/system/site-information to configure your Site Name and Site Slogan.

Add Taxonomy

Flatastic has a total of 7 Vocabulary Taxonomies: Blog Categories, Portfolio Categories, Product Attributes, Product Categories, Product Manufacturer, Product Tags, Tags.

Blog Categories

Visit yourdomain.com/admin/structure/taxonomy/add to add taxonomy Blog Categories.

Visit yourdomain.com/admin/structure/taxonomy/blog_categories/add to Add term for Blog Categories.

Portfolio Categories

Visit yourdomain.com/admin/structure/taxonomy/add to add taxonomy Project Category.

Visit yourdomain.com/admin/structure/taxonomy/portfolio_categories/add to Add term for Portfolio Categories.

Product Categories

Visit yourdomain.com/admin/structure/taxonomy/add to add taxonomy Product Categories.

Visit yourdomain.com/admin/structure/taxonomy/terms/add to Add term for Product Categories.

Similar for others taxonomy

Add Content Type

Art Portfolio

Visit yourdomain.com/admin/structure/types/manage/portfolio/fields to add fields for content type Portfolio (check Add existing field)

Fields:

Blog

Visit yourdomain.com/admin/structure/types/manage/blog/fields to add fields for content type Blog (check Add existing field)

Fields:

About

Create a content type named About (check Add existing field)

Fields:

Clients

Create a content type named Client (check Add existing field)

Fields:

Product Display

Create a content type named Product Display (check Add existing field)

Fields:

Services

Create a content type named Services (check Add existing field)

Fields:

Team

Create a content type named Team (check Add existing field)

Fields:

Testimonial

Create a content type named Testimonial (check Add existing field)

Fields:

Config URL aliases

Visit yourdomain.com/admin/config/search/path/patterns to configure URL aliases of Portfolio and Blog.

Add Node

Blog

Visit yourdomain.com/node/add/blog to create a node blog.

Portfolio

Visit yourdomain.com/node/add/portfolio to create a node portfolio.

About

Visit yourdomain.com/node/add/about to create a node for About.

Services

Visit yourdomain.com/node/add/services to create a node for Services.

Team

Visit yourdomain.com/node/add/team to create a node for Team.

Clients

Visit yourdomain.com/node/add/clients to create a node for Clients.

Product Display

Visit yourdomain.com/node/add/product-display to create a node for Product Display.

Testimonials

Visit yourdomain.com/node/add/testimonials to create a node for Testimonials.

Create View Blocks

Flatastic features 26 View Blocks and View Pages created from the content types. You can create the View by importing code in the folder "files_export_views".

For example: import view Blog Block

Visit yourdomain.com/admin/structure/views/import to create a view by importing code from (/files_export_views/blog_block.txt).

Result Views:

Result Blocks:

Create View

Clone View

Click clone in top right corner of View

Change Machine Name for new clone Views

Click information to open pop up. This show all templates file of new Clone View

Open source code, clone file template of old view (by old machine name) and rename to new view

Example: Original View

New Clone View:

Click Save, then clear All Caches

Assign View

Assgin to region in block

Visit yourdomain.com/admin/structure/block

Assgin to region in page panel

Visit yourdomain.com/admin/structure/pages and select page to edit

Front Page

The front page seen on the Flatastic demo consists of various block regions. Some are generated by Views, and some are custom blocks with special markup. You can find all of the markup used on the demo front page inside the html_block and content_page_demo folder in the root of the theme folder.

Visit yourdomain.com/admin/structure/block to disable all Blocks in Region Help default (return "No blocks in this region") and click button Save blocks

Block Regions

Flatastic features 34 block regions where you can add your own custom content. Visit yourdomain.com/admin/structure/block to add your own content to the defined block regions. Press "Add Block" to create a new custom block, or select an existing block from the Disabled list below the defined block regions.

All HTML files to create Block Static in folder html_block

Header Block Regions

Flatastic features 9 header regions: Top Bar Header 1, Top Bar Header 2, Top Bar Header 3, Info Header 3, Top Bar Header 4, Custom Link Header 4, Language, Currency, Menu You can use the "demonstrate block regions" link on yourdomain.com/admin/structure/block to see exactly where these are located, but the names are fairly self explanatory. If you would like to mimic the social icon region seen above the menu on the demo you can use the following markup in a block:

Content Block Regions

Flatastic has a total of 9 content block regions: Slider, Sidebar Slider, Social Widget, Features Blog, Before Content, Content, Right Siderbar, Search, Cart Like the Header regions described above these regions are fairly self explanation. One thing to note is that the before content regions are called outside of the main content wrap so you can use completely full width content (like the Slider) or use your own custom wrappers. Those regions are there to do whatever you like with and are not restricted by any additional markup.

Footer Block Regions

Finally there are 10 footer block regions: Footer Top, Footer Box 1, Footer Box 2, Footer Box 3, Footer Box 4, Footer Box 5, Footer Box 6, Footer Box 7, Footer Box 8 and Footer Bottom.

Menu

Visit yourdomain.com/admin/structure/block/manage/system/main-menu/configure select Region Setting of Flatastic to be Menu Region to show menu.

Flatastic has a block region called Menu which can be used to add any menu block you like. The demo simply uses the default Main Menu block but you can create a custom menu block if you like.

Note: make sure to check the "show as expanded" box on all parent items with children to ensure the dropdown menu works correctly.

Revolution Sliders

Flatastic support Revolution Slider in module. You need install, active for module "art_revolution".

Visit yourdomain.com/admin/art_revolution to set up global settings for Revolution Slider.

Visit yourdomain.com/admin/art_revolution/1/globalsettings to adjust the Global settings for the Revolution Slider.

Home Page Demo

Flatastic supports 6 types of Home Page display:

Example: Home Page Default

Visit yourdomain.com/admin/structure/pages/import to create a panel page by importing code from (/files_export_panels/files_export_panels.txt).

You can drag and drop Blocks in Layout designer to change position of Blocks.

You can apply the same steps to other Home Versions

Shop

Below are main categories list of Product:

Configure it the same as Home Page Demo

Portfolio Page

Configure it the same as Home Page Demo

Portfolio List

Flatastic supports 4 types of Projects display.

Portfolio Page - Example: http://arrowtheme.com/flatastic/portfolio-two-columns

This is the standard Portfolio style which utilizes the "Portfolio" View. If you are not using the full demo or did not use the Custom Content module you can use the code in /files_export_views/portfolios.txt to import this View. Then simply place the "View Page" width path is yourdomain.com/portfolio-two-columns .

Views: yourdomain.com/admin/structure/views/view/portfolio

Add Menu: Visit yourdomain.com/admin/structure/menu/manage/main-menu/add to add a Menu named Portfolio 2 columns under parent menu Portfolio.

Single Portfolio

Flatastic supports 2 types of Content.

Pages

Configure it the same as Home Page Demo

Blog Page

Configure it the same as Home Page Demo

Blog

Blog Page - Example: http://arrowtheme.com/flatastic/blog_grid_v2

This is the standard Blog style which utilizes the "Blog Style Page" View. If you are not using the full demo or did not use the Custom Content module you can use the code in /files_export_views/blog.txt to import this View. Then simply place the "View Page" width path is yourdomain.com/blog.

Views: yourdomain.com/admin/structure/views/view/blog

Add Menu: Visit yourdomain.com/admin/structure/menu/manage/main-menu/add to add a Menu named Grid V2 under parent menu Blog Masonry.

Single Blog

Flatastic supports only 1 type of Content.

Shop Page

Flatastic supports Drupal Commerce.

Drupal Commerce

Flatastic supports the Drupal Commerce module, a powerful eCommerce framework for building online stores. Drupal Commerce has a complete set of documentation which we highly recommend reading if you have never used DC before. We will go over some of the basics and highlight the aspects of the theme that enhance DC and how you can use them on your site. If you do plan on using Drupal Commerce with your installation of Flatastic we also highly recommend you install the full demo content as it will provide you a completely functional configuration of Drupal Commerce to begin working with.

- You need to download and install Drupal Commerce module. Click here to follow this article. - Active module Commerce: Visit http://yoursite.com/admin/modules and active Commerce.

Create the taxonomy of Product Content Type: Product Attributes, Product Categories, Product Manufacturer, Product Tags. Follow this article http://arrowtheme.com/userguide/flatastic/#toc8

Create the fields of Product Content Type. Follow this article http://arrowtheme.com/userguide/flatastic/#toc9

Product Types

When the Commerce module is activated you can visit /admin/commerce to begin configuring Drupal Commerce. We will not be going over every options page, but we will outline the creation of Product Types and explain how that relates to the "Product Display" content type. Visit /admin/commerce/products/types to begin creating your own Product Types. Below is an example of what the fields look like on a Flatastic demo product type:



Product Types have some default fields like Product SKU which are required for Commerce products to function correctly, but you can create as many additional fields as you need for your products.

Creating products using "Product Display"

As described earlier in the Content Types section of the documentation, Flatastic uses a content type called Product Display which acts as a bridge between Drupal and Commerce products. The "Product Reference" field allows you to create your product(s) at the same time of the node creation. Below is a step by step guide for using this content type to create a Drupal Commerce product node in Flatastic:

Creating a "Shop" page.

The key to make everything tie together is the View page which uses the search index to display the products. This is done by creating a View like you create any other View, but by selecting your search index from the "Show" select menu during the initial view creation. This View is an unformatted list of the rendered entity, and no other special configurations are needed. The following template files are associated with Flatastic's demo shop page:

Configure it the same as Home Page Demo

Shop Page link: http://arrowtheme.com/flatastic/category-grid

Flatastic supports 2 types of List Shop display.

Single Shop

Flatastic supports 2 types to display content.

Wishlist

To make use of the Wishlist functionality that can be seen on the Flatastic demo you will need to install the Flag module. After that, you need to visit /admin/structure/flags/import to import the following code:

                $flags = array();
                // Exported flag: "Shop".
                $flags['shop'] = array(
                  'entity_type' => 'node',
                  'title' => 'Shop',
                  'global' => '0',
                  'types' => array(
                    0 => 'product_display',
                  ),
                  'flag_short' => 'Add to Wishlist',
                  'flag_long' => '',
                  'flag_message' => '',
                  'unflag_short' => 'Remove Wishlist',
                  'unflag_long' => '',
                  'unflag_message' => '',
                  'unflag_denied_text' => '',
                  'link_type' => 'toggle',
                  'weight' => 0,
                  'show_in_links' => array(
                    'full' => 'full',
                    'teaser' => 'teaser',
                    'rss' => 0,
                    'search_index' => 0,
                    'search_result' => 0,
                    'art_portfolio' => 0,
                    'token' => 0,
                  ),
                  'show_as_field' => 1,
                  'show_on_form' => 0,
                  'access_author' => '',
                  'show_contextual_link' => 0,
                  'i18n' => 0,
                  'api_version' => 3,
                );
                return $flags;
            

Then if you don't already have it you can use the code in /files_export_views/wishlist-block.txt to create a View to display a block of the Wishlist items.

Access Denied

Visit yourdomain.com/node/add/page to create a node basic page. You can use the code demo content in /content_page_demo/Access-denied.html

Shortcodes

Configure it the same as Access Denied

Contacts

Edit Map and infomation contact: Visit yourdomain.com/admin/structure/block, configure Contact Block Page

Edit Contact Form : Visit yourdomain.com/admin/content, edit Contact Form (type Webform), select tab WEBFORM

Add field Contact Form :

Setting email Contact Form :

FAQ

Q: When I tried to import file sql into this “mySite” DB, mySql pops error message saying #1062 – Duplicate entry for key ‘PRIMARY’

A: Please create a new db (empty db) and import file sql. If you import db to one available, it will be error.


Q: How to remove the Breadcrumbs, Switcher Control or Social Widget?

A: Please go to yourdomain.com/admin/appearance/settings/flatastic, in tab General, uncheck checkbox and Save.


Q: How can we choose different homepage versions for our homepage?

A: Please go to yourdomain.com/admin/config/system/site-information, change link in Default front page field. Example: “index-layout-2”.


Q: How to change the fonts style for the theme?

A: Please open file:

\sites\all\themes\flatastic\css\style.css
Import new font after line 22 (font Roboto is default). Example:
@import url(http://fonts.googleapis.com/css?family=NameOfNewFont:300,700,500,300italic);
Then search and replace all font-family by NameOfNewFont in all file css.


Q: How to hidden notice?

A: Please open file

\sites\all\themes\flatastic\index.php
and put code in top of file
error_reporting(0);
    ini_set('display_errors', FALSE);
    ini_set('display_startup_errors', FALSE);


Q: How to fix this error?
Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 1041532 bytes) in /path-to-website/includes/database.mysql-common.inc on line 41

A: Please open file

\sites\all\themes\flatastic\index.php
and put code in top of file
ini_set('memory_limit','128M');


Q: How to config slider for each homepage?

A: Please go to yourdomain.com/admin/structure/block/, then config block "ReVolution Slider Block"

Thank You

Thank you very much for purchasing the Flatastic Multipurpose Drupal 7 theme. Once again if you have any issues or feedback please contact via the ThemeForest author page. Enjoy using Flatastic!

© 2015 Arrowtheme.