Part A: Mokoala Installation

Awesome Media Gallery is built with Mokoala CMS. For more information, see this guide : Mokoala installation

Simply upload the contents of to the web directory you want to install the site. Once uploaded, visit
http://your_website_url/admin/ to begin the installation wizard.


The first screen you are shown is a check-list that needs to be completed before continuing.

  1. PHP 5.x and MySQL
  2. Various Folder Permissions

Step 1: Database

The next step requires you to enter your MySQL server details. You should create a new database on your server and enter the details on this screen.

Step 2: Site Details

The next step requires you to enter details of your site. It's important that you enter a working email address for the server that you are installing Mokoala on as it will be used for sending emails.

Step 3: Your Account

These will be your administrator account login details. You will use this email and password as your Mokoala login credentials.

Step 4: Summary

The final step is a summary of each step. You can go back and change anything that you have entered, if needed.


And that's it. You are now ready to use your installation of Mokoala!

Visit http://your_website_url to see your awesome gallery live!

Note: If you are having problems during the MK installation, please see the Mokoala Tips Section

Part B: Style your Awesome Media Gallery

The styling for the awesome gallery can be easily changed using CSS. We implemented LESS CSS for even easier control over every element.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. Learn more about LESS on : Less css website

Do not make any changes to Style.CSS or Modal.CSS. You should only change mobile-phone.CSS and mobile-tablet.CSS for any device specific style changes.

Using Style.less

The Style.less file is next to the Style.css file in /CSS. Everytime you change the less file, the css will be recompiled by the server (if you have Development mode enabled).

With exception to the modals, every element in awesome gallery can be changed in the Style.less file. Its ordered fairly neatly, so you should take care of keeping it well organized. In fact, we highly recommend that you make all your changes within the Custom-Style.Less and the Custom-Colors.Less files. This will allow you to more easily integrate our upgrades in the future.

Modify modals with Modal.less

All of the modal styling can be changed within the modal.less file.

Modify Responsive via mobile-phone.css and mobile-tablet.css

To simplify styling for us, while keeping good overall functionality between devices, we decided to use mobile-detect.php along with 2 seperate css files. Beware, they are CSS files, not LESS files. So simply copying over less from style.less will usually not work. By messing in these files, you'll quickly understand how great LESS is compared to regular CSS. Anyways, styling for mobile devices using these CSS files is pretty straight forward.

Setup custom-color.less (OPTIONAL)

We recommend that you turn on custom-colors.less by removing the slashes on line 193 //@import "custom-color.less";, on style.less however you'll have to make sure to delete the 3 last lines of custom-color (we should not have included those @imports; we will fix this in our first update).

The custom-colors less is loaded at the beginning of style.less and its purpose is to overwrite the default colors, rounded corners, and box shadows.

All of the main colors on the pages are linked to one another, and by changing the 2 primary colors in custom-color.less, all page elements will change colors consistently.

Once you tweak the colors a bit, you'll start understanding how it all works. Its quite simple really.

Setup custom-style.less (OPTIONAL)

We started setting up a custom-style.less file, although we didn't quite finish the layout. We recommend that you follow a similar layout styles as in style.less, and place all your new css in there. It will overwrite everything in the main less, because it is loaded after everything in the main less file.

Part C: Setup Social APIs

Social Sign In allows users of existing of social networks to more easily sign into your site using their Facebook, LinkedIn, Google Plus, Windows Live or Yahoo accounts.

Twitter login will be available in version 1.5.

To setup the social logins, visit /admin and go to the Dashboard->Settings->API Keys

However, you must first retrieve the required API keys from each social network:


Default Scope: Make sure to select r_basicprofile and r_emailaddress

Select Permissions-> Select APIs for private user data access -> Social Directory -> Read/Write Public and Private

MS Live:

Create New Project (Verify your Mobile Phone #)
Select API -> Credentials -> Oath -> Create New Client ID -> Enter your website address + replace /oauth2callback with /sign-in.php?platform=google

Register your App
Callback =


Make sure you install the oAuth2 Provider plugin that is included.
Register your Client in the oAuth WP Settings
Redirect URI =

The final step is to enter your App details by navigating to "Dashboard - Settings" in the Mokoala admin and selecting "API Keys" from the right-hand menu and entering your "App ID" & "App Secret" into the corresponding fields.