BMAG - User Documentation

[full_width]

Getting Started

Theme Info

Created: 24/09/2014
Latest Update: 08/4/2015 / v2.0.2
By: Sweetheme Team
Email: Sweethemecontact@gmail.com

BMAG Is a Magazine Responsive Blogger Premium Theme, With many new features and fully Customizble, Powerfull Admin Panel and more...

Features

• Fully Responsive Design
• PowerFull Admin Panel
• Theme Option : Translator / Boxed Style Switcher / Image Scroll Animation
• Unlimited Colors & Fonts
• Fully customizable Design
• Search Engine Optimized (SEO)
• Post Layout Style : Full Width / Sidebar Right / Sidebar Left with shortcodes
• 9 Home Layout Boxs Style with shortcodes
• Support Forum
• Support Facebook Open Graph & Twitter Cards
• Adsense Ready
• jQuery and CSS3 Effects
• Social Counter
• Multi Level Dropdown Menu
• Drop-down menu optimized for mobile devices.
• Cross Browser Compatible
• Font Awesome Icons Integration
• Support RTL Languages
• LTR / RTL Switcher From OneClick
• Carousel Slider : Main / Box / Related
• Full Images Quality
• Support 3rd-party images and youtube thumbs
• Random Posts / Recent Posts / Recent Comments
• Contact US Form
• Tabs Widget
• Custom Widgets
• Threaded Comments
• Error Page
• Shortcodes
• Flickr Widget New !!
• Add Widgets at Home Layout New !!
• and more..

Installation

When you are ready to install a theme, you must first upload the theme file. The theme file can be uploaded in one way :

• Copy And Paste : Go to your dashboard > Template > Template HTML. By open your template by Notepad and copy the entire text and paste it into Template in your dashboard.

Click on "Edit HTML"

And open .xml file by Notepad and select all "Ctrl+A", and copy entire text and paste it here :

Purchase Code Verify

After Purchase your theme, themeforest give you a Purchase Code something like that : 5s1d6gd3sg164dg1s-987sdg12 you can get yours from BMAG support page Now to active your theme please follow this steps :

1. Copy your Purchase Code.
2. Go to sweetheme vertify purchasing page to get your code to activate your theme.

1. Add your username on envato marketplace.
2. Paste your purchase code.
3. Copy and past your blog domain like www.example.com or example.blogspot.com but your should be delete HTTP / HTTPS.
4. Click on Generate Code to get something like that :


5. And Copy the final code and go to your Dashboard > Page Layout > Theme Option Area.

1. In Purchase Code Widget click On Edit.
2. Paste your final code.
3. Finaly click on save and well done!! Congratulations.

---

Customizing Theme

To these phase we will customize the template and install some widgets and add some Html.

Header Options

Logo Settings :

In your dashboard Select "Layout".

Upload Your Logo Header : In You Blog (Header), Click on "Edit" and applicate all settings below :

Social Media Icons :

First Go to Dashboard > Layout > Edit Social Media Icons > Configure Link List

On "New Site Name" field add your social name : facebook, twitter, rss, dribbble,gplus, pinterest, linkedin, youtube.

And on "New Site URL" field add your social url adress.

Settings Your Blog Posts :

In Blog Posts, Click on "Edit" and applicate all settings below :

Menu Setup

First Go to Dashboard > Layout > Edit Main Menu > Configure Link List

On "New Site Name" field add your menu title and the subtitle like as this :

Menu Title [Subtitle]

And on "New Site URL" field add your url adress.

Exemple :

Lastest News [Blog Layout]

Now for add a Submenu Children simply on "New Site Name" field add this

_Submenu

Home Layout

Please Note: in Home Layout areas don't add any widget only HTML one, and don't leave widget empty just follow this

Home Layout Boxs Type : slider, fbig1 , fbig2 , list , column1 , column2 , carousel , videos , gallery

To add Home Layout Boxs simply follow this method by change Boxs Type and your Label and your Color you want.

[Your Label Here][Box Type][Your Color]

Exemple :

[Technology][slider][#fc0000]

Widgets

Random Posts

randomposts

Recent Posts

recentposts

Recent Comments

recentcomments

Top Menu

Add New Gadget > Link List > add you custom link to visible your own TopMenu.

Categorys :

Add New Gadget > Labels > select List Option, and you can select custom labels you want to show as categorys.

Tags :

Add New Gadget > Labels > select Cloud Option, and you can select custom labels you want to show as Tags.

Popular Posts

Recommend options :

Add New Gadget > Popular Posts > select Summary, Thumbnails and Number of Posts only 4.

Social Counter

Go to Layout > Social Counter Area > Click on Edit > and follow this steps below :

On "New Site Name" fild1 field add Social Name [Social Counter].

And on "New Site URL" fild2 field add your Social Url.

Exemple : Only this Socials Supported !

  facebook [2.1k]
  twitter [1k]
  gplus [250]
  rss [860]
  youtube [4.5k]
  dribbble [10.2m]
  instagram [502]
  pinterest [120]

Facebook Graph

Add New Gadget > HTML/JavaScript widget > and Coy/Paste this code below :

  fbbox/Your Page Facebook Url
  /*---------Exemple---------*/
  fbbox/https://www.facebook.com/sweetheme   

Flickr Widget

Add New Gadget > HTML/JavaScript widget > and Coy/Paste this code below and change your username code like 21692577@N02

 <div class="flickr_widget">
 <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=21692577@N02">
 </script>
 </div>

Theme Options

Post Layouts

You have 3 post layouts simply add code of post layout in post panel composeor HTML.

  /*----Full Width Post-----*/ 
  [full_width]
  /*----Sidebar Left Post-----*/ 
  [sidebar_left]
  /*----Sidebar Right Post-----*/  
  [sidebar_right]
 

Boxed Style

Default Style is Boxed "yes" if you want to switch to Full Width Style simply replace "yes" to "no".

Image Animation Scroll

Default is active "yes" if you want to desactive this Image Animation simply replace "yes" to "no".

PageNav Posts Number v1.2+

This for number of posts per page for pagination number Default is "20" just add your number in widget content.

Home PageNav v1.2+

Default is "no" if you want to show PageNav in home page simply add "yes" or to remove it add "no".

Recent Comments No. V2.0.0+

Type your number for recent comments widget, Default is "5"

Random Posts No. V2.0.0+

Type your number for random posts widget, Default is "5"

Recent Posts No. V2.0.0+

Type your number for recent posts widget, Default is "5"

Fbig1 Posts No. V2.0.0+

Type your number for Fbig1 posts widget, Default is "5"

Fbig2 Posts No. V2.0.0+

Type your number for Fbig2 posts widget, Default is "5"

Column1 Posts No. V2.0.0+

Type your number for Column1 posts widget, Default is "5"

Column2 Posts No. V2.0.0+

Type your number for Column2 posts widget, Default is "5"

List Posts No. V2.0.0+

Type your number for List posts widget, Default is "6"

Gallery Posts No. V2.0.0+

Type your number for Gallery posts widget, Default is "9"

Videos Posts No. V2.0.0+

Type your number for Videos posts widget, Default is "6"

Carousel Posts No. V2.0.0+

Type your number for Carousel posts widget, Default is "9"

Slider Posts No. V2.0.0+

Type your number for Slider posts widget, Default is "8"

Related Posts No. V2.0.0+

Type your number for Related posts widget, Default is "9"

Ticker Posts No. V2.0.0+

Type your number for Ticker posts widget, Default is "10"

Slider Speed V2.0.0+

Type your number to set slider speed in ms, Default is "5000"

No Image URL V2.0.0+

Type your image url to set image for posts which have no image, Default is "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuWs-upKBMLgTlq1U3OPXzBx5E8eePvyBicQ9C8hwyhrEFJ2Y5S_AbSNPu-GRz98Kvk6nu5tOo3oies6KOWl9BMk5NUwASOhAVJGrYIsWJr5ZjJGW0id_JxnWZXfkYK49ge45AfI4B1Kc/s1600/90.jpg"

Months Format Text V2.0.0+

Type your this [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"] then change months with your months format

Sticky Header V2.0.0+

Default is "no" if you want to activate fixed header on scroll simply add "yes" or to deactivate it add "no".

Sticky Header V2.0.0+

Default is "no" if you want to activate fixed header on scroll simply add "yes" or to deactivate it add "no".

Home Recent Posts V2.0.0+

Default is "no" if you want to show Recent Posts in home page simply add "yes"or to remove it add "no".

Author box V2.0.0+

Default is "yes" if you want to show Author box simply add "yes" or to remove it add "no".

Multiple Authors Bio V2.0.0+

1. here write author name as it appear in settings admins section
2. write the author short bio
3. [39][https://twitter.com/MTHOrganization][http://www.facebook.com/MTHOrganization]                             [https://plus.google.com/#]                                         [http://www.youtube.com/#]                                                             [http://dribbble.com/#]                                                                       [http://www.linkedin.com/#]
4. add this and edit it with your links, number 39 for Number of Entries
5. add an image from your pc
6. or add image from url
7. Save it

Intro Posts

Simply Go to your Dashboard > Layout > Intro Posts Area > Add HTML/JavaScript widget > type recent or random or Label Name.

News Ticker

Simply Go to your Dashboard > Layout > News Ticker Area > Add HTML/JavaScript widget > type recent or random or Label Name.

Responsive Settings

To active theme to be Responsive simply go to Dashboard > Template > Mobile > and chose No. Show desktop template on mobile devices.

Adsense Ready [Ad Inside Post]

In this Template you will be able to add ads inside articles easily top or the middle or the bottom of the article as you like only follow the steps below :

Go to your dashboard, and click on layout

Click edit in Ad Inside Post widget and add your ad code inside the box content

Now just inside your post between text add [post_ad]

Comments system v1.2+

In you template layout open COMMENTS SYSTEM widget and inside it add your comments systems you need in this way

[blogger] for blogger comments

[facebook] for facebook comments

[disqus] for disqus comments

you can add one system, two or three as you like and with arrangement you want for example

[facebook]

[disqus]

[facebook][disqusss]

[blogger][facebook]

[facebook][blogger]

[disqus][facebook][blogger]

[blogger][disqus][facebook]

Disqus Shortname v1.2+

open widget name "DISQUS SHORTNAME" inside it add your disqus shortname you can find it in your disqus account

Translation

Theme Support RTL/LTR so simply you can change Direction by change your Language from your Dashboard > Setting > Language and formatting > Language, and you well done.

Now if your language is not English, And you want to change the language to language , Only through the translator feature can be change simply through this tool

How it's Work : Go to Layout > Theme Option > in Translator tool click on edit.

On "New Site Name" field 1 field add the default language

And on "New Site URL" field 2 field add your language.

Exemple :

  /*------ English To Arabic ------*/
  field 1 : Popular Posts
  field 2 : المقالات الشائعة

  /*------ English To French ------*/
  field 1 : Popular Posts
  field 2 : Articles populaires

  /*------ English To Allemand ------*/
  field 1 : Popular Posts
  field 2 : Beliebte Beiträge
  
  /*------ English To Espagnol ------*/
  field 1 : Popular Posts
  field 2 : Puestos Popular

ShortCodes

Drop Caps

  
  <span class="firstcharacter">Your First Character here</span>
  

Blockquote

To create a Blockquote simply select all text you want to be a Quote and click on Quote icon from blog post text editor panel.

Bullet and List

To create a Bullet simply select all text you want to be a Bullet and click on Bullet List icon from blog post text editor panel.
To create a Checked List simply select all text you want to be a Checked List and click on Numbred List icon from blog post text editor panel.

Buttons

Add the button you want by size and color.

  /*----Small Buttons-----*/
  <a href='/' class="button small red">Button Text</a>
  <a href='/' class="button small pink">Button Text</a>
  <a href='/' class="button small orange">Button Text</a>
  <a href='/' class="button small yellow">Button Text</a>
  <a href='/' class="button small green">Button Text</a>
  <a href='/' class="button small turquoise">Button Text</a>
  <a href='/' class="button small blue">Button Text</a>
  <a href='/' class="button small purple">Button Text</a>
  <a href='/' class="button small midnight">Button Text</a>
  <a href='/' class="button small grey">Button Text</a>
  <a href='/' class="button small asbestos">Button Text</a>
  <a href='/' class="button small dark">Button Text</a>

  /*----Medium Buttons-----*/
  <a href='/' class="button medium red">Button Text</a>
  <a href='/' class="button medium pink">Button Text</a>
  <a href='/' class="button medium orange">Button Text</a>
  <a href='/' class="button medium yellow">Button Text</a>
  <a href='/' class="button medium green">Button Text</a>
  <a href='/' class="button medium turquoise">Button Text</a>
  <a href='/' class="button medium blue">Button Text</a>
  <a href='/' class="button medium purple">Button Text</a>
  <a href='/' class="button medium midnight">Button Text</a>
  <a href='/' class="button medium grey">Button Text</a>
  <a href='/' class="button medium asbestos">Button Text</a>
  <a href='/' class="button medium dark">Button Text</a>
  
  /*----Large Buttons-----*/
  <a href='/' class="button large red">Button Text</a>
  <a href='/' class="button large pink">Button Text</a>
  <a href='/' class="button large orange">Button Text</a>
  <a href='/' class="button large yellow">Button Text</a>
  <a href='/' class="button large green">Button Text</a>
  <a href='/' class="button large turquoise">Button Text</a>
  <a href='/' class="button large blue">Button Text</a>
  <a href='/' class="button large purple">Button Text</a>
  <a href='/' class="button large midnight">Button Text</a>
  <a href='/' class="button large grey">Button Text</a>
  <a href='/' class="button large asbestos">Button Text</a>
  <a href='/' class="button large dark">Button Text</a>
  

Alert Boxs

  /*----success message----*/
  <div class="alert-message success">
  <i class="fa fa-check-circle"></i>
  success message : You successfully read this important message.
  </div>
  
  /*----Alert message-----*/
  <div class="alert-message alert">
  <i class="fa fa-info-circle"></i>
  Alert message : This alert needs your attention.
  </div>
  
  /*----Warning message-----*/
  <div class="alert-message warning">
  <i class="fa fa-exclamation-triangle"></i>
  Warning message : Warning! Best check yo self.
  </div>
  
  /*----Error message-----*/
  <div class="alert-message error">
  <i class="fa fa-exclamation-circle"></i>
  Error message : Oh snap! Change a few things up.
  </div>
  

Code Boxs

  
  <pre data-codetype="HTML">You HTML Code Here</pre>

  <pre data-codetype="CSS">You CSS Code Here</pre>

  <pre data-codetype="JavaScript">You JavaScript Code Here</pre>

  <pre data-codetype="JQuery">You JQuery Code Here</pre>
  

Contact Form

  
  <div class="contact-form"></div>
 

Two Columuns

  
  <div class="two-column">
    <div class="column">
 Your Text Here
    <div class="column">
 Your Text Here
  </div>
 

Tabs Horizontal

  
  <div class='post-tabs'>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
  </div>
  

Tabs Vertical

  
  <div class='post-tabs side'>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
  </div>
  

Sitemap Page

to create sitemap page crate new static page and in its content just write this [sitemap] no more.

 

Full Installation

• Tutorial 1 : Installation Theme and Demo Content
• Tutorial 2 : Main Theme Options
• Tutorial 3 : RTL Support and how to use Translator
• Tutorial 4 : Fully Customize Your theme