How to install Mobbern theme on your phpBB3 forum

The Mobbern Theme is available for two versions of phpBB3. That is phpBB3.0 and new phpBB3.1.

After purchasing the theme, you can download the .zip archive. Inside the archive you will find the following directories:

- Mobbern          -  This is the Mobbern Theme for phpBB3.0
- Mobbern3.1       -  The Mobbern Theme for the phpBB3.1
- mobbernTCP3.1    -  Mobbern Theme Control Panel Extension for phpBB3.1
- mobbern-theme-cp -  Mobbern Theme Control Panel MOD for phpBB3.0
- Documentation    -  Offline Documentation for both versions

Installation Guides

To install the theme follow the proper step-by-step instructions for your phpBB3 version: Install Mobbern Style for phpBB3.0 Install Mobbern3.1 Style for phpBB3.1

After the style installation you should install the Theme Control Panel. 
Follow the section for your phpBB3 version: Install Theme Control Panel MOD (for phpBB3.0) Install Theme Control Panel Extension (for phpBB3.1) Back

phpBB3.0 Install Mobbern for phpBB3.0

Follow the 3 steps below  or learn by watching the screencast at the right.  

  1. Upload the theme files.
  2. Install Mobbern style in the Administration Control Panel.
  3. Optional: Set as default style.
  4.  Install Theme Control Panel MOD

1. Upload the Theme files

Copy the “Mobbern” folder from the .zip archive to your phpBB3 “styles” directory. 
Example: yoursite\forum\styles

2. Install Mobbern style

a. Log-In to the “Administration Control Panel” of your phpBB forum.

Accessing the Administration Control Panel in phpBB3.0.

b. Go to the”STYLES” tab and click on the “Install” link at the right of “Mobbern”. 
Mobbern is located in the “Uninstalled styles” table (see the image below). 

The Mobbern Style Installation.

3. Make Mobbern the default style before pressing “Submit“

Set Mobbern as your forum’s default style by clicking “yes” at the right of “Make default style”.

Setting Mobbern as default style during installation.

Installing the Mobbern Theme in phpBB3.0

Optional Set Mobbern as the only style of your forum

To prevent users from browsing your forum using other styles click on the “GENERAL” tab, pick “Board settings” from the left and enable “Override user style“. 

Setting Mobbern as the only style for your forum.

 Back

phpBB3.1 Install Mobbern for phpBB3.1

Follow the 3 steps below  or learn by watching the screencast at the right.  

  1. Upload the theme files.
  2. Install Mobbern3.1 style in the Administration Control Panel.
  3. Set as default style.
  4.  Install Theme Control Panel Extension

1. Upload the Theme files

Copy the “Mobbern3.1” folder from the .zip archive to your phpBB3.1 “styles” directory. 
Example: yoursite\forum\styles

2. Install Mobbern3.1 style

a. Log-In to the “Administration Control Panel” of your phpBB3.1 forum.

Accessing the Administration Control Panel in phpBB3.1.

b. Go to the”CUSTOMISE” tab and then pick “Install Styles” from the left menu.

c. Click on the “Install” link at the right of “Mobbern3.1”.

The Mobbern3.1 Style Installation.

Installing the Mobbern3.1 Theme in phpBB3.1

3. Make Mobbern the default style

  1. In the Administration Control Panel go to the GENERAL tab.
  2. Pick Board Settings from the left menu.
  3. Select Mobbern3.1 as Default Style and Guest Style.
  4. Enable Override user style.
  5. Press Submit.
Setting Mobbern3.1 the default style.

 Back

phpBB3.1 Theme Control Panel Extension

Important! Do not read this section if you are installing Mobbern for phpBB3.0. Please follow the instructions for PhpBB3.0 instead.

A successful installation of the Theme Control Panel Extension for phpBB3.1 is done in the following order:

  1. Copy the folder “masivotech” from the_downloaded_Mobbern_folder\mobbernTCP3.1 
    to your phpBB3.1 “ext” directory. 
    Example: myforum/phpBB3.1/ext/
  2. Now log-in to your Administration Control Panel.
  3. Go to the “CUSTOMISE” tab and pick Manage Extensions from the left menu.
  4. press Enable at the right of the Mobbern3.1 Theme Control Panel extension.

 Back

phpBB3.0 AutoMOD & Theme Control Panel

Important! Do not read this section if you are installing Mobbern for phpBB3.1. Please follow the instructions for PhpBB3.1 instead.

AutoMOD is a tool designed to parse and automatically install MODX MODifications for phpBB3. 

While you can use Mobbern without it, it is strongly recommended to install AutoMOD and the “Mobbern Control Panel” MOD. 
Mobbern requires autoMOD for the Theme Control Panel!

1. Install AutoMOD

To Install AutoMOD:

  1. Download the latest AutoMOD files (from the phpBB3 Official Website)
  2. Extract the newly downloaded ZIP archive.
  3. Inside the content of the ZIP archive is a folder named “root“.
  4. Upload the files from the “root” folder to the phpBB3 forum directory. 
    Example: myforum/phpBB3/
  5. Run The Install Script – Once the files are online, run the install AutoMOD script by accessing (from your browser) the install directory of your forum (Ex: myforum/phpBB3/install/ and proceed as explained:
    1. Pick the “Install” action if you don’t have a previous AutoMOD installation. “Update” in the other case.
    2. Ignore Version Select.
    3. Press Submit and confirm.

2. Theme Control Panel

After a successful installation of AutoMOD proceed to install the Mobbern Theme Control Panel.

  1. Copy the “mobbern-theme-cp” folder from the_downloaded_Mobbern_folder and upload it to your_phpBB3_root_directory\store\mods.
  2. Now log-in to your Administration Control Panel, go to the AUTOMOD tab and press install at the right of Mobbern Theme Control Panel.

Access the Theme Control Panel by pressing the Theme Control Panel button located in the footer of your forum.* 
You need to be logged in as Administrator to see the Theme Control Panel button and to have access to it.

Accessibility

The links for User Control Panel, Moderator Control Panel, Administration Control Panel & Theme Control Panel are listed in the User Menu* located at the right of the navigation bar. 
See the following examples:

*Log-in as administrator to see the User Menu from the image.

Accessing the Control Panels

Update to a newer version of Mobbern

To update to a newer theme version (when available) you have to follow the 3 steps:

  1. Remove old Mobbern installation.
  2. Upload the new theme folder.
  3. Purge the cache from the Administration Control Panel.

1. Remove old Mobbern installation

To Remove the old version you have to delete the folder “Mobbern” from the “styles” directory of your forum.

2. Upload the new theme folder

  • phpBB3.0 Upload the newly downloaded “Mobbern” folder to your phpBB “styles” directory.
  • phpBB3.1 Upload the newly downloaded “Mobbern3.1” folder to your phpBB3.1 “styles” directory.

3. Purge the cache of your forum

  1. Log-In to the “Administration Control Panel” of your phpBB forum.
  2. Make sure you are under the “General” tab.
  3. Find “Purge the cache” and press the “Run now” button at the right. (See Image)

Best Practices

As Mobbern evolves, we meet more customers and we understand more of what they need. 
The information we collect help us to develop it into a more customer-friendly product. We have collected the most useful tips into this section of the Documentation. 

It is higly recommended for you as customer to read the following points before you start to customize your copy of Mobbern. 
This will help you avoid unwanted compatibilty issues when the new updates are released.

1. We Recommend

  • hrome Browser by Google – Provides a fast and intuitive solution for style edits.
  • Chrome Developer Tools – For CSS Edits 
    This powerful set of web authoring tools comes together with Chrome. 
    There’s nothing you need to install, just Chrome. 
    To open the DevTools within Chrome:
    • Press F12.
    • Right click on an element from the current website and go to Inspect Element.
  • Learn the basics of DevTools

2. Use the provided style.css

  • The recommended way to add custom css rules to your forum is through the style.css file.
  • This file will always be empty when you download the Mobbern theme package.
  • Always back up the file style.css before updating the theme.
    • Save your current file on the desktop.
    • Upload the new theme files.
    • Copy your file from the desktop and paste it in the theme directory, overwriting the downloaded style.css.
  • When you receive CSS code from our support staff, always paste it at the and of style.css.

After learning the basics of Chrome DevTools, customize the css rules within the DevTools and copy them at the end of style.css.

3. Purge the Cache

Note phpBB’s template system requires you to purge the cache before your changes (to the template files) take effect.

To Purge the Cache:

  1. Log-In to the “Administration Control Panel” of your phpBB forum.
  2. Make sure you are under the “General” tab.
  3. Find “Purge the cache” (See Image) and press the “Run now” button at the right.

Theme Options

After a successful installation of the Theme Control Panel (Extension for phpBB3.1 or Mod for phpBB3.0) you can begin to customize many features of your forum visually, without having to edit the source code.

In this section you will find two short video screencasts to get you started with the Theme Control Panel, and the full list of customizable options.

Getting Started

Watch the video below  to get started with the Theme Control Panel.

Getting started with the Theme Control Panel in 30 seconds.

Theme Control Panel Basics

Watch the video below  to learn how to set up the theme like the Online Demo.

Customize Mobbern using the Theme Control Panel.

Customizable Options

Below is the list with all customizable options available via the Theme Control Panel:
General Options

  • Scroll Options:
    • Enable/Disable Custom Scrollbar
    • Enable/Disable Smooth Scroll
    • Enable/Disable Body Auto Scrolling Effect on Fixed Navbar Trigger
  • Logo Options:
    • Logo Text
    • Logo Font
    • Logo Icon – Font Awesome Icon
    • Logo Image – Recommended: 256×256 PNG
  • Forum Favicon
  • Edit Social Links:
    • Facebook Page Link
    • Google Plus Page Link
    • Twitter Profile Link
    • Linked In Page Link
    • Pinterest Link
    • WordPress Blog Link
    • Youtube Channel Link
  • Edit Footer Copyright Info

Design Options

  • Color Theme:
    • Color Preset
    • Custom Color Theme
  • Body Background:
    • Background Image URL
    • Background Color
  • Typography:
    • Google Fonts URL
    • Text Font Family
    • Headers Font Family
    • Default Font Size
  • Layout Options:
    • Enable/Disable Full Width Layout
    • Container Width in Pixels(Fixed Width Layout)
    • Show/Hide Sidebar
    • Set Header Preset
    • Set Footer Preset
    • Enable/Disable Borders Sitewide

Menu Options

  • Custom Menus:
    • Custom Menu 1 – Title
    • Custom Menu 1 – URL
    • Custom Menu 1 – Icon
    • Custom Menu 2 – Title
    • Custom Menu 2 – URL
    • Custom Menu 2 – Icon
    • Custom Menu 3 – Title
    • Custom Menu 3 – URL
    • Custom Menu 3 – Icon
  • Show/Hide Icons for Menu Items
  • Show/Hide Menu Icon borders
  • Enable/Disable the Mega Menu

Sidebar Widgets

  • Special/Ad Widget:
    • Show/Hide the widget
    • Set the Title
    • Image URL
    • Set the Link when the user clicks the Image
  • Notification Widget:
    • Show/Hide the widget
    • Set the Message of the Notification
    • Set the Link
  • Collapsible Widget:
    • Show/Hide Widget
    • Set the Title
    • Type the content (text) of the widget.
  • Tabs Widget (Show/Hide)
  • Static Text Widget:
    • Show/Hide the Widget
    • Set the Title
    • Type the content (text) of the widget.

AdSense Ads

  • Show/Hide Ads in the Header
  • Show/Hide Ads in the Footer
  • Show/Hide In-Page Ads

Customize Color Theme

Mobbern comes with 5 predefined color themes:

  • Azure (default)
  • Emerald
  • Slate
  • Tomato
  • Lilac

By default Mobbern uses the “Azure” color theme preset.

However, if you prefer to change the color theme you have two options:

  1. Color Theme Presets
  2. Custom Color Themes

1. Change the Color Theme Preset

To use another color preset open “overall_header.html” from “Mobbern\template\” using your favorite editor, find :

<!-- ELSE -->
  <link href="{T_THEME_PATH}/color-theme-azure.css" rel="stylesheet" type="text/css" class="color-theme" />
<!-- ENDIF -->

Replace the word “azure” with any of the following Color Preset codes:

  • emerald
  • slate
  • tomato
  • lilac

Go to Administration Control Panel > General and Purge the cache.Tip You can change the color theme via the Theme Control Panel, without touching the source code.

2. Use Custom Color Themes

You need to have the Theme Control Panel Installed to use Custom Color Themes

  1. Log-in as Administrator and access the Theme Control Panel
  2. Go to Design > Color Theme and Enable Custom Color Theme.
  3. Pick your favourite color using the color picker and press “Preview Theme” to preview the theme on your current page.
  4. Once you are satisfied with the result press Download CSS File to download your custom color theme.
  5. Save the file as “color-theme.css” and upload it in the “theme directory of the Mobbern style (phpBB3/styles/Mobbern/theme/)” overwriting the old file.
  6. Submit your changes.*

* To return to Color Theme Presets just disable the option.

How to change the Header/Footer Preset?

How to change the Header Preset?

1. By Editing the Source Code

Choose this option when the Theme Control Panel is not available.

To use another header preset, open “overall_header.html” from “Mobbern\template\” using your favourite editor, find:


<!-- ELSE -->
  <!-- INCLUDE m_footer_preset_transnav.html -->
<!-- ENDIF -->

And change the text transnav with any of the 5 available Header Preset codes:

  • “transnav” – For Big Header with Transparent Menu Bar (default)
  • “normal” – For a Normal Header (the most popular header style)
  • “big” – For Big Header with Menu Bar at the bottom
  • “minimal” – For Minimal Navbar
  • “ads” – For Header with (space for) Ads

Go to Administration Control Panel > General and Purge the cache.

2. From the Theme Control Panel

  1. Access the Mobbern Theme Control Panel, go to Design > Layout Options and pick your favorite Header from the 5 available Presets.
  2. Submit your changes.

… or the Footer Preset?

1. By Editing the Source Code

Choose this option when the Theme Control Panel is not available.

To use another footer preset, open “overall_footer.html” from “Mobbern\template\” using your favourite editor, find:

<!-- ELSE -->
  <!-- INCLUDE m_footer_preset_complex.html -->
<!-- ENDIF -->

And change the text complex with any of the 5 available Footer Preset codes:

  • “complex” – For the Default Footer (3-columns) (default)
  • “3columns” – For an alternative 3-columns Footer
  • “minimal” – For Minimal Footer
  • “ads” – For Footer with (space for) Ads
  • “4columns” – For a 4-columns Footer

Go to Administration Control Panel > General and Purge the cache.

2. From the Theme Control Panel

  1. Access the Mobbern Theme Control Panel, go to Design > Layout Options and pick your favorite Footer from the 5 available Presets.
  2. Submit your changes.

Add Menu Links to the Navbar

1. By Editing the Source Code

To add a new item to the Navbar use the following HTML code:

<a href="#" class="">
  <i class="icon fa fa-star"></i>Menu  </a>
</li>
  1. Open m_header_navbar.html template file and find:<!-- START: User Menu Items -->
  2. Paste your modified HTML Code after the comment line.

2. Via the Theme Control Panel

  1. Access the Mobbern Theme Control Panel
  2. Go to Menu > Menu Links and add your custom menu links.
  3. Submit your changes.

Mega Menu

1. Edit the Mega Menu

To edit the Mega Menu :

  1. open the template file “m_header_navbar.html” and find:<li class="dropdown mega-menu">
  2. Then edit the following HTML code till:<!-- /.mega-menu -->

2. Remove the Mega Menu

  • A. To remove the Mega Menu:
    1. Open the template file “m_header_navbar.html” delete everything between (including the two lines):<li class="dropdown mega-menu"> and<!-- /.mega-menu -->
  • B. From the Mobbern Theme Control Panel, go to Menu > Menu Options 
    and disable the Mega Menu

Responsive Ad Blocks

Mobbern is ready to display header, footer or in-page Ads.

You have to provide different ad sizes for your ads because Mobbern implements a responsive approach to display ads.

To display in-page ads you must have the Mobbern Theme Control Panel installed and enable the option from Mobbern Theme Control Panel > Ads > Ads Visibility. 

Space for Ads is available in the header or the footer if you use the right preset. 

The Right Presets are:

  • m_header_preset_ads.html For the header of your forum
  • m_footer_preset_ads.html For the footer

1. Your Ad to the header of the Forum

  1. Make sure you use the preset “m_header_preset_ads.html” as the header of your forum.
  2. Open the “m_ads_code_header.html” template file from “Mobbern\template\” using your favourite editor.
  3. Insert your ad code for all the available sizes.
  4. Go to Administration Control Panel > General and Purge the cache.

2. Your Ad to the footer of the Forum

  1. Make sure you use the preset “m_footer_preset_ads.html” as the footer of your forum.
  2. Open the “m_ads_code_footer.html” template file from “Mobbern\template\” using your favourite editor.
  3. Insert your ad code for all the available sizes.
  4. Go to Administration Control Panel > General and Purge the cache.

3. In-Page Ads

Mobbern will display In-Page Ads at the beginning and the end of your forums.

  1. Make sure you enable “In-Page Ads” from Mobbern Theme Control Panel > Ads > Ads Visibility.
  2. Open the “m_ads_code_inpage_top.html and m_ads_code_inpage_bottom.html” templates file from “Mobbern\template\” using your favourite editor.
  3. Insert your ad code for all the available sizes.
  4. Go to Administration Control Panel > General and Purge the cache.

Header Slider

Mobbern uses the standard Bootstrap Carousel. 
For more information, visit: http://getbootstrap.com/javascript/#carousel

Below you will find everything you need to know about the Header Carousel for Mobbern.

1. Find the location of the code in the template file

The code for the Slider is found in the file m_header_preset_transnav.html starting from line 19:

  <!-- Carousel Slide 1 : -->
  <div class="item active">
    <!-- Add slide background image by inserting your <img> tag here -->
    <div class="container">
      <div class="carousel-caption">
        ......
      </div>
    </div>
  </div><!-- /.item - Carousel Slide 1 -->

  <!-- Carousel Slide 2 : -->
  <div class="item">
    <!-- Add slide background image by inserting your <img> tag here -->
    <div class="container">
      <div class="carousel-caption">
        <h1 class="slider-header margin-v-20px">New: <span class="strong">Slider System</span>!</h1>
        <p class="slider-subheader margin-v-20px" style="font-weight: 300; margin-top: 15px; font-size: 18px;">
        <br/><br/><i class="icon fa fa-envelope"></i>   <span class="text-white">Contact our support center for more Information.</span></p>
      </div>
    </div>
  </div><!-- /.item - Carousel Slide 2 -->

  <!-- Add More Carousel Slides Here -->

 </div>

2. The HTML Code for Carousel Slides

Add your the HTML code for the new slides before the line:

<!-- Add More Carousel Slides Here -->
The HTML for a third slide with a background image would look like this:
  <!-- Carousel Slide 3 : -->
  <div class="item">
    <img src="http://lorempixel.com/g/1920/400/city/" style="opacity: 0.15;" alt="city-slide" />
    <div class="container">
      <div class="carousel-caption">
        <h1 class="slider-header margin-v-20px">Title of my third slide!</h1>
        <p class="slider-subheader margin-v-20px" style="font-weight: 300; margin-top: 15px; font-size: 18px;">
        <br/><br/>Add a message here...</p>
      </div>
    </div>
  </div><!-- /.item - Carousel Slide 3 -->

The last step is updating the Carousel Indicators with a new slide item. 
To do that, find the following code:

 <ol class="carousel-indicators">
  <li data-target="#header-big" data-slide-to="0" class="active"></li>
  <li data-target="#header-big" data-slide-to="1"></li>
 </ol>

And replace it with:

 <ol class="carousel-indicators">
  <li data-target="#header-big" data-slide-to="0" class="active"></li>
  <li data-target="#header-big" data-slide-to="1"></li>
  <li data-target="#header-big" data-slide-to="2"></li>
 </ol>


Go to Administration Control Panel > General and Purge the cache for the changes to apply.

Sidebar Widgets

Mobbern comes with 4 Sidebar Widget Presets:

  1. Special/Ad Widget
  2. Single line Notification widget
  3. Collapsible Widget
  4. Tabs Widget

To modify the sidebar, open “m_sidebar_right.html” from “Mobbern\template\” using your favorite editor, find:

<!-- SITE WIDGETS: -->

Then follow the instructions below to add your own widgets below the commented line*. 
*Do not forget to update the theme every time you edit a template file. To Update the theme go to Administration Control Panel > General and Purge the cache.

1.Special/Ad Widget

Copy the following code and use it to add a new special/ad widget:

<!-- Sidebar Block: Special/Ad Widget -->
<div class="widget-ad sidebar-block panel panel-success">
  <div class="panel-heading">
    <h4>Special</h4>
  </div>
  <div class="panel-body no-padding">
    <img class="align-h-center" src="{T_THEME_PATH}/images/your-image.png" />
  </div>
</div><!-- /.sidebar-block -->

3. Collapsible Widget

Copy the following code and use it to add a new collapsible widget: 
( Don’t forget to set the “data-target” attribute to match the id of the collapsible element.)

<!-- Sidebar Block: collapsible panel -->
<div class="widget-collapsible sidebar-block panel panel-default">
  <div class="panel-heading">
    <h4>
      <i class="collapse-button icon fa fa-chevron-circle-up float-right" data-toggle="collapse" data-target="#collapsableDiv" title="Toggle Panel"></i>
      Sidebar Block (collapsible)
    </h4>
  </div>
  <div id="collapsableDiv" class="panel-body collapse in no-padding">
    <div class="padding-h-15px">
      <p>Collapsible text widget.</p>
    </div>
  </div>
</div><!-- /.sidebar-block -->

2. Single line Notification widget

Copy the following code and use it to add a new notification widget: 
( Don’t forget to change the “href” attribute for the link)

<!-- Sidebar Block: notification widget -->
<div class="widget-note sidebar-block panel panel-secondary">
  <div class="panel-heading">
    <h4><a href="#add_url"><i class="icon fa fa-info-circle"></i>Notification Text</a></h4>
  </div>
</div><!-- /.sidebar-block -->

4. Tabs Widget

Copy the following code and use it to add a new tabs widget: 
( Make sure the “href” attribute of the tab links match the id of the tab.)

<!-- Sidebar Block: tabs widget -->
<div class="widget-tabs sidebar-block tabs-panel">
  <!-- tab links -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#tab-1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab-2" role="tab" data-toggle="tab">Tab 2</a></li>
  </ul>
  <!-- tabs -->
  <div class="tab-content">
    <div class="tab-pane fade in active" id="tab-1">
      <p>Content of the first tab</p>
    </div>
    <div class="tab-pane fade" id="tab-2">
      <p>Content of the second tab</p>
    </div>
  </div>
</div><!-- /.sidebar-block -->

Epilogue 

Thank you (once again) for choosing Mobbern!

Don’t forget to contact us for information that is not provided in this this documentation file. 

You can always remove or replace the Copyright note from the footer.

Are you happy with the theme? Please let us know!