Thank-you for purchasing FLATBBOOTS, the first and the only fully Responsive phpBB3 style that integrates fully the Bootstrap Framework. Dozens of reusable components are built in to provide navigation, alerts, popovers, and much more.

Intro

Freelance

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page on ThemeForest or send an email at: info@sitesplat.com. I am available for freelance work to customize you favorite phpBB3 mods or to extend BBOOTS according to your needs. Email me for a quote

Tools

The software suggested that you will need to perform any of the steps in this guide is Notepad++. It can be downloadable from the following link: notepad-plus-plus.org. Notepad++ will allow you to save your files without BOM by default. (Older servers or vendor-specific servers have a problem interpreting them and throw errors because the scripts produce output before they should.)

You can also refer to this text editors list: Text Editors

BOM

BOM

Byte Order Mark (BOM), is a Unicode character used to signal the endianness (byte order) of a text file or stream. It is encoded at U+FEFF byte order mark (BOM). BOM use is optional, and, if used, should appear at the start of the text stream. Beyond its specific use as a byte-order indicator, the BOM character may also indicate which of the several Unicode representations the text is encoded in.

Installation

In order to integrate the Bootstrap framework, install succesfully FLATBOOTS and add proper functionality to your phpBB3 forum, there are few core edits that are necessary to be installed. AutoMod is the suggested method to install any phpBB MODs (Addons) automatically. The core edit file needed is within this documentation folder.

How to:
  1. Log in to your phpBB3 Admin Control Panel also known as ACP.
  2. Click the AutoMod tab in the top navigation tab bar. (If you have NOT yet installed AutoMOD, you will need to download and install it from phpBB.com and then continue to step #3 below)
  3. Scroll down to the “Upload MOD” section and upload the Select the SiteSplat_BBCore.zip from the documentation folder.
    phpbb upload
  4. You may see a message confirming that the plugin has been uploaded. If so, click “Continue to AutoMOD.”
  5. Click the “Install” link to complete the installation.
  6. Upload the "FLATBOOTS" folder contained in: MAIN-THEME/ to your "styles" folder of your forum root.
  7. From the Administration Control Panel (ACP) and within the "STYLES" tab choose FLATBOOTS (previously uploaded) and install it.
  8. Make FLATBOOTS the default style
  9. Done! Enjoy the style ;-)

BBcore

Be sure to install the SiteSplat_BBCore.zip via AutoMod otherwise FLATBOOTS will NOT work properly!

Social icons

To add or remove social icons open the following template file: FLATBOOTS/template/overall_footer.html and look for:

<ul class="social-network">

Control your social links by adding or removing this line of code:

<a title="Google+" data-original-title="" href="#1"><i class="fa fa-google-plus google-plus-color"></i></a>

You can change the icons by using any of the font awesome icon classes ready available (you can refer to this list: FontAwesome).

fa fa-google-plus

FORUM FONT

You can change the font by adding and removing the through a simple link generated with google free font library

Google Fonts

Choose your font from here: Google free font then in the overall_header.html find:

<!-- google free font used for the foum content -->

then add your font link below that line:

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>

Now you need to call the font family for the various elements. In this case for the menu font open: basic.css located in the theme folder and around line: 1916 change the primary font family name, font size etc:

font-family: 'BebasNeueRegular','Arial','Helvetica',sans-serif;

Your code should look like this:

body {
  color: #8d9aa5;
  margin: 0;
  font-family: 'Source Sans Pro','Arial','Helvetica',sans-serif;
  background-color: #ECF0F1;
}

Background

For the background image and color open: FLATBOOTS/theme/basics.css and find:

/* GENERAL ELEMENTS - HEADINGS */
body {
  color: #77828c;
  margin: 0;
  font-family: 'Source Sans Pro','Arial','Helvetica',sans-serif;
  background-color: ##fbfcfc;
}

You can change the background color or add a background pattern/image here

Custom Edits - Custom.css stylesheet

All your edits to the basics.css stylesheet should be inlcuded in the custom.css stylesheet instead. This will leave the original code instact and it will be easier for future style update to carry over your customization

Twitter

In order to get the Twitter feed from your own Twitter page you need to have a widget ID generated from your Twitter account and then add the ID to the forum footer.

This video shows how to generate a twitter ID from the widget tool: http://www.youtube.com/watch?v=Ypsib-Nx4VQ

Open the overall_footer.html file and find this line:

391407906655965184

Replace it with your Widget ID generated from your Twitter account as shown in the video above.

You can also set your a visible and clickable Twitter handle. Open the overall_footer.html file and find this line:

<a href="https://twitter.com/SiteSplat">{L_JOIN_US_TWITTER}&nbsp;<small>@SiteSplat</small></a>

Replace this link: https://twitter.com/SiteSplat with your own Twitter link page

Replace this Twitter handle: @SiteSplat with your own Twitter handle

Open the overall_header.html template file located in: FLATBOOTS/template/ and find:

<a class="navbar-brand" href="{U_INDEX}">{L_FLATBOOTS}</a>

Replace the string {L_FLATBOOTS} with your IMG tag:

<img style="max-width:100px; margin-top: -8px;" src="{T_THEME_PATH}/images/logo.png" class="img-responsive" alt="Forum Logo">

Upload your logo

You logo should be uploaded in the following folder: FLATBOOTS/theme/images/

In order to have it dsiplayed you also need to refresh your theme, forum and browser cache as shown below:

A) Purge the template and theme :

		1) Navigate to "Styles" Tab.
		2) Under "Style components " click on "Templates".
		3) Under "Actions" click on "Refresh" for the FLATBOOTS style installed.
		4) in the next screen, click on "Yes" to confirm
		5) Repeat the steps for the "Themes" tab right under the "Templates" tab

		B) Purge the cache :

		1) Navigate to General Tab
		2) look at Purge the cache
		3) Click on "Run Now" button at right
		4) in the next screen, click on "Yes" to confirm

		C) Purge the browser cache :

		1) Hit F5 on your browser or CTRL+F5

Colors

Change colors with a click with the COLORIZE service:

COLORIZE

You can find the COLORIZE service at www.sitesplat.com/phpBB3/themer.php to generate your own custom color.

Once you generated your own color, Open the following CSS stylesheet located in: FLATBOOTS/theme/custom.css and paste your code after the following comment block in that stylesheet:

/*****************************************************************
 * Custom CSS Stylesheet. You can add any custom CSS selectors here after the comment line. 
 * They will be given the highest priority on any elements on the forum
 * Personilize your forum color scheme in one click here: www.sitesplat.com/phpBB3/ 
 * **************************************************************
 *
 * FLATBOOTS @SiteSplat.com - Custom CSS STYLESHEET - 
 * 
 * **************************************************************
 *****************************************************************/
 

If you wish to change come colors manually you can find some common locations in the CSS code generated via the COLORIZE service.

For example if you would like to change the Header background color or the "call To Action" bar background color you can find the commented references in the custom generated with COLORIZE:

/* FLATBOOTS Teaser Header Background color */
.masthead:before {
	background-color: #50a846;
}
/* FLATBOOTS Footer Call to Action Background Color */
.mastbottom {
	background-color: #50a846;
}

Clear the Cache

Make sure to purge the theme, forum and browser cache everytime you add a new color!

A) Purge the template and theme :

		1) Navigate to "Styles" Tab.
		2) Under "Style components " click on "Templates".
		3) Under "Actions" click on "Refresh" for the FLATBOOTS style installed.
		4) in the next screen, click on "Yes" to confirm
		5) Repeat the steps for the "Themes" tab right under the "Templates" tab

		B) Purge the cache :

		1) Navigate to General Tab
		2) look at Purge the cache
		3) Click on "Run Now" button at right
		4) in the next screen, click on "Yes" to confirm

		C) Purge the browser cache :

		1) Hit F5 on your browser or CTRL+F5

Checkbox and Radio

Super customized checkboxes and radio buttons for your style!

Checkbox and Radio
Plugin features
  • Identical inputs across different browsers and devices — both desktop and mobile
  • Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
  • Keyboard accessible inputsTab, Spacebar, Arrow up/down and other shortcuts
  • Screenreader accessible inputsARIA attributes for VoiceOver and others
  • Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
  • 32 options to customize checkboxes and radio buttons
  • 11 callbacks to handle changes
  • 9 methods to make changes programmatically
  • Saves changes to original inputs, works carefully with any selectors

The checkbox and radio colors can be easily changed.

  1. Open the documentation folder and copy the content of the custom.css stylesheet (It includes 10 different colors as shown in the screenshot above) and paste it into: FLATBOOTS/theme/custom.css.

For different from the default color schemes use this code (example for Red) open FLATBOOTS/template/overall_footer.html and find:

"icheckbox_flat-aero"

replace it with (for the checkbox):

"icheckbox_flat-red"

Find:

"iradio_flat-aero"

replace it with (for the radio):

"iradio_flat-red"

The color code definitions ready to be used are the following:

Checkbox
  1. "icheckbox_flat-red"
  2. "icheckbox_flat-green"
  3. "icheckbox_flat-blue"
  4. "icheckbox_flat-grey"
  5. "icheckbox_flat-orange"
  6. "icheckbox_flat-yellow"
  7. "icheckbox_flat-pink"
  8. "icheckbox_flat-purple"
Radio
  1. "iradio_flat-red"
  2. "iradio_flat-green"
  3. "iradio_flat-blue"
  4. "iradio_flat-grey"
  5. "iradio_flat-orange"
  6. "iradio_flat-yellow"
  7. "iradio_flat-pink"
  8. "iradio_flat-purple"

The main navigation bar can be adjusted to behave in different ways.

Navigation

The current options are:

  • Standard (Default)
  • Fixed Top (AKA Sticky)
  • Fixed Bottom
  • Change/edit links

Fixed Top

The Fixed Top option will allow you to have a Fixed (Sticky) navigation bar that will maintain the position regardless of the scrolling of the main content. This is especially useful for mobile devices.

In order to activate the Fixed Top navigation you simply need to add two classes to the navigation bar and the main header banner.

Open FLATBOOTS/template/overall_header.html and find:

<header role="banner" id="top" class="navbar navbar-inverse navbar-static-top flat-nav">

Replace it with:

<header role="banner" id="top" class="navbar navbar-inverse navbar-static-top flat-nav navbar-fixed-top">

Open FLATBOOTS/template/addons/header_teaser_body.html and find:

<div class="masthead flat-header">

Replace it with:

<div class="masthead flat-header flat-header-fixed-top">

There is a known issue with the sticky navigation. For additional information see: https://github.com/twbs/bootstrap/issues/1768 and also: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header. However a workaround can be applied. Open the FLATBOOTS/template/viewtopic_body.html and find:

<!-- INCLUDE overall_footer.html -->

Before on a new line add:

<script>
head.ready(function () {
function scroll_if_anchor(t){if(t="string"==typeof t?t:$(this).attr("href")){var o=90;if("#"==t.charAt(0)){var i=$(t);if(i.length&&($("html, body").animate({scrollTop:i.offset().top-o}),history&&"pushState"in history))return history.pushState({},document.title,window.location.pathname+t),!1}}}scroll_if_anchor(window.location.hash),$("body").on("click","a",scroll_if_anchor);
});
</script>

Fixed Bottom

The Fixed Bottom option will allow you to have a Fixed (Sticky) navigation bar like the above option but the position will be at the bottom of the forum instead.

Open FLATBOOTS/template/overall_header.html and find:

<header role="banner" id="top" class="navbar navbar-inverse navbar-static-top flat-nav">

Replace it with:

<header role="banner" id="top" class="navbar navbar-inverse navbar-static-top flat-nav navbar-fixed-bottom">

Change/edit links

The default links can be changed, edited or added by editing the navigation file. Open: FLATBOOTS/template/addons/navigation.html in order to change, edit or add links.

The Header tile is stored in the addons folder within the FLATBOOTS template folder.

Header

This block can be eaily modifed to reflect your forum community slogan and/or favorite images.

the current available options are:

  • Standard (Default)
  • Change image and color
  • Animation Turn ON/OFF

Open FLATBOOTS/template/addons/header_teaser_body.html and find:

<h1>{L_FLATBOOTS_INTRO}&nbsp;<a class="label label-call" href="http://getbootstrap.com/">{L_BOOTSTRAP_VERSION}</a></h1> 
	 <p>{L_FLATBOOTS_EXPLAIN}</p>

The language variables {L_FLATBOOTS_INTRO} and {L_FLATBOOTS_EXPLAIN} are part of the BBcore and once installed they can be found and edited to reflect your own text in the following file:your_forum_root/language/en/mods/sitesplat.php

Change the image and color

The default icons image can be changed via CSS. Make sure to upload your image in:FLATBOOTS/theme/images/

Open FLATBOOTS/theme/basics.css and find:

background: url("{T_THEME_PATH}/images/tile-bg-head.png") repeat fixed 0 0 #26bcb5;

Replace tile-bg-head.png wit hthe title of your image and save.

If you have a transparent image you can also set the background color to it. In the default example is set to : #26bcb5 Use the hex value to set your color.

Turn ON/OFF the animation

The animation can be easily turned on/off

Open FLATBOOTS/theme/basics.css and find:

/*animation-name*/
-webkit-animation-name:masthead;
   -moz-animation-name:masthead;
    -ms-animation-name:masthead;
     -o-animation-name:masthead;
        animation-name:masthead;

Replace it with following code to turn it OFF:

/*animation-name*/
-webkit-animation-name:masthead-off;
   -moz-animation-name:masthead-off;
    -ms-animation-name:masthead-off;
     -o-animation-name:masthead-off;
        animation-name:masthead-off;

The footer is divided in tree main parts. Two sections and the actual footer block.

  • Section one - Call To Action
  • Section two containing:
    • About us
    • Twitter
  • Footer block containing:
    • Navigation Links
    • Social links

The footer template is located in: FLATBOOTS/tempalte/overall_footer.html

Section one - Call To Action

This call to action bar can be found in the addons folder. Open: FLATBOOTS/template/addons/call_to_action_body.html

The language variables {L_CALL_TO_ACTION_FOOTER} and {L_PURCHASE_NOW_BTN} are part of the BBcore and once installed they can be found and edited to reflect your own text in the following file:your_forum_root/language/en/mods/sitesplat.php

Section two - About us and Twitter

The about us text is accessible via language file. The variables are: {L_FLATBOOTS_ABOUT_TITLE} and {L_FLATBOOTS_ABOUT_PART_ONE}

The Twitter block and function is explained in Here

The navigation links can be edited within the same overall_footer.html file. Find:

<ul class="list-inline footer-nav">
	 <li><a href="{U_ADVERTISE}" title="">{L_ADVERTISE}</a></li>
	 <li><a href="{U_PRIVACY}" title="">{L_PRIVACY}</a></li>
	 <li><a href="{U_DMCA}" title="">{L_DMCA}</a></li>
	 <li><a href="{U_TERMS_USE}" title="">{L_TERMS}</a></li>
	 <li><a href="{U_CONTACT}" title="">{L_CONTACT}</a></li>
	 </ul>

and change, edit or add links contained the the block.

The social links and icons are explained here: Social links

Recent topics

The Fancy Lazy Topics Loader can be downloadable for free from: SiteSplat - Fancy Lazy Topic Loader

Fancy Lazy Topics Loader

It can be installed via AutoMod.

Fancy Lazy Topics Loader Options:
  1. First post content / No avatar DEFAULT
  2. First post content / First poster avatar
  3. Last post content / Last poster avatar
  4. Topic blocks number
  5. Forum exclusion
  6. Avatars
First post content / First poster avatar

The First post content and no avatar are the default settings. You can change this behaviour to: last post content with the last poster avatar

Once installed open root/inlcudes/functions.php and find:

first-post or last-post avatar/post-text -- must be 'first' or 'last'
	$type = 'first';

Change to "last" in order to have the Last post content and the last poster avatar. This is how the code will look like:

first-post or last-post avatar/post-text -- must be 'first' or 'last'
	$type = 'last';
Topic blocks number

Yo ucan select how many topics to feed. Once installed open root/inlcudes/functions.php and find:

number of post "blocks" to display -- $limit must be a multiple of 4
	$limit = 20;

Change the numeric value to a multiple of 4. For example to feed only 8 topics, enter the value of 8 Your code will look like:

number of post "blocks" to display -- $limit must be a multiple of 4
	$limit = 8;
Forum Exclusion

It is possible to exclude forums from showing in the recent topics. This can be useful for busy board where there might be an introduction forum therefore you might want to avoid all the toopics and posts from showing in the list.

Once installed open root/inlcudes/functions.php and find:

$excluded = array();

Now you can add the forum ID's separated by comma, for example:

$excluded = array(2,4,6);
Avatar

it is possible to use a template variable that will display the avatar of the original poster or the avatar of the last poster. The variable is the following:

{rtrow.AUTHOR_AVATAR}

The following example will demonstrate how to use the avatar in the template file and show it right at the beginning of the block. Open FLATBOOTS/template/addons/fancy_lazy_topics_body.html and add the variable above like this:

{rtrow.AUTHOR_AVATAR}
				<div class="blog-meta">
				 <time datetime="{rtrow.TOPIC_YEAR}-{rtrow.TOPIC_MONTH_DIGIT}-{rtrow.TOPIC_DAY_DIGIT}" class="entry-date">
					<span class="day">{rtrow.TOPIC_DAY_DIGIT}</span>
					<span class="month">{rtrow.TOPIC_MONTH}</span>
				 </time>

You can add your own language pack to your forum by downloading and installing the official phpBB3 language packs here: Language Packs

Once the language pack is installed you need to translate the FLATBOOTS's own language file. This file gets installed automatically with the BBcore package.

The location is: language/en/mods/sitesplat.php. Open sitesplat.php file with notepad++, translate the content and save. Now you need to add the bboots.php file to your language pack (previosuly installed) directory. For example if you installed French, the location where to copy the boots.php file will be in: root/language/fr/mods/

You can also check out the official support forum at: FLATBOOTS Language Packs and see if there is already a language file translated.

BOM free

Make sure to use Notepad++ or a one of the suggested editor mentioned in the "tools" section in order to save the php file without BOM.