MD Cortana 's Document

MD Cortana   Drupal theme document


Cortana_Construction Drupal Theme

Version 1.0

Thank you very much for purchasing our theme. In this user guide, you will find all required information to get your site up and running: starting from theme installation and setup, to usage of different post types, page templates and shortcodes. If all else fails or you have any questions about our theme that isn't covered in this documentation, please do not hesitate to submit a support request via our support forum.

We hope you will enjoy working with our themes.

Yours sincerely,

Megadrupal Themes.

Before Getting started

Cortana theme comes with two versions: default version and shop version to match user demands.

Please note that this theme is not harder to use than any other premium theme with advanced functions. Moreover, we believe that it’s even much easier! And there’s a good reason for that: amount of time that we invested in designing its interfaces, page templates and theme options is simply immense…

Nevertheless, please note that this User Guide does NOT cover basic Drupal usage. Therefore if you are not a confident Drupal user, please get accustomed with it BEFORE proceeding to this manual and theme!

First of all please google “Drupal basics” – plethora of articles and educational videos are available!

Here are some links that will help you to become more confident with Drupal:

Getting started

You can insert your development link (start with http://) below to make some link in this document clickable and go straight to your site

  1. Requirement
  2. Download package contents
  3. Install using demo profile
  4. Manual install
  5. Theme installation errors
  6. Theme update

Requirement

Let's go over the minimum requirements that you will need in order to have a fully functioning site running our theme.

  • Drupal 7
  • The theme files that you downloaded from themeforest.net
  • Web server: Apache, Nginx, or Microsoft IIS
  • PHP 5.2.5 or higher (5.3 recommended)
  • MySQL 5.0.15 or higher with PDO, PostgreSQL 8.3 or higher with PDO, SQLite 3.3.7 or higher

If you already have a working install of Drupal feel free to skip ahead to theme installation.

Download package contents

Once you have downloaded and unzipped the Cortana 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.

cortana_install_profile.zip This is a zip archive of the install profile. This is used for auto install using profile
Manual install This folder included assets used for manual install
Documentation This is the help documentation. To view simply open index.html found inside this folder

Install using demo profile

Once you have downloaded the cortana package from Themeforest.net, there are 2 ways of installing this theme. First way is easy way: using demo install profile. This way is like install standard Drupal. This video below show you how to do this.

You've done, now go to theme settings to custom your website and enjoy it.

Manual install

For manual install, you need install theme & require modules.

Install theme

You can install by using Drupal module uploader or using FTP

  1. Drupal module uploader

    1. Log into your website
    2. From admin toolbar, click Appearance
    3. Click Install new theme
    4. Browse to the theme's zip file (it is located in the folder you've downloaded from ThemeForest) and choose that file.
    5. Click Install and wait while theme is uploaded to your server
    6. After successfully message, you can click Enable and set default MD Cortana
    7. After that, you need to click Theme settings and Save configuration for define some basic settings.
  • FTP

    1. Browse to the theme's zip file (it is located in the folder you've downloaded from ThemeForest) and extract that file, you will get folder named "md_cortana"
    2. Open your FTP program and FTP into your site and navigate to the sites/all/themes/ directory
    3. Upload md_cortana to this directory
    4. Back to your drupal admin toolbar, click Appearance
    5. Find MD Cortana and click Enable and set default
    6. After that, you need to click Theme settings and Save configuration for define some basic settings.
  • Install modules

    After installing MD Cortana Theme, you can extract modules.zip (find in zip package) to sites/all/modules/ directory. Then go to Modules to install cortana features module.

    List modules used in Cortana:

    Contrib modules:

    Custom modules:

    • md_ac_cortana
    • md_awecontent
    • md_block_custom
    • md_field
    • md_fullscreen_slider
    • md_portfolio
    • md_themesetting
    • md_view_style

    Feature modules:

    • bean_file
    • md_blog
    • md_portfolio_content
    • md_product

    Insert content

    After install and configure, nothing show in front page (and other pages). Please add some content and see your site working.

    Theme installation errors

    Do not upload the Themeforest download package directly to your Drupal site, because this will lead to errors. Make sure to unzip this package and inside you will find the theme zip archive: md_cortana-7.x-2.0.zip. This is what you will need to upload to your Drupal site

    Theme update

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

    Installing updates is just involves replacing the old theme 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 Cortana's files, as the upgrade will overwrite all files. All custom in theme settings will all remain intact.

    Backing Up

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

    Upgrading

    1. Download the new version of the theme from ThemeForest
    2. Browse to the theme's zip file (it is located in the folder you've downloaded from ThemeForest) and extract that file, you will get folder named "md_cortana"
    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/theme/ directory.
    5. Transfer the new md_cortana folder into the sites/all/theme/ directory on your server, overwrite the existing one.
    6. Clear site cache (Go to Configuration then Performance and click "Clear all caches" button)

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

    Site Menu

    In this section, we will outline the steps involved in creating the menu for this theme.

    Creating menu

    1. Go to Structure/Menu in the toolbar and click List link near Main menu.
    2. At first you will probably need to add a menu, click Add link & give it a name, link, where to scroll and save it.
    3. Now you can drag the newly inserted menu item to their correct sequence.
    4. After you have added and edited the menu items click Save Configuration in the bottom of this area.

    Adding Content

    The cortana theme contains 6 different content types:

    Blog Create new blogs which are displayed in reverse chronological order
    MD Portfolio Show off your featured works
    Service Adding your awesome services here
    Shop Products Showcase your amazing products
    Simplenews A newsletter issue to be sent to subscribed email addresses.
    Webform Adding your webform here

    To add content, just click Content from admin toolbar and Click Add Content or you can click Add Content from shortcut toolbar.

    Adding Blog

    Just click Add content > Blog and add your article.

    Open detail page:

    Adding MD Portfolio

    Open Detail:

    Adding Service

    Just need to go to Add content > Service to add new service.

    Adding Shop Product

    Shop Product is only available in Cortana shop version.

    To create a product, you have to follow these following steps:

    1. Go to Store > Products > product types -> Add product type
    2. Added some fields that are required such as SKU, Price, Attribute(color, size..). These fields cannot be created in content type. They must be created in Product Type for calculating when checking out or Add to cart submitting.

    3. After finishing creating product type, click on Structure -> Content type and create new Shop Product type
    4. Remember to create a field that has type Product Reference to get values/data from product type

    5. Just create more needed fields like you create a normal content type

    Then adding product in Add Content > Shop Product:

    For more reference, you can see these instruction links:

  •  https://drupalcommerce.org/user-guide/product-displays
  •  https://drupalwatchdog.com/volume-1/issue-1/building-drupal-commerce-product-display
  •  https://www.youtube.com/watch?v=7cyHNfrfLMU
  • Adding Simplenews

    Simplenews publishes and sends newsletters to lists of subscribers. Both anonymous and authenticated users can opt-in to different mailing lists

    Adding Webform

    Just go to Add Content > Webform, After giving the form a name, please add webform elements:

    Final View:

    Customize

    This section will guide you how to customize your Cortana site

    Homepage

    Most of pages are built by MD AWEContent module. For example Home page: to customise home page, please click on Edit: (admin mode)

    Then Click on Build page with AWEContent

    Then you can edit/customize every section content and image. For more detail and instruction, please see AWEContent Documentation which is also packed in the package

    However, there still are some static blocks that you can't edit with AweContent. Just use contextual link to change it.

    Block Region

    If you used demo install profile, then this setup will be already done. In which case you may only need to modify things. However we still recommend that you read this section carefully because it contains important information which will be useful during modification of the block configuration.

    The Cortana theme come with 15 block regions.

    Assigning block

    Blocks are placed in regions via the Block Admin page Dashboard > Structure > Blocks. Here you can

    1. Enable, throttle, place, and configure blocks
    2. Add a block

    Creating new block region

    You can follow this article to create new block region. This is short introduction:

    1. Open md_cortana/md_cortana.info file (with a text editor)
    2. Find regions[footer] = Footer
    3. Insert code after: regions[region_name] = Region human readable name
    4. Save md_cortana.info file and go to Configuration > Performance to clear site cache

    Placing your block region into the theme

    1. Open md_cortana/template/page.tpl.php file (with a text editor)
    2. Paste this code to wherever you want to display block region:
                          <?php if ($page['region_name']): ?>
                            <div class="region-class">
                              <?php print render($page['region_name']); ?>
                            </div>>
                          <?php endif; ?>
                          

    Theme Settings

    In this section we will explain the custom settings that come with the Cortana theme, where to find them and what you would use them for.

    Cortana's custom theme settings can be found at Appearance > Settings (near MD Cortana theme).

    1. General settings
    2. Design
    3. Pages
    4. Text/Typography
    5. Custom code
    6. Backup & restore

    General settings

    General settings usually with a global or site wide effect. This tab is open by default when this page is loaded.

    Site Settings

    Enable or disable some elements like logo, slogan, menu ...

    Logo, Favicon & Webclip

    Customise or change webclip, logo and favicon icons (A webclip is the icon that appears on a user's iPhone, iPad or Android device if they save your website to their home screen.)

    Custom Font

    Add your favourite Google text font to the font library here

    Design

    Preloader

    You can enable preloader for the site here:

    There are 7 types of Header.You can enable search form and cart for header also:

    Footer setting

    Choose number of column for your footer, set logo for block "About":

    Blog

    Set blog single type here with 3 types:

    404

    Customize 404 page:

    403

    Customize 403 page:

    Pages

    You can customize title, header image, url of page content type:

    And change settings of pages here:

    Text/Typography

    Custom text and typography in all pages.

    Custom code

    Add custom CSS/JS code into your website

    Insert custom code to Header, Footer region or Custom CSS Code here if you want to add additional and customize your site.

    Backup & restore

    Make and upload theme's backup file

    We support you to backup all your file by clicking Backup All Settings and also restore it when you need

    MD Fullscreen slider

    Fullscreen Slider is the best way for maximizing visibility of your works and showcasing it in a creative way. It allows you to insert images, add texts and embed video or link into the same slider.

    Managing sliders

    After installation, you can go to Structure » MD Fullscreen Slider to see Fullscreen Slider overview page.

    Here you can manage all your sliders, edit, clone or delete a slider.

    Creating a new slider

    To create a new slider, click Create new FullScreen Slider to start creating new slider.

    Edit slider

    One slider is split in two parts: Config and Main slide items. You can click on Configure to change slider config and click Edit to change slider items.

    Cloning an existing slider

    Cloning an existing slider is easy, just click Clone link from slider overview page.

    Delete a slider

    To delete a slider, you need to click Configure and scroll to bottom. Here you will find delete button, just click to delete your slider.

    Basic config

    At the first screen, you will see several parameters that you can change to customise your slider.

    • Slider title This title is just for the administrator to identify the slideshow.
    • Description If title field is not long enough, you can type description of your slider here
    • Slide width Insert your slider width
    • Slide height Insert your slider height
    • Automatically start Slide will automatically play when the site is opened.
    • Pause on hoverStop at the current slide, not move to the next one when you move the mouse cursor into the slide
    • Enable touch swipe for touch device Swipe to move to the next slide image on touch device
    • Keyboard navigation Using arrow keys for navigating slides
    • Loop Check if you want slider start over when reaching last item
    • Show loading bar Enable/disable your slider loading bar
    • Slide's transition time Configure speed of the transition (in milliseconds)
    • Show next/prev button Show the button for moving to next or previous slide
    • Next/Prev button on hover (appear when Show next/prev button is checked) Next/prev button is showed when user move mouse enter into slider
    • Navigation button Show the buttons for slide navigation
    • Navigation position (appear when Navigation button is checked) set navigation button position
    • Navigation buttons on hover (appear when Navigation button is checked) navigation button is showed when user move mouse enter into slider
    • Thumbnail navigation Show the thumbnails for slide navigation
    • Thumbnail width (appear when Thumbnail navigation is checked) change thumbnail width
    • Thumbnail height (appear when Thumbnail navigation is checked) change thumbnail height
    • Thumbnail position (appear when Thumbnail navigation is checked) set thumbnail position
    • Background Color Set background color for your slider. This appear on some specific slide transition
    • Custom CSS Insert your custom CSS for fullscreen slider
    • Events Callback Insert custom JS callback
    • Google font Add google font to use on your slider.
    • Typekit Add typekit font to use on your slider.
    • Do not include font If you've already add google or typekit fonts to your theme, check Do not include font.
    • Generate css file generating css file for faster. Please do this after finish editing slider

    Click Create button, you will go to edit step.

    Edit & Custom your slide items

    After click Create button, you will go to edit page

    Edit page

    This page split in 3 parts: slide items panel, Tools panel and Timeline panel

    Slide items panel

    Each tab in the slide item panel is representative of each slide item. You can Add new {1}, change slide image and transitions {4}, clone {5}, re-order {2} or remove {3} slide item. Just click and drag your mouse.

    Working with slide items

    Tools panel

    The Tools panel helps you add new objects, edit object align, background, animation...

    Tool panel

    When you select an object, the Tools panel will show you options. Some tool options are only displayed if you choose a particular type of selected object.

    Timeline panel

    The Timeline panel organizes and controls a slide's content over time in layers. Layers are stacked on top of one another, each one contains a specificed text, image or video.

    Slides can have different delay time options, you can drag delay line {6} to change this value.

    Controls in the layers section of the Timeline make it possible to hide, show {1}, clone {3}, delete {4} or re-order {8} layers. You can drag to adjust layer start {9}, stop {10} time or position {11}.

    Working with objects

    Add new object

    You can add new object to slide item by clicking to text/image/video icon at tools panel. In term of image object, you can upload image from your computer or choose existing image from server. Video object supports Youtube & Vimeo, all you need to do is provide Youtube or Vimeo video link.

    Selecting an object

    Before you can do anything with any object, you must select it. You can select object with mouse click or using layer in timeline panel. You can also select multi objects by holding ctrl button and click on objects.

    Selection information in the tools panel

    Whenever you select an object, the tools panel will show information & properties of the object. You can customize objects by changing value from tools panel.

    Moving an object

    This is a very simple step, and you can move object to exactly place that you want:

    1. Select an object
    2. Press & hold left mouse button and move your pointer.
    3. Or you can change in tools panel: enter the X and Y coordinates for the location of the top left corner of the selection.

    Aligning objects

    Align & Space box will appear when you select more than one object (hold shift and left click on object). The Align commands in the tools panel give you a wide range of arrangement options, allowing you to do any of the following:

    • Align selected objects along a horizontal or vertical axis.
    • Align selected objects vertically along their right edge, center, or left edge, or horizontally along their top edge, centre, or bottom edge.

    Changing objects space

    The Space commands in the tools panel help you control space between objects. You can change horizontal or vertical space.

    1. Select 2 or more objects
    2. Enter number into space value (leave blank if you want space evenly)
    3. Press space button

    Style an object

    You can style an object depending on object type, just select and change value in tool panel

    Enable slider

    After creating slider, your slider will be available as a block, you need to assign it to some region. From admin toolbar, click Structure » Block, find "MD Slider: (your slider name)" and drag it to your desire region.

    General information

    Need help?

    If you need help with setting up the template, please post your question here. 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.

    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.

    Credits

    Fonts

    Modules

    Contrib modules:

    Custom modules:

    • md_ac_cortana
    • md_awecontent
    • md_block_custom
    • md_field
    • md_fullscreen_slider
    • md_portfolio
    • md_themesetting
    • md_view_style

    Feature modules:

    • bean_file
    • md_blog
    • md_portfolio_content
    • md_product


    Have More Idea?

    We are here to build your website!

    No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.