Calendify

Template documentation version 1.0

Introduction

First of all, Thank you so much for purchasing this template and for being my loyal customer.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here

Quick Start

Get details about Requirements, Basic Installation, Structure, Color mode, Logo, favicon and loader setup your project with easy steps.

Requirement

This template have required following depandency

  1. PHP 7.2 or greater
  2. OpenSSL PHP Extension
  3. PDO PHP Extension
  4. Mbstring PHP Extension
  5. Tokenizer PHP Extension
  6. XML PHP Extension
  7. Ctype PHP Extension
  8. JSON PHP Extension
  9. GD PHP Extension (or Imagick PHP Extension)
  10. PHP Fileinfo extension
  11. PHP Zip Archive
  12. Rewrite Module (Apache or Nginx)

PHP.INI Requirements

  1. open_basedir must be disabled

File and folder permissions

  1. /bootstrap 775
  2. /storage 775 (recursively)

File Structure

Here is the general File structure of the template:

    laravel
    • app
      • Console
      • Exceptions
      • Helpers
      • Http
        • Controllers
          • Auth
            • Controller.php
            • HomeController.php
        • Middleware
        • Requests
      • Model
      • Provider
      • View
    • bootstrap
    • config
    • database
    • node_modelus
    • public
      • css
      • js
      • images
      • vendor
    • resources
      • css
      • js
      • lang
      • sass
      • views
        • app
        • auth
        • chart
        • components
        • dashboards
        • extrapages
        • forms
        • icons
        • layouts
        • pageError
        • partial
        • table
        • timeline
        • ui
        • dashboard.blade.php
        • welcome.blade.php
    • route
    • tests
    • .editorconfig
    • .env.example
    • .styleci.yml
    • artisan
    • composer.json
    • package.json
    • phpunit.xml
    • README.md
    • server.php
    • webpack.mix.js

Installation

  1. Create Database
  2. Upload the Codes in below directory based on your server
    In Linux
    Path: var/www/html/
    In cPanel:
    Inside File manager -> Path: public_html/
  3. For database settings, open the .env file with a text editor and set your database settings.
    Note: .env is a hidden file, you can see it by opening directory to a text editor.
  4. Link your storage folder to public Run in terminal or CMD: php artisan storage:link
  5. Create Database
  6. Create Database

Steps to be follow for getting started with the template:

laravel

  1. Start command prompt window or terminal and change directory laravel 
    cd laravel
  2. Install node_modules Run in terminal or CMD: 
     npm install
  3. Install vendor Run in terminal or CMD: 
     composer install
  4. To build css and js for Run in terminal or CMD: 
    npm run dev Or npm run build Or npm run watch
  5. Copy .env.example to .env file 
    cp .env.example .env
  6. Generate Key for project in terminal or CMD: 
    php artisan key:artisan

App Configuration

                                                            APP_NAME=your app name
                                                        APP_ENV=production
                                                        APP_KEY=your key
                                                        APP_DEBUG=false
                                                        APP_URL=your app url
  1. Open and edit the /.env file and provide following details:
  2. Enter App name, App env, App debug and App url
    Run in terminal or CMD: php artisan key:generate generate App key

Database Configuration

  1. Create the database on your server
  2. Open and edit the /.env file and provide your server details: 
    3.                                                        DB_CONNECTION=mysql
                                                       DB_HOST=127.0.0.1
                                                       DB_PORT=3306
                                                       DB_DATABASE=laravel
                                                       DB_USERNAME=root
                                                       DB_PASSWORD=
  3. Open and edit the /.env file and provide following details:
  4. Enter App name, App env, App debug and App url
    Run in terminal or CMD: php artisan key:generate generate App key

Mail Configuration

  1. Open and edit the /.env file and provide following details: 
    2.                                                       MAIL_DRIVER=your mail driver
                                                      MAIL_HOST=your mail host
                                                      MAIL_PORT=your mail port
                                                      MAIL_USERNAME=your mail id
                                                      MAIL_PASSWORD=your mail password
                                                      MAIL_ENCRYPTION=your mail encryption
  2. Enter mail host name, mail port, mail username( Mail ID ), mail password and mail encryption type.

Customization

There are some customization like change color, logo, loader, favicon, default mode (dark or light) etc...

Color

Here is the Change color mode Dark/Light in laravel

                                                    If you want to light mode
                                                    <body>

                                                    If you want to Dark mode
                                                    <body class="dark">

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code:

Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply delete below section

For Changing Fonts

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the Style.css in all HTML file. See example below:

To include new font you can simply add another link like this:

HTML Structure

Here is the general layout structure of the template:

                                                 <!DOCTYPE html>
                                                 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
                                                 <head>
                                                    
                                                    
                                                    
                                                   <title >{{ config('app.name', 'Laravel') }}</title>
                                                   @include('partials._head')
                                                 </head>
                                                 </html>
                                                    <body class="" id="app">
                                                    @include('partials._body')
                                                 <body>
                                                 </html>

CSS Structure

Here is the general CSS structure of the template:

Javascript Structure

Here is the general Javascript structure of the template:

                                                
                                            
                                            
                                            
                                            @yield('bottom_script')

Helper classes

For section padding

You can add this helper class to set section padding top 100px and padding bottom 100px.
Add overview-block-ptb class in section tag. See example below: 

                                        <section class="... overview-block-ptb">
                                        [YOUR CONTENT]
                                        

                                        </section>

Note Use this helper class to maintain all page section spacing. You can also use overview-block-pt for only padding top and overview-block-pb for only padding bottom.

For Text color

You can use color in the Text. simply add .main-color ( or any color you want) class where you want to use. See example below: 

                                        <div class="text-primary">
                                        [YOUR TEXT CONTENT]
                                        </div>

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background color

You can use color in the background. simply add .white-bg (or any color you want) class where you want to use. See example below: 

                                        <div class="bg-primary">
                                        [YOUR CONTENT]
                                        </div>

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background Images and pattern

You can use an image in the background with parallax effect by simply adding InlineStyle in div tag and by use of this you can create your own background. See example below: 

                                        <div style="background-image:url(Path); ">
                                        [YOUR CONTENT]
                                        </div>

If your background is small and you want to use repeated background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:

                                        <div style="background-image:url(Path); background-repeat:no-repeat;">
                                        [YOUR CONTENT]
                                        </div>

If you want to use your background like cover or cointainer. You just need to add styling property background-size and set the value cover or cointainer. see the example below:

                                        <div style="background-image:url(Path); background-size:cover;">
                                        [YOUR CONTENT]
                                        </div>

For Background overlay

You can use these .mm-over-black-30, .mm-over-white-20, .mm-over-green-90 classes to any element in your HTML code to apply overlay color on any image or section. See example below:

                                        <div class="mm-over-black-80">
                                        [YOUR CONTENT]
                                        </div>

Structure: .mm-over-{color}-{opacity}. For Example, .mm-over-black-80

Bootstrap Components

For Sliders

There 2 different sliders for you to be used on any page with variety of Options. List of the Sliders:

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Tool

Images



Scripts



CSS & Fonts