Thank you for choosing Coollab - we truly appreciate that! Before you start setting up your website, please read through this documentation.
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.
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.
Once activated Coollab will display a Welcome Screen sending you to the Coollab Setup page (you can also access it in Appearance > Coollab Setup).
You can choose between installing and activating recommended plugins or installing, activating, configuring for the demo and importing the demo data.
If you choose Install and Activate Plugins the following plugins will be installed and activated:
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:
Coollab theme setup recommends the installation of:
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.
It registers two additional custom widgets and enable the one-click demo installation.
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.
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 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.
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.
One of the popular plugins that manages (multiple) contact forms. It's optional, please feel free to use a contact for of your choice.
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.
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.
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.
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.
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.
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.
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.
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:
You can also decide to capitalize all the headings.
You can set custom colors for:
You can add custom styles here. You might also consider (recommended) using the child-theme stylesheet instead.
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.
On pages and post types with Page Builder activated, you can also opt for the full-width layout, without the header and sidebar.
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.
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.
Sometimes things do not work as they should…
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.
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.
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'; }
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.
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”.
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.
Since you can add custom class attributes to your page builder modules we provide a few helper classes:
If you want to align text within your module/column/section:
To force the bottom/top margins of your module/column:
pht-spacedletters will increase the spacing between letters
Thank you. Please don't hesitate to contact us via our themeforest profile page.