Introduction

MD AweContent is very unique and powerful module, which will help you creating and managing your site's layouts and content in just a few minutes without coding. Building a website with complex grid layouts with columns, tabs, sliders, etc is no longer difficult and wasting time anymore but as easy as a pie. Let's play with our MD AweContent!

Support Policy

General

The purpose of our Support Forum is to provide you with the right answers at the right time. We always want our valued customers to experience not only quality products but also best services possible and we really want to become your Drupal pal.

Our support is provided only for direct product buyers who own valid purchase code of the products (you cannot register in our support forum without the valid code or purchase code of theme from another author). Our Support Forum is the only official support channel. Questions sent using other channels may be ignored without notice.

Pre-Support Actions

Before asking any questions, please make sure you have read the documentation and searched in our Support forum, as some of the questions may be already covered there.

Also, please read our Support Scope carefully before submitting any questions:

What You Can Expect From Our Support?

There are certain things that you can expect from our Support forum:

• We always have bug-related and technical support in priority
• We are happy to receive proposals and ideas
• Tiny custom requests can be served (low priority, depending on workload and good will)

What You Can Not Expect From Our Support?

There are certain things that are out of scope and will not be handled by our team:

• Generic Drupal questions
• Issues related to 3rd party modules
• Customization requests
• Any tickets that contain abuse or violence
• Requests from indirect purchases (AweContent came as part of some other products)

Opening Support Thread

In order to get response in reasonable time we are kindly asking you to provide following information while opening support ticket:

• Your website URL and credentials information
• Detailed description of actions taken before issue
• Screenshots of the problem
• Any other information that you find useful

All private information will be sent via email for security reason and will not be provided to any third party

Licensing

This section will explain all you have to know about licensing for MD AweContent. The most important thing you need to know about licensing of MD AweContent is that we totally rely on licensing and copyrights developed by Envato who has an amazing licensing standards. At the moment Envato, there are three types of licenses.

Regular license

Regular License is the most common type of licensing for MD AweContent. Regular license allows you to use item in one single end product which end user is not charged to access or use. You can acquire regular license for your own website, or if you are a developer - for one client by transferring the license to your client when the project is finished. Distribution of source files is not permitted.

For more detail, please read here

Extended license

Extended License allows use of the item in one single end product, which you or one client may sell to end users (charge end users to access or use the end product), but user do not have access to the source files in any case. Extended license allows you to integrate MD AweContent into your Drupal theme to sell on ThemeForest. Distribution of source files is not permitted.

For more detail, please read here

In-Stock license (Theme Integration)

After purchasing the Extended License, please send us a mess via our Contact form on Codecanyon with below information:

- Purchase code: Your purchase code
- Theme to use: Your theme name (Full name in Themeforest title)

Getting Started

Requirement

MD AweContent requires Drupal 7.x, MD Media (comes with the package) and jquery_update module

Iconapi and fontello modules: To use font icon in Icons object (and some other object like accordion)

Download package contents

Once you have downloaded and unzipped the AweContent package, you will be faced with a list of files and folders. An explanation of these is as follows. Any item not mentioned here should be ignored for the moment.

Install the module

Installing MD AweContent module is not much different from installing any other (free) Drupal modules, so you might be familiar with this process already. If not, please follow instructions below:

You can install by using Drupal module uploader or using FTP.

Drupal module uploader

1. Log into your website
2. From admin toolbar, click Modules
3. Click Install new module and browse to the module's zip file (it is located in the folder you've downloaded from CodeCanyon) and choose that file.
4. Click Install and wait while plugin is uploaded to your server
5. Find and enable MD AweContent
6. Scroll to bottom and click Save configuration

FTP

You can also install MD AweContent via FTP:

1. Browse to the module's zip file and extract that file, you will get folder named "awecontent"
2. Open your FTP program and FTP into your site and navigate to the sites/all/modules/ directory
3. Upload awecontent folder to this directory
4. Back to your drupal admin toolbar, click Modules
5. Find MD AweContent enable it
6. Scroll to bottom and click Save configuration

Module update

When module has a bug fixes or enhancements, you will be notified to upgrade..

Installing updates is just involves replacing the old module files with the new ones. It's always a good idea to backup everything before you upgrade, especially if you have made any changes to MD AweContent's files, as the upgrade will overwrite all files. The content that you created though Drupal admin will all remain intact.

Backing Up

1. It is always a good idea to back up your module before making any changes
2. Open your FTP program and FTP into your site and navigate to the sites/all/modules/ directory.
3. Download the md_awecontent folder and save it as a backup

Upgrading

1. Download the new version of the module from Codecanyon download page
2. Browse to the module's zip file (it is located in the folder you've downloaded from CodeCanyon) and extract that file.
3. Put your site to Maintenance mode (Go to Configuration then Maintenance mode. Make sure the Put site into maintenance mode box is checked and click Save configuration
4. Switch to your FTP program, FTP into your site and navigate to the sites/all/modules/ directory.
5. Transfer the new md_awecontent folder into the sites/all/modules/ directory on your server, overwrite the existing one.
6. Run update.php script from your drupal site.

Note: If you are running a local server, just copy and override the files.

Using MD AweContent

Enable for Content type

To apply AweContent for content types, you go to Structure/Content Type and click on edit. In the edit page, you check Enable MD AweContent. Here you can set wrapper elements and add Google font for SPECIFIC CONTENT TYPE and ending up with Save content type button.

Configuration

From the admin toolbar shortcut, Clicking on AweContent/Config also leads you to the setting page with Wrapper elements and Google font. However, this is the general setting, which will apply for ALL CONTENT TYPES if they are not set their own value in content type page (as mentioned in Enable for Content type above)

Template: Page/Section

To create page and section templates, from the admin toolbar shortcut, you click AweContent/Templates. Here you can see 2 tabs: Page and Section, where you can add page and section templates with just a click on Add Page Template or Add Section

Add page template:

Add section template:

After click Add section and waiting for just a second of loading, you can see the very first interface of MD AweContent config page:

Section settings

Here are settings for section: (they display in black when you hover over the section)

1. Drag and Drop You just drag and drop to change the section order
2. Add column Click here to add more columns to section
3. Custom Section Click and custom section panel will open on the left. Here you can change section settings such as: id, class, attribute; setting row spacing, border, margin, padding and section background (background overlay and background type: image - color - youtube and vimeo video)
4. Clone Clone section
5. Delete Delete section
6. Save You can save section and use it in another node (manage it at AweContent/Templates/Section). After click Save you can name your section and upload cover image for it
   
   

   

Column settings

Here are settings for column: (they display in blue when you hover over the section)

1. Custom column Here you can customise column setting including: adding id and class, align, set column height, border, radius, margin and background (background overlay and background types: color - image)
2. Split column split current column into 2 columns
3. Clone column clone column and all its content.
4. Delete column
5. Decrease indent one Bootstrap column unit per each click
   
   

   

6. Increase indent one Bootstrap column unit per each click
7. Add sublayout Adding many columns in a column
   
   

   

8. Enter Make column come to new row. Only can be applied if there are more than one column

Content objects

We offer you 18 ready objects. All you need to do is just drag and drop those items into column then customise them

1. Header
2. Text Block
3. Message Box
4. Divider
5. Button
6. Icon
7. Image
8. Gallery
9. Sideshow
10. Table
11. Accordion
12. Tabs
13. Flickr
14. Facebook
15. Video
16. Map
17. iFrame
18. HTML

Header

Header Block allows you to add and customise Header text with a variety of custom options as below:

Note: We also offer you font style setting for in-line text

Text Block

Text Block allows you to insert paragraph type text and format it with a bunch of setting options, similar to Header Block

Note: We also offer you font style setting for in-line text

Message Box

Message Box add noticeable message to your website in order to show success, error, warning etc.

Note: We also offer you font style setting for in-line text

Divider

Divider add separator line to your section/page together with text

Note: We also offer you font style setting for in-line text

Button

Add button with multiple color and styling options.

Note:To edit text "BUTTON", just click directly on it. We also offer you font style setting for in-line text

Icon

To use icon you need iconapi and fontello module.

Image

Add simple image to your layout and style it

Note:We also offer settings on image (at the image top right): adding caption and adding link with opening new window option

Gallery

Add responsive Image gallery

Note:We also offer settings on each image in gallery (at the image top right): adding caption, adding link with opening new window option and delete image

Open Lightbox:

Slideshow

Note:We also offer settings on each image in the slideshow (at the image top right): adding caption, adding link with opening new window option and delete image

Table

Note:To edit text, just click directly on it. We also offer you font style setting for in-line tex

Accordion

Note: To edit text, just click directly on it. "Active" is the one you are viewing. Normal is the others. Hover is the one you hover the mouse over.

Tabs

Note: To edit Header text, just click directly on it. "Active" is the tab you are viewing. Normal is the others. Hover is the one you hover the mouse over.

Flickr

Display your photo stream from Flickr on your site

Facebook

Add "Facebook like" button

Video

Map

iFrame

HTML

Insert your custom HTML content if necessary

Drupal blocks

This section contains all available Drupal blocks (in Structure > Blocks) such as: Recent comment, Search form, User login, Syndicate, Who's new, etc

Besides Drupal blocks, we also offer an extra option: "Fields". These are the fields of content type. You can drag, drop and edit those fields' content directly with MD AweContent

Responsive settings

Content is like water. When you put water in a cup, it becomes the cup. When you put water in a bottle, it becomes the bottle. When you put water in a teapot, it becomes the teapot. - Josh Clark (originally Bruce Lee)

Nowadays, an increasing number of user use their tablets and smartphones to browser the internet. Thus, it becomes important that a website can look good and function well at any size. Understand this, we invested an amount of time in order to offer user best viewing experience, no matter which device the site is being viewed.

You can view the responsive design being shown off across different browsers easily with our 4 in 1 viewport: desktop, tablet, tablet horizontal and mobile.

Additionally, our the extra settings allows you to view the detail content with show/hide option

Note Responsive settings only work if your theme support responsive.

Import & Export Template

Template Manager System

All your newly-created section/page templates will be saved in AweContent > Templates. Here you can edit, delete or clone those templates.

Note: In section template tab, you can see some categories including Theme and My Templates

1. Theme: Section templates which are imported into your current theme
2. My Templates: All the section templates that you have created

How to import & export

Note: You need to enable module AweContent Themer before importing and exporting templates.

1. Export: In tab Export, you just choose the template that you want to export and click on Export button at the page bottom. Then you can save that template into your computer under a zip file.



2. Import: You just have to extract the zip file into your theme folder in sites/all/themes/YOUR_THEME. The folder structure looks like this:





All those section templates will appear in Theme category in Section tab in AweContent > Templates > Section

For Developers

Establish support information of AweContent in theme

Based on this information, module MD AweContent will decide whether the theme supports displaying nodes created with it or not. And theme without css to set up page wrapper width, page content = 100% window width

To check whether the pages created with MD AweContent can use variable $awecontent in file page.tpl.php. In case pages are created with MD AweContent, the variable's value = TRUE and = FALSE in vice versa

Notice to inform theme support MD AweContent

Add the following in file .info in folder theme:

1. awecontent = 1 To inform that the theme supports module AweContent
2. container_width = 1170 Set up grid wrapper's width in pixel. Default value is 1170px

Page Wrapper

The ID that you insert in Config (AweContent/Config) is the ID of the tag which contains all the page content.

Theme suggestion for page created with MD AweContent

In addition to using variable $awecontent to check and support displaying content of the page created with MD AweContent, you can use file template suggest for those pages. These pages will use file tpl like default Drupal theme suggestion by replacing prefix page with page--ac.

For example:

1. page--ac.tpl.php
2. page--ac--node.tpl.php
3. page--ac--node--%.tpl.php
4. page--ac--node--1.tpl.php

Define adding suggestion for node created with AweContent: Using hook_preprocess_page() in file template.php in theme folder. For example, to create theme suggestion by content type, please add the following code:

if(isset($vars['node']) &&isset($vars['awecontent_built']) &&$vars['awecontent_built']) {
  $vars['theme_hook_suggestions'][] = 'page__ac__node__' . str_replace('_', '--', $vars['node']->type);
}

How to create an object for MD AweContent?

Declare object info in module or in theme, which is being used:

hook_awecontent_objects_info()

Return an array with pattern:

array(
  'object_machine_name' => array(
    'js' => array(
    'js_file_path' => array(options_use_in_drupal_add_js)
  ), 
  'css' => array(
    'css_file_path' => array(option_use_in_drupal_add_css)
  ),
  'callback_render' => 'front_end_render_function',
  'theme_callback' => 'theme_name_render_object'
)
)
	

Including:

1. object_machine_name Object name. This is the unique name. You should add prefix for module or name
2. js List of js files, which are used for object. Each file js is under the format: : ‘file_path' => array(options). ‘option' is an array of attribute to define the file (like options in drupal_add_js)
3. css List of files css, which are used for objects. Establishing these files is similar to js files
4. callback_render and theme_callback: Function or theme to render object at front-end. Please used only one out of these two attributes to render object

In list of js file, which are used for object, there must be 1 file js to declare object in admin of AweContent module. Usually, this file is named awecontent-object-item.js. You can take reference of default object of MD AweContent in js/awecontent/plugins.

Write file js admin for object:

(function ($) {
'use strict';

/**
     * Object to define data for object
     */
AWEContent.Models.NewObject= AWEContent.Models.Item.extend({
defaults: {
machine_name: 'newObject',
color: ''
},
createView: function() { // Method to create view object for data object
this.view= new AWEContent.Views.NewObjectView({model: this});
}
    });

/**
     * Object to define view for object
     * Render object to page view and update change from
     * settings to view of object
     */
AWEContent.Views.NewObjectView= AWEContent.Views.Item.extend({
initialize: function () {
AWEContent.Views.Item.prototype.initialize.call(this);

/*@TODO: implements others initialize when object is created */
},
renderItemContent: function () {
/* This method is use to render view for object what
             * will be shown in page view
             */
varitemModelSettings = this.model.toJSON(),
$itemHtml = $('<div class="awe-new-object">New Object</div>');

// set color for item
$itemHtml.css('color', itemModelSettings.color);

//@TODO: implements render other settings

// return item html
return $itemHtml;
},
applySettingsChanged: function () {
/* This method is used to update change of model
             * settings to view when it is change on panel setting
             */
varchangedSettings = this.model.changedAttributes(),
_self = this;

// implements change by list settings changed
$.each(changedSettings, function (settingName, changedValue) {
switch (settingName) {
case 'color':
                        $('.awe-new-object', _self.el).css('color', changedValue);
break;
// @TODO: case for others setting of object
}
            });
}
    })

/**
     * Define object to create controller for object in list
     * object of AWEContent what can drag to page builder
     */
AWEContent.Views.NewObjectController= AWEContent.Views.ItemController.extend({
machineName: 'newObject',
controllerHtml: function () {
/**
             * Method to return html define for object in
             * list object
             */
return '<span >NewObject< / span >';
},
createItemModel: function (data) {
/**
             * Method to create new object data instance
             */
if (data != undefined) {
/* Create data object with some settings */
return new AWEContent.Models.NewObject(data);
}

// create object data with default settings
return new AWEContent.Models.NewObject();
}
    });

/**
     * Define object which contains elements allow to set
     * settings for object
     */
AWEContent.Views.NewObjectPanel= AWEContent.Views.ItemPanel.extend({
panelName: 'newObject',
className: 'awe-obj-panel new-object-panel',
initPanel: function () {
/**
             * This method is used to init for elements on setting panel
             */
var_self = this;

// implement parent method
AWEContent.Views.ItemPanel.prototype.initPanel.call(this);
$('#newobject-color', this.el).change(function (event, color) {
if (color)
                    color = color.toRgbString();
else
color = '';
_self.editingModel.set('color', color);
});

/*@TODO: implements declare event for other elements on panel */
}
,
setPanelElementsValue: function () {
/**
             * This method is used to set value of settings of edit object to elements on panel
             */
varitemSettings = this.editingModel.toJSON();

// set value for colorpicker element
$('#newobject-color', this.el).aweColorPicker('value', itemSettings.color);

//@TODO: set value for other elements
}
,
buildPanel: function () {
/**
             * This method return elements on panel
             */
return {
title: {
type: 'markup',
markup: '<div class="awe-title"><h2>NewObject Settings</h2></div>'
},
color: {
type:'colorpicker',
title: "Color",
options: {
"preferredFormat"  : "rgb",
"AlphaVerticle"  : true,
"showAlpha"  : true,
"allowEmpty" : true,
"showInput" : true
}
                }
            }
        }
    })

// Process when document ready
$(document).ready(function () {
AWEContent.Controllers.newObject= new AWEContent.Views.NewObjectController(); // create controller object
AWEContent.Panels.newObject= new AWEContent.Views.NewObjectPanel(); // create panel object
})
})(jQuery);

This file defines 4 classes used for declaring object

1. Define class containing object database: This class must be included in AWEContent.Models and inherit from AWEContent.Model.Item

   + defaults Define attributes, which will configure object. ‘machine_name' is the compulsory attribute to define object name. This 'machine_name' is the object_machine_name that is returned in array (above)

   + createView Method to create an Instance view for class. This function initiates view from class view

2. Define class displaying in page which is built for object: This class must be in AWEContent.Views and be extended from AWEContent.Views.Item

   +model object contains Object database and displays in view

   +$el DOM Object of view in page

   +renderItemContent: This method is used to create object html from object data and it will return DOM Object or string html of object

   +applySettingsChanged: This method updates changes from data to view of the object in page build. This method is called when elements in panel changes. To get the changing data, just use the code: var changedSettings = this.model.changedAttributes(); The received value is the settings and value which has been changed

3. Define the class displaying for object controller: Object controller is the representative element for Object in Object list of AWEContent. This class must be in AWEContent.Views and extend from AWEContent.Views.ItemController

   +$el: DOM object of controller

   +controllerHtml: Method to define html for controller. Usually, this method returns html string which represent for Object

   +createItemModel: Method creates instance data for Object. This method has data parameter JSON object containing object data. In case data = undefined, data object will be initiated with default values in data class defaults of Object

4. Define class Panel for Object: This class contains elements allowing users configuring Object's data value. This class must be in AWEContent.Views and extended from AWEContent.Views.ItemPanel

   +$el: DOM object of panel

   +className: Panel element's classes. The classes must have ‘awe-obj-panel'

   +panelName: String to define Object panel. Containing value is machine_name in data class of Object

   +editingModel: Instance of class which contains Object data. This Object is model of view instance which is clicked on (edit icon) in page build

   +initPanel: Method to initiate elements in panel. This method must be implemented AWEContent.Views.ItemPanel.prototype.initPanel.call(this); to carry out default initiation for Drupal

   +setPanelElementsValue: Method is called after clicking on Edit icon in Object view in page build and before panel is opened. This method initiates respective values to current Object data

   +buildPanel: This method returns 1 list declaring panel elements which is used to configure Object data

   Lastly, initiating instance controller and panel for Object. This initiation declares Object for AweContent module. To initiate, just see the code below:

   jQuery(document).ready(function{
     AWEContent.Controllers.newObject = AWEContent.Views.NewObjectController();
     AWEContent.Panels.newObject = AWEContent.Views.NewObjectPanel();
   } );
   	

   The name of instance controller and panel is machine_name in class data of Object.

   Controller instance must be in AWEContent.Controllers.

   Panel instance must be in AWEContent.Panels.

How to edit available object in AweContent

Using hook_awecontent_objects_info_alter() to make changes of Object declaration such as: file js, file css, render_callbaack... Regarding file js in admin, the whole file must be changed.

FAQs

Does AweContent works with any Drupal theme?

Where can I find my purchase code?

Your Item Purchase Code contained within the License Certificate which is accessible in your Envato account.

To view your License Certificate: Login to your Envato account and visit Downloads section, then click "Download" button to reveal "License Certificate" link.

How to get updated version of AweContent

1. First, login to CodeCanyon and under your profile click Downloads link.
2. Re-download MD AweContent and extract it.
3. Check Module update step.

Can I update AweContent if I have purchased it in a theme?

In order to receive latest updates of MD AweContent, you need to have separate license which you can buy via CodeCanyon. Otherwise you need to wait for your theme author to update MD AweContent and provide you the newest version.

It is also important to mention that our support system is for those who have purchased MD AweContent directly. If you have purchased it within a theme, you should contact your theme author for support.

After clicking AweContent button I see spinning icon for indefinite time

First: Make sure you are running latest AweContent version and latest Drupal version

Second: This may be caused by 3rd party module. Check which module causes conflict (by using Firebug or Chrome Inspect element to see if there's any javascript error) and contact us if you can not manage the problem yourself

I can not use AweContent on Content type (article/page...)

First, make sure that MD AweContent is enable (Modules)

Second, go to structure > content type and check if MD AweContent is enable for your content type

If you still cannot use AweContent on Content type (article/page...), just report us via our support forum

Can I get white label version of AweContent?

At the moment MegaDrupal and Envato do not offer white label version. In terms of licensing we fully rely on Envato standards and at the moment there are two licenses available:

1. Regular/Single use license
2. Extended license

Can I include AweContent in my end-product?

You can create end-product and include MD AweContent within it, but there are few very important rules according to our licensing you should be sure to follow:

1. You need to purchase extended license for MD AweContent
2. You can not redistribute MD AweContent in any way - users must not have access to MD AweContent source files
3. Your end product must contain your unique part which is bigger than MD AweContent, in other words you can not combine several items into one and state it as your end-product

Please read more about Extended License

Can I include AweContent in my theme?

In short - yes. There are few steps and rules you should be aware of before integration process:

1. First one is that you need to purchase extended license for each theme you want to enhance with MD AweContent.
2. The second that you need to receive approval from us on using MD AweContent in your theme. At the moment we allow including MD AweContent only on those themes which are sold on Envato ThemeForest exclusively. Please study theme integration and licensing at our knowledge base.

What about GPL and Split License?

While part of module coded with PHP goes under GPL license, all Javascript and CSS is not GPL, which in general restricts using MD AweContent under terms of GPL. Please read more about Split License at Envato.

Can I use AweContent on several Drupal sites (Multisite/Developers license)?

MD AweContent does not offer multisite or developers license at the moment. In terms of licensing we fully rely on Envato standards and at the moment there are two licenses available: Regular/Single use license and Extended license.

None of these two allow usage of MD AweContent on several sites independently. In case you want to use MD AweContent on several sites be sure to purchase one Regular license per each site.

Can I include Drupal blocks into node?

Sure. MD AweContent contains all available Drupal block. All you need to do is just drag and drop into your node

Can I add my own object (shortcodes) sets?

Of course. You can add your own object (shortcodes) sets via Import function of MD AweContent. Then your object (shortcodes) will appear in AweContent > Templates > Section

I have a layout that I created with MD AweContent and now I want to "clone" it for use on the other page/post, how can I do that?

Great question! You can create a "Template" and then insert it on any other page. Here's how:

1. Design your layout
2. Click Save Page as Template button at very bottom of the page
3. Enter template name
4. Next, create new node where you want to place that template
5. Click Build page with AweContent and choose template from the "Templates" popup
6. It will be appended to the current page

Where Can I Get Official Support?

If you have any questions which are not covered in this FAQ sections, please post your question on our support forum. There are a few notes:

• Before you ask a question please make sure to scan the menu and read the specific section of your question
• If it's a specific Drupal module question, Google (or any other search engine) is your friend and probably a hundred times faster in replying.
• If it's possible, please provide a link to your (demo) website so our stuff are able to quickly scan for possible issues.

Note: Official support is available only for direct clients. If you have received any of our products within a theme you should ask your theme author for assistance.

Report a bug

If you found a bug, please send us an e-mail with a (small) description of the issue. Your help is always appreciated.