MD Boom - Responsive Onepage Drupal Theme
Version 2.11Thank you very much for purchasing our theme. This document will guide you through the setup process of this theme. If you have questions about anything about this theme that isn't covered in this documentation, please post your question here.
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 Boom 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.
boom_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 Boom 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
-
Drupal module uploader
- Log into your website
- From admin toolbar, click Appearance
- Click
Install new theme
- Browse to the theme's zip file (it is located in the folder you've downloaded from ThemeForest) and choose that file.
- Click
Install
and wait while theme is uploaded to your server - After successfully message, you can click
Enable and set default
MD Boom - After that, you need to click
Theme settings
andSave configuration
for define some basic settings.
-
FTP
- 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_apage"
- Open your FTP program and FTP into your site and navigate to the sites/all/themes/ directory
- Upload md_Boom to this directory
- Back to your drupal admin toolbar, click Appearance
- Find MD Boom and click
Enable and set default
- After that, you need to click
Theme settings
andSave configuration
for define some basic settings.
Install modules
After installing MD Boom theme, you can extract modules.zip (find in zip package) to siets/all/modules/ directory. Then go to Modules
to install Boom features module.
List modules used in Boom:
- Ctools
- Entity API
- Eva: Entity Views Attachment
- Field Collection
- File Entity
- Fontello
- Icon API (use dev version)
- Jquery Update (use 7.x-2.x-dev)
- Media
- Media Vimeo
- Media Youtube
- Media SoundCloud
- Token
- Webform
- Views
- MD Boom One-page Module (find in zip package): This module help you create twitter blocks and some features
- MD Fullscreen Slider Module (find in zip package): This module help you create fullscreen sliders blocks
Configure modules and sites settings
After active modules, you need to config:
Remove "Search form", "System help", "User login", "Navigation" and "Powered by Drupal" blocks. We don't have template to use these blocks.
Main Menu
Go to "Structure->Menus->List links->Edit".
Choose "Jquery Scrollto Path" and “Icon” for each menu.
Jquery Update
Visit "admin/config/development/jquery_update".
Choose 1.7 for jQuery version.
Go to "Structure->Block". Drag Twitter Block into parallax region you want to show. Press "Configure".
Visit Twitter Apps and log in with your twitter account. Find and press "Create a new application" -> Fill all their required fields -> Finish.
In "Twitter Account Settings" , Copy and paste to fill all field to make block twitter running.
Icons
We support only for Fontello icon in http://fontello.com
Go to "Configuration -> Icons -> Import Tabs -> Select "Fontello" provider and "Choose archive file""
Select "fontello-icon.zip" in our theme package -> Import -> Save bundles.
User Description
Go to "People". Choose user you want to edit description or social account
Click "Edit".
Insert content
After install and configure, nothing show in front page. 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: boom-7.x-2.8.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 Boom's files, as the upgrade will overwrite all files. All custom in theme settings will all remain intact.
Backing Up
- It is always a good idea to back up your theme before making any changes
- Open your FTP program and FTP into your site and navigate to the
sites/all/themes/
directory. - Download the md_boom folder and save it as a backup
Upgrading
- Download the new version of the theme from ThemeForest
- 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_boom"
- 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")
- Switch to your FTP program, FTP into your site and navigate to the
sites/all/theme/
directory. - Transfer the new md_boom folder into the sites/all/theme/ directory on your server, overwrite the existing one.
- 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.
Theme Settings
In this section we will explain the custom settings that come with the Boom theme, where to find them and what you would use them for.
Boom's custom theme settings can be found at Appearance > Settings (near MD Boom theme).
General settings
General settings usually with a global or site wide effect. This tab is open by default when this page is loaded.
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
Here you can add your favourite font of google fonts or typekit fonts into font library
Design
Skins
Change skin and appearance of your site. Just click to skin color and press Save configuration
button
Text/typography settings
Change style most of site text display
Display settings
Contact: Change detail in Contact:Block
Map: Custom your map latitude and longtitude
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
Site Menu
The Boom theme contains 1 menu locations, the Main Menu. This menu does not support any sub levels of menu items. In this section we will outline the steps involved in creating the menu for this theme.
Creating menu
- Go to
Structure > Menus
in the toolbar and clickList link
near Main menu. - At first you will probably need to add a menu, click
Add link
& give it a name, link, where to scroll and save it. - Now you can drag the newly inserted menu item to their correct sequence.
- After you have added and edited the menu items click
Save Configuration
in the bottom of this area.
Assign menu to theme
Finally you will need to specify the location for this menu. As mentioned above, the Boom theme contains 1 possible menu location; the Main Menu.
To assign the Main Menu
- Go to
Structure > Blocks
in the toolbar. - Here there will be a block named Main Menu
- Drag it to Navigation region then click
Save blocks
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 to 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
- Our full-screen slider's default setting is 100% in height and in width. However, it's easy for you to configure your own slide as you wish.
For instance, if you want your slide to display in a certain ratio/percentage to your browser's size such as 80% of full height, just fill80%
into Slide Height instead of 100%. Or-80
, it means your slide lacks 80 pixel to be full in height (in case you need space for Navigation bar, for example).
The setting for slide width is similar to slide 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
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.
Tools panel
The Tools panel helps you add new objects, edit object align, background, animation...
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:
- Select an object
- Press & hold left mouse button and move your pointer.
- 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, center, 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.
- Select 2 or more objects
- Enter number into space value (leave blank if you want space evenly)
- 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.
Custom Homepage
This is where you can change block title/subtitles/description
- About us: Edit About us {your_drupal_site}/admin/structure/manage/views/about_us-block/configure
- Our Service: Edit Your Services {your_drupal_site}/admin/structure/block/manage/views/services-block/configure
- What we do: Edit Your Project block {your_drupal_site}/admin/structure/block/manage/views/portfolio-block/configure
- Our Team: Edit Your Team Your Team block{your_drupal_site}/admin/structure/block/manage/views/team-block/configure
- Your feedback: Edit Your Feedback {your_drupal_site}/admin/structure/block/manage/views/feedback-block/configure
- Our pricing: Edit Pricing Table {your_drupal_site}/admin/structure/block/manage/views/pricing-block/configure
- Our blog: Edit Your blog{your_drupal_site}/admin/structure/block/manage/views/blog-block/configure
- Contact us: Edit Contact{your_drupal_site}/admin/structure/block/manage/views/contact-block/configure
Note: If you want any blocks which have no title or subtitle, just leave the Title box blank or fill "<none>" in the Block title
Adding Content
The Boom theme contains 8 different content types:
About us | Show your team's outstanding characteristics or featured achievement | |
Blog | Create new blogs which are displayed in reverse chronological order | |
Overview | Show you or your company quick info | |
Portfolio | Showcase your featured works | |
Services | Add team's or company's featured services | |
Webform | Create a new form or questionnaire accessible to users. Submission results and statistics are recorded and accessible to privileged users. |
To add content, just click Content
from admin toolbar and Click Add Content
or you can click Add content
from shortcut toolbar.
Adding About us
About is information display on top of your page
Adding Blog
Adding Overview
Adding Services
Services is not different with other content type, just click Add content > Services and add your services.
Adding Portfolio
You can add some featured works of your team/company
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 Boom theme come with 20 block regions.
Assigning block
Blocks are placed in regions via the Block Admin page Dashboard > Structure > Blocks
. Here you can
- Enable, throttle, place, and configure blocks
- Add a block
Creating new block region
You can follow this article to create new block region. This is short introduction:
- Open md_Boom/md_Boom.info file (with a text editor)
- Find
regions[footer] = Footer
- Insert code after:
regions[region_name] = Region human readable name
- Save md_boom.info file and go to Configuration > Performance to clear site cache
Placing your block region into the theme
- Open md_boom/template/page.tpl.php file (with a text editor)
- 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>>
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 apreciated.
Credits
Fonts
- http://fonts.googleapis.com/css?family=Raleway:400,700
Modules
- ctools
- entity
- eva
- field collection
- file entity
- fontello
- icon
- jquery update
- media
- media_vimeo
- media_youtube
- media_soundcloud
- token
- views
- webform
- webform_layout
- MD Fullscreen Slider
- MD Boom Module
Others
- jQueryhttp://www.jquery.com/
- jQuery modernizrhttp://modernizr.com/
- jQuery.mb.YTPlayer https://github.com/pupunzi/jquery.mb.YTPlayer
- jQuery sticky http://stickyjs.com/
- jQuery fitvids http://fitvidsjs.com
- jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/
- Bootstrap 3 http://getbootstrap.com/
- jQuery Parallax http://stephband.info/jparallax/
- jQuery CountTo https://github.com/mhuggins/jquery-countTo
- jQuery Appear https://github.com/bas2k/jquery.appear/
- jQuery easy-pie-hart http://rendro.github.io/easy-pie-chart/
- jQuery cycle.all http://jquery.malsup.com/cycle2/
- jQuery maximage http://www.aaronvanderzwan.com/maximage/
- Isotope jQuery plugin http://isotope.metafizzy.co
- jQuery skrollr http://prinzhorn.github.io/skrollr/
- jQuery Flex Slider http://www.woothemes.com/flexslider/
- jQuery DirectionAwareHoverEffect https://github.com/codrops/DirectionAwareHoverEffect
- jQuery Retina http://retinajs.com/