Coollab WP Theme Documentation

Getting Started

Thank you for choosing Coollab - we truly appreciate that! Before you start setting up your website, please read through this documentation.

Installation

Coollab theme does not support WordPress version earlier than 4.0 so make sure you've got the current version of WordPress. In order to download the current version, please visit  wordpress.org. Please check WordPress Codex for information on how to install WordPress on your server.

Once WordPress is successfully installed, you will have to upload the theme to your WordPress directory. We highly recommend activating the Coollab's child theme instead of Coollab itself. That means you will have to install two themes: coollab and coollab-child.

Download and unzip the coollab-package folder. You'll find two zipped theme folders coollab.zip and coollab-child.zip.

Open your WordPress dashboard. Go to Appearance > Themes. Click the Add New Theme button, then Upload Theme and select the coollab.zip file. Click Install Now.

Upload parent theme

Don’t activate the theme yet. Repeat the upload/install process for with the coollab-child.zip file and activate the coollab-child theme once installed.

Upload child theme
If you encounter problems during the installation process, make sure to check Common WP Installation Issues.

Setup

Once activated Coollab will display a Welcome Screen sending you to the Coollab Setup page (you can also access it in Appearance > Coollab Setup).

setupscreen

You can choose between installing and activating recommended plugins or installing, activating, configuring for the demo and importing the demo data.

setup screen choice

If you choose Install and Activate Plugins the following plugins will be installed and activated:

  • PeHaa Themes Simple Post Types
  • PeHaa Themes Events
  • PeHaa Themes Page Builder
  • CMB2 (Custom Metaboxes  and Fields by WebDevStudios)
  • Contact Form 7

Please note that in this case no plugin configuration is done. All installed and activated plugins run with their default options.

If you choose Install + Activate Plugins and Import the Demo Data the plugins listed above will be installed and activated. PeHaa Themes Page Builder will be activated on pages and events.

The demo data is imported from wptemplates.pehaa.com/coollab/ There will be imported:

  • two pages built with our page builder: Home and Events
  • posts and events
  • custom menu for main navigation
  • the off-canvas content

Recommended Plugins

Coollab theme setup recommends the installation of:

  • PeHaa THEMES Theme Tools
  • PeHaa Themes Simple Post Types
  • PeHaa Themes Events
  • PeHaa Themes Page Builder
  • CMB2 (Custom Metaboxes  and Fields by WebDevStudios)
  • Contact Form 7

Note that none of these plugins is strictly necessary and if you don’t install them or deactivate any of them Coollab will still be fully functional.

PeHaa THEMES Theme Tools

It registers two additional custom widgets and enable the one-click demo installation.

PeHaa Themes Page Builder

By default, after the plugin activation, it's activated on Pages. If you want to use it for posts or custom post types added with PHT Simple Post Types go to the PHT Page Builder menu page and check the post types you want to use the page builder for.

PeHaa Themes Events

This plugin adds Event custom post type together with its Event Type taxonomy. It also adds an Events Calendar widget, also available as the page builder module.

PeHaa Themes Simple Post Types

PeHaa Themes Simple Post Types is a simple plugin by PeHaa Themes that allows you add easily custom post types and custom taxonomies. So if  posts and pages are not enough and you need projects, recipes, team members or kittens then PHT Simple Post Types is a way to go.

CMB2 - Custom Metaboxes and Fields

You will need this plugin (available in WordPress repository) to manage some additional settings for your posts and pages. See the Post/Page Metaboxes section.

Contact Form 7

One of the popular plugins that manages (multiple) contact forms. It's optional, please feel free to use a contact for of your choice.


Customization

Child Theme

Unless you are absolutely sure that you will never ever need to modify any of the theme files you should install and activate a child theme for Coollab.

For your convenience Coollab comes with a ready to use child theme. You’ll find the “coollab-child” folder in the theme package folder as well as a install-ready coollab-child.zip file. Its files structure is as in the image below.

child

If you want to modify the theme css, you’ll have to edit the css/style.css file. It contains the three lines of code as below. Please note that you should not use “@import”, the parent css is loaded before your custom child css so “@import” is no needed.

/* Theme customization starts here. */
/* DO NOT use "@import". Just type some css that you need to add or override. */
/* Good luck with your project! */

If you are translating your theme (see Translate Your Theme section) you should add your translation files into the languages folder in your child-theme.

Theme Options

All the Coollab Theme customization happens through the WordPress customizer. That means the front-end view and your changes instantly visible – a big advantage from the user perspective.

Important!

All your customization is theme specific and your settings will not be applied if you switch between a child and the parent theme.

Options
  1. Site Header

    You can switch between the Title/Tagline or a Logo - upload your logo here. You can also disable the search functionality added to the navigation menu.

  2. Footer

    You can modify the default footer copyright text here as well as add your social links - the available ones are: Facebook, Twitter, Google Plus, Instagram, Vimeo, Youtube, Pinterest and Flickr.

  3. Dashboard Login

    Some users like to personalize the logo displayed on the login page. You can upload a dashboard logo that will replace the default WordPress one.

    The displayed logo height is 84 pixels. For a crispy look on retina screens prepare your image double sized – the width should not exceed 640px and the height should be 168px.

  4. Archives

    You can choose between the standard pagination or a “Load More” button. You can also define an image that will be displayed on the archive pages.

  5. Fonts

    With Coollab you can use two custom font families: one for the body text and one for the headings.

    Simply choose a Google Font for body from Google Font Directory.

    While choosing the body font family make sure that the italic, bold and bold italic styles exist, see the image below:

    docs-fonts

    You can also decide to capitalize all the headings.

  6. Colors

    You can set custom colors for:

    • body background and text
    • your site "brand" color
    • page border background and text colors
    • search screen background and text colors
    • archive boxes background and text colors
    • footer widgets area background color, as well as the widget boxes background and text colors
  7. Custom Css

    You can add custom styles here. You might also consider (recommended) using the child-theme stylesheet instead.

Coollab-Customization - Video

Post/Page Metaboxes

Once the CMB2 plugin is installed and activated all posts and pages display a custom metabox Coollab Custom Settings.

For posts you can decide to skip any of the following elements: sidebar, featured image, author’s bio or share links.

Coollab metabox on post

On pages and post types with Page Builder activated, you can also opt for the full-width layout, without the header and sidebar.

Coollab metabox on page

Off-canvas Area

Coollab off-canvas content

With Coollab you can add a quick-access off-canvas area that will be accessible on click from any page. You build its content in Appearance > Coollab Off-Canvas.

The default link title for this area is "Quick Access" but you can modify it here. The Coollab Off-Canvas page uses the slightly simplified version of our page builder (less options for the section settings and only one option available) to build the off-canvas content using the page builder modules.

Translate Your Theme

Coollab is translation-ready. You’ll find the coollab.pot file in the /languages folder.

You can use POEdit to translate your theme. Once downloaded and installed go to File > Open and choose the languages/coollab.pot file in your theme folder. Line by line translate the theme to your language. Go to File > Save as.. and save your files in the languages folder in your child-theme. Name your file accordingly to WordPress language codes, you may find them here. For example the language code for French is fr_FR so you would save your file as fr_FR.po. Note that the fr_FR.po file will be automatically compiled to fr_FR.mo file.

If your are not using a child-theme you should save your .po/.mo files in the 'wp-content/languages/themes' folder. It this folder does not exist - you'll have to create it. You'll also have to prefix the .po, .mo files with the textdomain string, "coollab-", for example the files for the french translation should be named coollab-fr_FR.mo and coollab-fr_FR.po

Make sure that WordPress knows which language you want to use. From WordPress 4.0 you don't need to edit the wp-config.php file to do that. Go to your Dashboard > Settings > Site Language choose your language and Save Changes.


Miscellaneous

Troubleshooting

Sometimes things do not work as they should…

Header Video:

If the video doesn’t display you might have to add the following in your .htaccess file (concerns Linux/Apache servers).

AddType video/mp4 .mp4

For more information see Mediaelementjs documentation.

Featured Images:

There are three image size variants used in this template, they are generated by WordPress during the image upload. If your images are already uploaded please use the Regenerate Thumbnails plugin, that will generate the missing sizes for you.

You don’t need this plugin if you start building your site with Coollab and you’ll upload all your images with Coollab being activated.

Theme styles not loading properly:

Coollab theme minifies the css and javascripts files. If you are used a service like Cloudflare it may happen that the double minification of the css files causes problems. It's recommended that you only have one minify option turned on for your website.

In this case you should either turn off the css minification via your optimizationn service or enqueue the unminified css file.

Use a child theme and add the following block of code to coollab-child/functions.php:

add_filter( 'pehaathemes_main_stylesheet', 'not_minified_pehaathemes_main_stylesheet', 11 );
function not_minified_pehaathemes_main_stylesheet() {
	return 'style.dev';
}

Google Maps

From June 22, 2016 the Google Maps Javascript API no longer supports keyless access (any request that doesn’t include an API key)

If you want to add a Google Maps you’ll have to create your Google Maps API key to display your google map. To obtain the API key you will have to login to the Google Developers Console (follow this link) (you’ll need to have/create a Google account). You’ll be guided through the process.

Google Developers Console

All you need to provide is some key name (you can set whatever you like, for example My Google Maps) and (optionally) you can input your website’s domain name (add an * in front of it to allow access from both www.domain.com and domain.com).

Click “Create”.

Generate the Api key

Copy your API key and paste into the field in the PHT Page Builder settings. Save Changes. Please note that it can take a few minutes for settings to take effect.

Generate the Api key

Helper Css Classes

Since you can add custom class attributes to your page builder modules we provide a few helper classes:

Text alignment

If you want to align text within your module/column/section:

  • pht-text-center
  • pht-text-left
  • pht-text-right

Margins

To force the bottom/top margins of your module/column:

  • pht-mb  – will force a 24px bottom margin
  • pht-mb0  – will force a 0px bottom margin
  • pht-mt – will force a 24px top margin
  • pht-ml – will force a 24px left margin
  • pht-mr – will force a 24px right margin

Letter Spacing

pht-spacedletters will increase the spacing between letters

Color

  • pht-color - will apply the "brand" color to the text of an element
  • pht-white - will apply the white color to the text of an element
  • pht-bgcolor – will apply the "brand" color to the background
  • pht-bgcolor--desk - will apply the "brand" color to the background on screens that are at least 1024px wide

Thank you. Please don't hesitate to contact us via our themeforest profile page.