Documentation

Installation

1. Unpack canvas_install.zip and upload its contents to styles folder in your phpbb forum root.
2. Go to Administration Control Panel Customize
3. Under "Style management" click Install styles and install Canvas from the list. If it does not appear in the list make sure you uploaded the files correctly.
   
   
4. (optional) Set Canvas as default theme (click here to learn how)

Upgrade

1. Unpack canvas_upgrade.zip and upload its contents to styles folder in your phpbb forum root.
2. Go to Administration Control Panel find "purge cache" and click "run now"

Set as default

To make sure all your users see this theme, set it as default.

1. Go to Administration Control Panel General Board settings
2. Under "board style" category - Change "default style" and "guest style" and set "Override user style" to yes

Where is UCP/ACP link?

Canvas moves UCP/ACP/MCP links to a dropdown under avatar. Simply click your avatar and a dropdown will show up

Installation

1. Unpack slickpanel_ext.zip and upload its contents to ext folder in your phpbb forum root.
2. Go to Administration Control Panel Customize
3. Enable "Slickpanel" extension

Upgrade

1. Unpack slickpanel_ext.zip and upload its contents to ext folder in your phpbb forum root. (overwriting existing files)

Using slickpanel

1. If you're logged in as an admin and have slickpanel extension enabled, you'll see slickpanel link in user-dropdown
   
   
2. Clicking the slickpanel link with load SlickPanel in a window. You can navigate through the sections and tweak your forum's look and feel. Once done, click the green save button in the slickpanel window.
   
   

Toggle Features

1. Open slickPanel and navigate to General Features
2. Check the features you want to enable, Uncheck the ones you want disabled
3. Click save

Change logo

Text Logo

1. Open slickPanel and navigate to Header Logo
2. Text logo is the default logo type. So all you have to do is Modify the value of "Logo Text" Input
   You can optionally set font color, family, size and weight
3. Click save

Image logo

1. Upload your logo file to styles/canvas/theme/images/
2. Open slickPanel and navigate to Header Logo
3. Change "Logo type" to Image
4. Enter your logo's filename (Name of the file you uploaded in step #1) in "Image filename" Input
5. Click save

Navigation links

1. Open this file in a text/code editor: styles/canvas/templates/custom/navlinks.html
2. Add the code for your menu link at the end of the file (follow the tempalte provided below)

Link:

<li class="nav-item">
    <a href="http://yourlink.com" title="Link tooltip">Link Title</a>
</li>

Dropdown:

<li class="nav-item dd-container drop-arrow">
    <a href="#" class="drop-arrow" data-toggle="dropdown">Dropdown title</a>
    <ul class="dropdown-menu">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">And so on...</a></li>
    </ul>
</li>

Social Icons

These icons show up in the footer

1. Open slickPanel and navigate to Social
2. Enter the URLs for respective services (Leave empty to hide)
3. Click save

Change font

1. Open slickPanel and navigate to Typography
2. You can use different fonts for body, navbar and content. For now, Let's try changing the body font to Trebuchet MS
   
   
3. Like it? Click save

In order to use webfonts you need to include webfonts in the page. Open styles/canvas/template/custom/extra_css.html and add your webfont's code

For example, to add open sans from google fonts, you'd have to paste the following code

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Sidebar

Sidebar widgets can be added/modified by editing file styles/canvas/templates/custom/sidebar_blocks.html. File is empty by default so just start adding your code

Sample widget

<div class="sidebar-widget">
  <div class="widget-header">
	<i class="widget-icon fi fi-apps"></i>

        Widget title

	<span class="close" data-toggle="collapse" data-target="#customwidget1"></span>
  </div>
  <div class="widget-content collapse in" id="customwidget1"><!-- unique ID for each widget -->

	Your content here.

  </div>
</div>

Sample advertisement

<div class="sidebar-ad">
  <a href="http://affiliates.tld"><img src="http://affiliates.tld/ad.jpg"></a>
</div>						

Header

1. Open slickPanel and navigate to Header
2. Here you can change Header height, background-color, background-image and even make it transparent
3. Your changes will reflect on the header as you change the settings. Once you're happy with the look, Click save

Header section contains 3 sub-components as well. Namely Logo, Search and Navbar. Feel free to play around with those settings

Here's an example with dark Logo color and Navbar with different position and dark color scheme

Footer

1. Open slickPanel and navigate to Skin Footer
2. Here you can change Footer background settings
3. Your changes will reflect on the footer as you change the settings. Once you're happy with the look, Click save

Here's an example of footer with image background (poly2.jpg is included in the package)

Analytics

Adding Google Anayltics and/or Click analytics support is super easy with SlickPanel

Google Analytics

1. Open slickPanel and navigate to General Analytics
2. Enter your site's tracking ID (you can find it under admin > Property settings > Basic settings)
3. Click save

Clicky Analytics

1. Open slickPanel and navigate to General Analytics
2. Enter your site ID (You can find it in preferences -> info -> site information)
3. Click save

But wait. There's more!

Slickpanel has many settings which you might not have seen in the documentation. You can mix and match different layout and visual settings to create your own, customized look.
Go to your forums, open SlickPanel and Explore them!