OKDate

Documentation

MyOKDate

Thank you very much for purchasing my item.

This documentation will help you to understand how to install or to customize your OKDate Website. If something is not clear here, don't hesitate to send me an email from my CodeCanyon profile page and I will be glad to help you.
Documentation Summary

1. Installation

Folders Included

When you download OKDate on CodeCanyon, you get a zip folder which contains two other folders in it :

  • The Files Folder which contains the main files that you need to put on your server.
  • The Documentation Folder which contains the documentation you are actually reading.


How to Install OKDate on my Website ?

The installation of OKDate is not difficult at all. However, to be sure that all will be ok, I really recommend you to read at least this part of the guide entirely.
Transfer the files to your server

First of all, once you have downloaded the zip file on CodeCanyon, just extract it where you want on your computer. In the "Files" folder, you should have "something" like that (yeah, something, because the OKDate script will be updated and some directories could have changed) :

Help


Now, you will just have to put these files on your server. To do that, you need a FTP software. I really recommend you to download FileZilla if you don't already have it (it works on Mac, Windows and Linux). When you will have installed it, find your FTP informations and put them into FileZilla, just like that :

Help


Now, you should be connected and you can drag and drop the OKDate files (the ones from the "Files" folder) where you want on your server.

Put the good URL

- Open the file application/config/config.php and at the line 20 replace the current URL by your domain URL.
- If and only if you use the OKDate script not on the root path of your website (for example, if you use it on an url like "http://something.com/subfolder/" or "http://something.com/subfolder/subfolder"), locate and open the file "htaccess" with a text editor (Windows Notepad or TextEdit on Mac) and find the following line :

Help

... and add the subfolder(s) where your website is hosted just after the "/". For example, if you use it on an url like "http://something.com/subfolder/", update this line with the following :

Help


Once you have done all of that, we are ready to launch the install script. To do that, just go to the URL where you hosted the OKDate files and you should see this :

Upload the SQL file

Log into your PhpMyAdmin and import the okdate.sql file located in the folder "Files". You have to create the database first.

Database Connection

Open the file application/config/database.php and edit the following lines with your database informations :

Help



Folder Permissions

The last part of the installation now is to set the good permissions on the folders where the photos will be uploaded. You can do that with FileZilla : just go to the path where you installed OKDate and right click (in FileZilla) on the uploads folder and select the option named file permissions :

Help


Then, in the Numeric Value field, put the number 775, check the Recurse into subdirectories checkbox and click on the "OK" button to save these settings. Sometimes, the write permissions are set to 777... So if you have some troubles when you upload something, just change this number to 777 :

Help



You can smile now, your OKDate website should be working fine! To verify, go to the URL where you installed the OKDate folders, you should see the page without any errors.

2. Configuration Now, we can customize your new website :-) .

Create an admin account

To help you to configure OKDate, there is a complete admin panel where you can configure everything easily. To get an access to the admin panel, create a "normal" account on your new website. The first created account gets the admin access by default. Once registered and logged in, you should see the Admin link in the navbar :

Help


Admin Parts

In the admin area of OKDate, you have a lot of settings that you can edit in order to make the website of your dreams! I really recommend you to navigate between each pages and to try the options by yourself... But here are more explanations about these pages :

  • Dashboard : This is the shortcut page to the other parts of the admin area. It also gives you a quick view on some stats of your website.
  • Settings : You can change the name, the description, the shortname and the general colors of the website in this page. You can also paste your Analytics code which will be added on all the pages of your website.
  • Manage Users : This page gives you an access to all the profiles of the users. You can edit or delete them.
  • Reported Users : This page allows you to see all the profiles of the reported users.
  • Manage Premium : On this page, you can enable the premium system. If enabled, users will have to pay to get access to premium features. You can choose between Paypal or Stripe (or both) and the price of the items. You have to configure Stripe and Paypal, to do this, please read the next part of this documentation.
  • Manage Ads : You can copy / paste your ad code (Adsense for example) which will be displayed on all the pages of your website. I really recommend you to select a responsive horizontal ad block so it will also be displayed on mobiles and tablets.
  • Social Profiles : You can copy / paste your social profiles links and it will show a social icon on the website.

Configure Payments Methods

In the admin part, you have a page called "Manage Premium". If you choose to enable the premium features, users will have to pay the price you give (in $ for the coins) to get access to them. You can use PayPal or / and Stripe as payments methods and here is a guide to configure them.

PayPal

To enable Paypal as the payment system, you have to retrieve an API username, an API password and an API signature. Follow these steps to get them :

  1. Log in to your PayPal Business account. If you don't already have one, it's time to create one.
  2. Click the Tools tab.
  3. Click the Api credentials icon. If you haven't already done so, you need to verify your account before requesting API credentials.
  4. Click Request API credentials.
  5. Click "View API signature" under Option 2.
  6. Click Request API Credentials.
  7. Click Request API signature.
  8. Click Agree and Submit.
  9. Copy and paste the API username, password, and signature into your Paypal Settings, in the "Manage Payments" of the admin area in your website.
Save after setting a price for the product. Now you will receive payments in Paypal once a user pays for the item.

Stripe

To enable Stripe as the payment system, you have to retrieve a secret key and a publishable key. Follow these steps to get them :

  1. Log in to your Stripe account. If you don't already have one, create an account here.
  2. Once logged in, be sure that the top "switch" is set on "live", just like this :



  3. Click on "Account Settings" :



  4. Click on the "API keys" tab.
  5. Copy your Live secret key and publishable key to your Stripe Settings in the Manage Payments page of the admin area.
Save after setting a price for the product. Now you will receive payments in Stripe once a user pays for the item.


Customize the login / welcome page

The login / welcome page is the one unlogged users see when they arrive on your website. Here is a little guide to edit the texts, colors and icons.

Edit the Texts

  1. To edit the default texts "Join the Best Dating Website" and "And meet awesome people in the world", open the file "application/views/welcome.php". At the lines 20 and 21, you can edit these texts.
  2. To edit the default texts of the second part of the welcome page, still in the file "application/views/welcome.php", edit the texts between the lines 110 and 143.


Edit the Colors
  1. To edit the blue of the first part of the welcome page, open the file "css/style.css" and at the line 396, for the CSS class "firstpartheader", edit the color code for the one you want.
  2. To edit the blue button of the first part of the welcome page, open the file "css/style.css" and at the line 500, for the CSS class "btn-primary", edit the color codes for the ones you want.
  3. To edit the orange button of the first part of the welcome page, open the file "css/style.css" and at the line 514, for the CSS class "btn-warning", edit the color codes for the ones you want.


Edit the Icons

To edit the three icons of the second part of the welcome page, open the file "application/views/welcome.php". The icons use the library "Font-Awesome", the three icons are located between the lines 112 and 142 and have the CSS class "fa-users", "fa-user-plus" and "fa-comments" by default. To change the icons, go to the font awesome page and copy / paste the new CSS classes of the desired icons instead of the default ones.


Languages & Internationalization

Since the version 1.6 of OKDate, you can manage languages and translate all the script really easily. In this part, I will explain you how to create your own language to use on OKDate and how to edit the words & sentences.

Create your Language Files

Each language is represented by a folder in "system/language/" of your OKDate script. If you want to use, for example "french" as the main language, you need to duplicate the "english" folder in the directory "system/language/", which will gives you something like that :



Then, you just need to update the strings of the files forum_lang.php, pm_lang.php, premium_lang.php, site_lang.php and user_lang.php of your new created language directory.

Finally, go to the admin area of your OKDate website, under "Manage Languages". You'll be able to assign a new default language and to create language redirections depending on the user's country.


3. Credits I wanted to put a little part in this documentation to let you know what are the plugin I used to create OKDate and also to thank the guys who made them for free.

  • CodeIgniter which is the awesome PHP framework which is used to run OKDate. If you are a PHP developer, I really recommend you to give it a try!
  • Bootstrap 3 is a well known "front-end library" used to make a website responsive easily.
  • Animate.css is the CSS library used along with the jQuery plugin Wow.js for the animations.
  • FontAwesome is the cool icons library used everywhere in the OKDate theme.

4. Help & Support Sometimes, you can have some issues installing OKDate. If that's the case, first of all, please read the FAQ located here to be sure that your question is not already answered. If that's not the case or if you need help with some features, you can send me a message on my CodeCanyon profile page. I generally answer to my messages in less than 48 hours.
If you find my plugin cool and useful, please don't forget to rate it with 5 stars on CodeCanyon :


You can also follow me on CodeCanyon or on Twitter to never miss any of my items or updates.
Thank you very much


Axel Hardy

MyOKDate