Eles phpBB3.1 Theme Documentation

Hello there! Thank you for your interest in my theme!

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on ThemeForest. -- The author.

Current version: 1.6.0
Author homepage: gophpbb.com

Table Of Contents

• Foreword
• Getting Started
  • Upload
  • Install
  • Dev Mode
  • Updating
• Customization
  • General Settings
    • Branding
    • Layout
    • Sidebar
    • Avatars
    • Site Preloader
  • Advertisements
  • Menus
    • Navigation Menu
    • Social Links
  • Style
    • Typography
    • Color Themes
    • Header Effects
  • Custom Code
  • Widgets
• Advanced Customization
  • Setting Up Your System
  • Using the eles-child Theme
  • Editing the Source Code
• Supported Extensions
• Bonus Content
• License

Foreword

This documentation assumes you are familiar with the phpBB3.1 forum software.
You may find it useful to consult the phpBB documentation if you are new to phpBB.

Getting Started

1. Download the latest version of ELES from your Themeforest account.
   You probably did it by now.

2. Unpack the eles.zip archive wherever it suits you best.

3. Open the extracted folder and...

Take a coffee, sit back, and get ready.
This is a short and friendly one, no code snippets and HTML lessons.
In fact, you probably won't need to edit the source code at all.

Upload

1. Eles Style

   • Copy the folder eles from styles/ to your forum's styles directory.
     Copy the folder eles-child from styles/ to your forum's styles directory.
   • Or just copy the folder styles and paste it inside your forum's root directory.

2. Coreframe Extension

   • Copy the folder eles from ext/ to your forum's ext directory.
     Or just copy the folder ext and paste it inside your forum's root directory.

Install

1. Log-in to the ACP (Administration Control Panel) of your forum, navigate to
   Customise > Install Styles and install the main style by clicking on the Install style button for eles.
   Install now the child theme, eles-child with the same procedure.

2. Navigate to General > Board Settings,
   select eles as Default style and Guest style and set Override user style to Yes.
   Save your settings using the Submit button.
   

3. Go to Customise > Manage Extensions and enable the extension by clicking on the Enable button for Coreframe.
   

Dev Mode

Just installed the theme and the extension? Dev Mode should be enabled by default.

In the ACP, go to Extensions > Coreframe, enable the Dev Mode from the upper right corner and press the submit button.
Note: When enabled, Dev Mode is red.

Once you are done with customization, you should turn Dev Mode off (set it to gray).
It is not recommended to run your forum in production with Dev Mode enabled (red) because it can result in performance decrease.

Updating

Note: To check if you have the latest version installed on your forum navigate to
ACP > Customise > Manage Extensions and click on the Details button for Coreframe.

1. Log-in to the ACP, go to Extensions > Coreframe and make sure Dev Mode is enabled (red).

2. In the ACP, go to Customise > Manage Extensions and disable Coreframe by clicking on the Disable button for Coreframe.

3. Repeat the steps for Upload, overwriting your old version.
   Note: You should back-up your eles-child/theme folder.

4. In the ACP, enable back the Coreframe extension, as explained in step 3 of Install.

Customization

Before you begin with any customization, you'll want to make sure Dev Mode* is enabled.
* Dev Mode is a good friend who lets us focus on customization while doing the dirty work.

Most of the options are self-explained inside the extension.
Press the question mark at the right of the option input when available to learn more about that option.

Below you find additional information about the options customizable via
ACP > Extensions > Coreframe:

General Settings

Adjust branding, layout and avatar settings.

Branding

Set custom favicon, logo image or copyright information for the theme using the Branding options.

1. Favicon and Logo Image -- add your custom favicon and logo by inserting its url here.
   Tip: Use the question mark at the right of the fields to learn more about these options.

2. Copyright -- add your own copyright information using the html-enable field.
   Disable Show original Copyright text to hide the information about eles and phpBB in your forum's copyright.

Layout

Change layout mode, set container width and toggle the sidebar using the Layout options.

Pick one of the three Layout modes for your forum:

1. Boxed show your forum wrapped into a container to personalize it with a background image. Tip: Add a forum background image via:
   ACP > Extensions > Coreframe > Style > Canvas background image URL.
   Note: The background image option works only with boxed layouts.

2. Full width Let your forum span over the entire width of the browser window using this option.

3. Contained Use this option to have your forum's width limited to a size.
   Tip: Use the option Container Width to set the width of your forum or let the default size applied by leaving this option field empty.

Sidebar

1. Show Sidebar - Use this option to quickly turn the sidebar on and off.

2. Sidebar Position - Set the sidebar to the left or right of the content.

3. Pages to show the sidebar - Pick the pages where the sidebar is visible.
   Note: The Show Sidebar option must be set to true for this option to take effect.

Avatars

Switch between round or square avatars, and change avatars position in posts using the Avatars options.

Site Preloader

Enable or disable the site preloader.
Performance Tip: Disable the site preloader if you have a very big forum,
otherwise the users will have to wait for the entire page to load before they can see the forums.

Advertisements

Insert advertisements at the top, bottom or in the widget areas -- sidebar and footer.
Go to ACP > Extensions > Coreframe > Advertisements & Banners, enable the ad blocks you desire and insert your HTML or AdSense code. Submit and voila!

Note: It may take some time for a fresh Google AdSense code to work. Please be patient.

To see the widget ad, you'll have to assign the widget to a widget area from
ACP > Extensions > Coreframe > Template > Sidebar or Footer.

Menus

Add your own links to the navigation menu and assign social links for the forum.

Navigation Menu

You can add as many menu items as you like.
Go to ACP > Extensions > Coreframe > Menus and add your custom menu items to the Navigation Menu.

• To add a new menu item press the plus icon at the right of the last menu item.

• To remove a menu item press the red button at the right of it.

You must add the link and the text attribute for every new menu item.

To disable navbar auto sticking to the top use the toggle Disable sticky navbar.

Social Links

Social links can be added by navigating to the Social Links tab found at
ACP > Extensions > Coreframe > Menus.

You must insert at least the Link attribute for a social link to have it displayed.
Social links without the link attribute are automatically hidden.

To hide the social links menu use the toggle Show Social Links menu.

Style

Customize the styling, color theme or typography of your forum.
You can even add your own custom css code inside the extension.
Go to ACP > Extensions > Coreframe > Style to customize the aforementioned options.

Switch between rounded or flat elements using the toggle Corners style.

Typography

You can add your own google font to the theme and use it right away.
Pick from over 700 Google Web Fonts.

1. Create your collection in Google Fonts and copy the entire <link> tag to the Google fonts link tag option. E.g.
   <link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

2. Adjust font size using the Body font size option. Press the question mark at the right of it to learn how to use it.
   Since the theme uses em units, the texts will adjust using only one option.

3. Set the font for texts using the option Body text font and change the headings font using the option Headings font.
   Each option provides more information about its usage via the question mark button located at the rigth of it.

Color Themes

Eles comes with two predefined types of color themes and it's possible to create your own variation of the two.

1. First select your desired type of color theme -- for a light theme select Light Color Theme, for a dark one select Dark Color Theme.

2. Now Submit if you are good with the defaults, or Select Custom - Use color variables and further customize your color theme by adjusting the Color Variables.

Please note that your custom theme will inherit the parent type you selected first.

Header Effects

1. Content overlays header -- Enable or disable the header offset styling on the home page.

2. Header animation VFX --Enable or disable the particles VFX effect on the header image. Although the code is optimized to make the effect consume as less resources as possible, it is still possible to experience a slow speed on the page when the animation is visible. In that case it is a good idea to disable it.

Custom Code

You can add custom HTML, CSS or JS to your forum without changing the source code.
This is the recommended method because all your code will be saved to the database and it will remain intact when you update the theme and the extension.

The extension supports syntax highlight for code editing.

1. Code in HEAD Tag

Add your meta tags, external stylesheets, custom favicons and the likes here.
Location: ACP > Extensions > Coreframe > Template.

2. Code before closing the BODY Tag

Add your external or inline JavaScript code here. E.g. Google Analytics tracking code.
Location: ACP > Extensions > Coreframe > Template.

3. Custom CSS code

Adjust the style of your forum by adding custom CSS code inside the extension.
Location: ACP > Extensions > Coreframe > Style.

Widgets

The theme comes with preset widgets as well as fully customizable HTML widgets.
These widgets can be added to the sidebar or the footer of your forum.

1. Customize the widgets from ACP > Extensions > Coreframe > Widgets.
   
   You can use the custom code widgets to add information for members and guests or even as advertisements.

2. Add the widgets to the sidebar or the footer from
   ACP > Extensions > Coreframe > Template > Sidebar or Footer.
   

Advanced Customization

This section assumes you have some basic experince with HTML & CSS.
Although it mentions and involves having to deal with more advanced topics like NodeJS, SASS, Bower and GruntJS, there's nothing difficult you need to do.

Since the styling is done in a modern css preprocessor, it is recommended to get the basics before trying to edit it. The syntax is very simple and clean: Learn the basics of SASS.

If you uploaded the style/eles-child folder when installing the theme you are ready to continue. If not, first upload it as described in the Upload section and install the child theme using step 1 of the Install section.

Setting Up Your System

To edit the scss file you need to have a number of modern technologies installed on your system. These are lightweight and don't slow your system's performance.

Note: We name Command Line an interface for typing commands directly to a computer's operating system. On Linux and OS X it is the Terminal, on Windows it is the Command Prompt.

Remark: You need to run the commands as admin. In Windows, right click on the windows logo from the taskbar and pick Command Prompt (Admin). In Linux and OS X simply type sudo before the command.

1. Open the Command Line -- Terminal or Command Prompt (Admin)

2. Install Ruby -- http://rubyinstaller.org/.

3. Install NodeJS -- https://nodejs.org/en/download/.

4. Install SASS -- http://sass-lang.com/install/.
   Type gem install sass in command line as admin.

5. Install Grunt -- http://gruntjs.com/getting-started/.
   Type npm install -g grunt-cli in command line as admin.

6. Install Bower -- http://bower.io/#install-bower.
   Type npm install -g bower in command line as admin.

7. Open the eles-child directory in command line
   Linux and Mac OS X users: navigate to the directory using the Terminal.
   Windows users: navigate to the styles directory using the explorer, shift+right click on the eles-child directory and pick Open command window here.

   1. Type npm install to install the required dependencies.
   2. Type grunt buildcss to compile the sass file to css.
   3. Type grunt to watch and compile every time you save the sass file.
      To stop the continuous grunt task press Ctrl+C in command line.

Using the eles-child Theme

You need to use the eles-child theme if you change to the source code.
To do this, follow step 2 in the Install section and select eles-child this time.

Remark: It is required that you run grunt buildcss via command line as described above at step 7.iii. before using the child theme.

Editing the Source Code

You can customize all HTML template files and the stylesheet files.

• Before editing a HTML template file:
  Copy the HTML files you wish to modify from eles/template/ to eles-child/template/.
• Before editing a SCSS stylesheet file:
  Open the eles-child directory via Command Line and run the grunt command to enable automatic compilation upon file save.

Important Tip for Developers
Do not upload the folders eles-child/node_modules/ and eles-child/theme/vendor/ to your server! These are only needed for development.

Supported Extensions

The Eles theme is compatible with a many phpBB 3.1 third party extensions which you can add to your forum. Extensions are a great way to add more features to your forum and make it even more user-friendly.

Extensions support is a continuous task and you are encouraged to create a new issue in our issue tracker if your favorite extension is not yet supported by Eles.

Eles currently supports the following extensions:

• Board Announcements by phpBB
• Pages by phpBB
• Board Rules by phpBB
• Auto Groups by phpBB
• Google Analytics by phpBB
• About Us by Crizzo
• Advanced BBCode Box 3.1 by VSE
• Topic Preview by VSE
• Quick Login by PayBas
• Avatar in last post by bb3mobi
• Share On by Vinny
• Ajax Smilies by Tacitus89
• Adsense for phpBB 3.1 by Stoker (partially supported)
• phpBB 3.1 Post Love by satanasov (partially supported)
• Recent Topics by PayBas
• Quick Edit by Marc
• Email list by david63
• External Links Open in New Window by RMcGirr83
• phpBB3 SEO Sitemap by Shredder
• SEO Meta Description by bb3mobi
• mChat Extension by dmzx
• phpBB 3.1 - NV Newspage Extension by nickvergessen
• phpBB 3.1 Event medals by satanasov
• Ajax Shoutbox by paul999
• reCAPTCHA 2.0 Extension by gothick

Disclaimer: Customizing and implementing the extensions is not part of the item support!

The term "supported extensions" confirms that Eles comes with built-in styling rules for these extensions, which should work inside the theme without breaking the layout.

It also confirms the extensions were installed and tested on our development and testing environments.

Bonus Content

After installing the theme and the extension on your forum you can proceed to add the color-toggle button from the demo to the sidebar of your Eles powered forum.

License

The ELES Theme is licensed under the Envato Standard Regular License.

Copyright Notice
Copyright © 2015-2016 gophpbb / forumthemer.

This software is protected by international copyright laws.
Any unauthorized use or attempts to reverse-engineer, copy or implement parts of this intellectual property are strictly prohibited.

Limitation of Liability
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.