H2O Theme for phpBB 3.2

Installation & Configuration documentation


Contents


Thanks for buying the H2O Theme - we think you made a great choice. This documentation should cover everything you need to install and configure the Theme for your forum. If you need any extra help, find a bug, or would like to submit a feature request, please feel free to contact us - we're very friendly :)

- PlanetStyles Team

Installation / Update Instructions #back to top

Setup Information

The H2O Theme requires the included H2O Control Panel Extension in order to configure the theme options. Therefore there are 2 parts to the installation process:

  1. Install & enable the required extension ("H2O Control Panel")
  2. Install & enable the H2O Theme

Note: We offer an affordable installation service for customers wanting help installing the H2O Theme. Email missioncontrol@planetstyles.net for more info.


How to install the H2O Control Panel Extension

Uploading the extension files
  1. Download H2O Theme
  2. Locate folder "h2o.zip" and extract to your desktop
  3. Open the folder corresponding to the phpBB version you're using
  4. Open folder "2. Extension Files"
  5. Using either FTP or a File Manager, upload the "planetstyles" folder to: /yourdomain.com/phpBB/ext/

    Note:Your file path should now look like this: /yourdomain.com/phpBB/ext/planetstyles/h2o/
Enabling the extension
  1. Navigate to: ACP (Admin Control Panel) → "Customise" (tab)
  2. Below "Disabled Extensions", locate: "H2O Theme: Control Panel"
  3. Click "Enable" and confirm
  4. Important: Browse to ACP Home and click "Run Now" next to "Purge Cache". (This is necessary to allow colour picker to function correctly).


How to install the H2O Theme

Uploading the Theme Files
  1. Download H2O Theme
  2. Locate folder "h2o.zip" and extract to your desktop
  3. Open the folder corresponding to the phpBB version you're using
  4. Open folder "1. Theme Files"
  5. Using either FTP or a File Manager, upload the "H2O" folder to: /yourdomain.com/phpBB/styles/
Enabling the Theme
  1. Navigate to: ACP (Admin Control Panel) → "Customise" (tab)
  2. In the left sidebar, click "Install Styles"
  3. Locate: "H2O"
  4. Click "Install style" and confirm
Set H2O as default style
  1. Navigate to: ACP (Admin Control Panel) → "General" (tab)
  2. In the left sidebar, click "Board Settings"
  3. Change "Default Style" to "H2O"
  4. Navigate to: ACP (Admin Control Panel) → Customise (tab)
  5. In the left sidebar, click "Styles"
  6. Optional: Deactivate any other styles to move existing users on other styles onto the H2O Theme


How to update the H2O Theme


If you haven't made changes to the template files / stylesheets:
  1. Download the latest version from the ThemeForest downloads page
  2. Uninstall the H2O Theme
  3. Uninstall the H2O Control Panel extension. Make a note of your configuration, then click 'Delete Data' in the 'customise' tab
  4. Overwrite the H2O Theme and Control Panel extension files with the new ones from the update
  5. Reinstall the H2O Theme and Control Panel extension using the steps above


If you have made changes to the template files / stylesheets:
  1. Download the latest version from the ThemeForest downloads page
  2. Use a file Diff program such as BeyondCompare to compare your H2O theme files to the update
  3. Make a note of, and backup the changed files
  4. Uninstall the H2O Theme
  5. Uninstall the Control Panel extension. Make a note of your configuration, then click 'Delete Data' in the 'customise' tab
  6. Overwrite the H2O Theme and Control Panel extension files with the new ones from the update
  7. Reinstall the H2O Theme and Control Panel extension using the steps above
  8. Merge your custom edits back into the new theme files

Configuring Theme Options #back to top

The following sections outline the configurable options in the H2O Theme.

All options are configured in: ACP (Admin Panel) → Extensions (tab) → H2O Theme: Control Panel → Theme Settings

Logo settings #back to top

Uploading a logo - #back to top

  1. Open H2O Control Panel extention
  2. Next to "Logo image upload" , click "Browse"
  3. Select your logo file from your computer
  4. If changing a logo, ensure the "logo location" filed is empty
  5. Optional: Enter height and width
    Tip: Set the height & width to 50% of your logo's actual size to ensure a crisp display on retina devices (eg: Modern iPhones / other Apple devices).
  6. Click Submit

Revert to the default logo - #back to top

  1. Open H2O Control Panel extension
  2. Empty the value from the "Logo location" field
  3. Click Submit

Removing the logo - #back to top

  1. Open H2O Control Panel extension
  2. Set "Header Structure" option to "Text Only"
  3. Click Submit

Background image / background colours#back to top

Uploading a custom background - #back to top

  1. Open H2O Control Panel
  2. Next to "Background imageupload" , click "Browse"
  3. Select your header image file from your computer
  4. Optional: Set background repeat / position / size properties in the options further down the control panel.
  5. Click Submit

Removing custom background - #back to top

  1. Open H2O Control Panel
  2. Empty the value from the "Header image location" field
  3. Click Submit

Customisable background options - #back to top

These Options can be found by scrolling down, under "Style Options"

  1. Background Repeat: Defines which direction the background image repeats (note: Not applicable if the 'stretch' option is enabled below). Options:
    • repeat-x: left &right
    • repeat-y: up & down
    • repeat: left & right & up & down
    • no-repeat: Header doesn't repeat
  2. Background Position: Defines the background image's starting position (note: Not applicable if the 'stretch' option is enabled below).
  3. Background Image Transparency %: Sets the transparency for the background image (0-100%). Low number = less transparent (lighter background), high number = more transparent (darker background)
  4. Fix Background Image: Background image remains in place when the end-user scrolls down the page (note: Disabled on certain Apple devices due to performance limitations)
  5. Resize background to fill screen?: If using a non-repeating background, this option can be used for stretching the background image to fill all available space.
  6. Background Colour Transparency %: Sets the transparency for the dark content background. Higher % = more transparent (eg: 0% would present a black background, 100% would show no background colour)

Favicon Settings #back to top

Uploading a favicon - #back to top

  1. Open H2O Control Panel
  2. Next to "Favicon upload" , click "Browse"
  3. Select your favicon
  4. If changing a header, ensure the "header location" filed is empty
  5. Click Submit

Removing custom favicon- #back to top

  1. Open H2O Control Panel
  2. Empty the value from the "Favicon image location" field
  3. Click Submit

Top Menu#back to top


Adding your links - #back to top

You can add custom links to the top menu.

To add your links:

  1. Open H2O Control Panel
  2. Scroll down to HTML Code block #4
  3. Enter your links in the following format:
  4. <li><a href="http://www.google.co.uk">Google</a></li>

Particle Header#back to top

H2O includes an animated particle header:

Animated Particle Header - #back to top

Adds animated particles to the header background.

To Enable:

  1. Open H2O Control Panel
  2. Next to "Animated Particle Header" , click "Yes"
  3. Click Submit.

Header Structure Options #back to top

Choosing Logo / Text Format

There are 2 formats to choose from.

Logo Only

Sitename and Description Only

Setting header structure - #back to top

  1. Open H2O Control Panel
  2. Set "Header Structure" option to either:
    • Logo Only
    • Sitename and Description Only
  3. Click Submit


Boxed / Fluid Layout #back to top

There are 2 width settings available in H2O:

Fluid Width - #back to top

Fills the full space available in the browser.

To Enable:

  1. Open H2O Control Panel
  2. Next to "Layout Type" , click "Fluid"
  3. Click Submit.

Boxed - #back to top

Fixed 1200px width. On mobiles and tablets this setting will fill the viewport rather than remain at 1200px.

To Enable:

  1. Open H2O Control Panel
  2. Next to "Layout Type" , click "Boxed"
  3. Click Submit.

Colour Settings #back to top

The default colour in H2O is bright Blue. However, the Control Panel extension allows you to set your own solid accent colour, or choose from a lively preset.

Setting a custom (solid) accent colour - #back to top

  1. Open H2O Control Panel
  2. Next to "Theme Preset Colour", select "Custom (Use colour picker below)"
  3. Use the colour picker to choose your colour:
  4. Click Submit

Choosing a Preset

  1. Open H2O Control Panel
  2. Next to "Theme Preset Colour", select the name of the preset you'd like to enable.
  3. Previews for each preset are featured below.
  4. Click Submit

Forumlist Options #back to top

There are 3 forumlist display options in H2O:

List - #back to top

Traditional vertical layout.

To Enable:

  1. Open H2O Control Panel
  2. Next to "Forumlist Display" , click "List"
  3. Click Submit.

List (Simplified) - #back to top

Traditional vertical layout. 'Topics' column has been removed. 'Posts' column is much wider with larger numbers.

To Enable:

  1. Open H2O Control Panel
  2. Next to "Layout Type" , click "List (Simplified)"
  3. Click Submit.

Grid - #back to top

Forums are displayed in a grid. It is recommended to use the 'forum image' feature to enhance the visual display of this layout.

To Enable:

  1. Open H2O Control Panel
  2. Next to "Layout Type" , click "Grid"
  3. Click Submit.

Sidebar Settings

H2O Supports 2 sidebars (left, right or both). They are fixed width and set at the following dimensions:

Left Sidebar: 120px. Right Sidebar: 300px.

Enable Sidebar(s) - #back to top

  1. Open H2O Control Panel
  2. Set "Enable Sidebars" to "Yes"
  3. Next to "Sidebar Placement", choose from either: "Left Only", "Right Only" or "Both".
  4. Click Submit

Edit Sidebar Content - #back to top

  1. Open H2O Control Panel
  2. Scroll to the bottom of the page
  3. Left Sidebar content should be placed in: Custom HTML code block #1. HTML Markup is supported.
  4. Right Sidebar content should be placed in: Custom HTML code block #2. HTML Markup is supported.
  5. Click Submit

Sidebar Content Blocks

Copy & paste the code below to add each to the sidebars.

125 x 125 Grid

<div class="sidebar_widget ad_grid fancy_panel">
    <div class="fancy_panel_padding">
        <h3>Our Friends</h3>
        <div class="sidebar_content">
            <a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
            <a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
            <a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
            <a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
        </div>
    </div>
</div>

Pretty Panel

<div class="sidebar_widget fancy_panel forabg">
    <div class="fancy_panel_padding">
    <h3>Blank Widget (Fancy Panel)</h3>
    <div class="collapse-trigger open">
        <span class="icon fa-minus tooltip-left" title="Collapse"></span>
        <span class="icon fa-plus tooltip-left" title="Expand"></span>
    </div>
    <div class="sidebar_content">
        <p>Some things go here :)</p></div>
    </div>
</div>

Blank

<div class="sidebar_widget">
    Your code here
</div>

Social Bar Settings



To disable Social Bar - #back to top

By default both social bars are enabled by default, however there is an option to hide them. Also, they won't show if there is no code entered.

  1. Open H2O Control Panel
  2. Set "Hide Social Bar" to "Yes"
  3. Click Submit

Adding Social Icons - #back to top

The Social Icons are powered by FontAwesome library.

Note: One set of code controls both social media locations.

  1. Open H2O Control Panel
  2. Enter Social Bar content in "Custom HTML code block #3" textarea, using the following format:
    <a href="#"><span class="fa fa-twitter"></span></a>
    <a href="#"><span class="fa fa-apple"></span></a>
    <a href="#"><span class="fa fa-facebook"></span></a>
    <a href="#"><span class="fa fa-codepen"></span></a>
    <a href="#"><span class="fa fa-google"></span></a>
    <a href="#"><span class="fa fa-digg"></span></a>
    <a href="#"><span class="fa fa-pinterest-p"></span></a>
  3. Refer to FontAwesome.com/icons/ for a full list of supported icons
  4. Click Submit

Misc. Settings #back to top

Sidebar Profile Widget

Adds a profile widget to the sidebar. Logged out users see a login form.

Enable Profile Widget - #back to top

  1. Open H2O Control Panel
  2. Next to: "Sidebar Profile Widget", click "Yes"
  3. Click Submit





Scroll to Top Button

Adds a "scroll to top" button in the lower-right corner on long pages.

Enabling Scroll to Top Button - #back to top

  1. Open H2O Control Panel
  2. Set "Enable Scroll to Top" option to either:
    • Yes
    • No
  3. Click Submit

Collapsible Panels

Adds a switch to content blocks allowing the end user to show / hide specific content as per their preferance. The user's choice is stored in their browser.

Enabling Collapsible Panels - #back to top

  1. Open H2O Control Panel
  2. Set "Enable Collapsible Panels" option to either:
    • Yes
    • No
  3. Click Submit

Postprofile Orientation

'Postprofile' is the section of topic replies that contains the poster's avatar, post count and other poser-specific information. You can choose to display this information on the left or right side of the post.

Left

Right

Horizontal


Setting Postprofile side - #back to top

  1. Open H2O Control Panel
  2. Set "Postprofile Side" option to either:
    • Left
    • Right
    • Horizontal
  3. Click Submit

Rounded 'Last Post' Avatars

Last post column avatars can be enabled with the extension: phpBB: Avatar in last post. By default these are square, this option will force them to appear rounded as shown in our live demos.

Default

Rounded


Setting Rounded Avatars - #back to top

  1. Open H2O Control Panel
  2. Set "Force Rounded Avatars" option to either:
    • Yes
    • No
  3. Click Submit

Sidebar Search

Adds a quick-search to the right sidebar

Enabling Quick Search - #back to top

  1. Open H2O Control Panel
  2. Set "Enable Sidebar Search Widget?" option to either:
    • Yes
    • No
  3. Click Submit

Help & Support #back to top

We provide help & support to all PlanetStyles Customers with an active support grant.

Please visit our Support Page or email missioncontrol@planetstyles.net

Support for our items includes:
  • * Responding to questions or problems regarding the item and its features
  • * Fixing bugs and reported issues
  • * Providing updates to ensure compatibility with new software versions
Regrettably can't freely assist with the following:
  • * Customisation and installation services
  • * Support for third party software and plug-ins

Version History (Changelog) #back to top

Changelog

                                     

						-----------------------------------------------------------------------------------------
						Version 1.0.0 - January 2018
						-----------------------------------------------------------------------------------------

						- Initial Release