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
Get details about Requirements, Basic Installation, Structure, Color mode, Logo, favicon and loader setup your project with easy steps.
This template have required following depandency
PHP.INI Requirements
File and folder permissions
Here is the general File structure of the template:
Steps to be follow for getting started with the template:
cd laravel
npm install
composer install
npm run dev Or npm run build Or npm run watch
cp .env.example .env
php artisan key:artisan
APP_NAME=your app name APP_ENV=production APP_KEY=your key APP_DEBUG=false APP_URL=your app url
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=
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
There are some customization like change logo, loader, favicon, default mode (dark or light) etc...
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:
<link rel="shortcut icon" href="images/favicon.ico"/>
Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply delete below section
<div id="loading"> <div id="loading-center"> </div> </div>
The Logo Container can be found in the Header Container - #header. Replace "logo.png" with your own logo image URL.
<ul type="none" class="menu-logo"> <li> <a href="index.html"> <img src="../assets/images/logo.png" alt="logo"> </a> </li> </ul>
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:
<!-- google font --> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700,800|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">
To include new font you can simply add another link like this:
<!-- google font --> <!--Robaoto font --> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap" /> <!--"Nunito",sans-serif font --> <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600&display=swap" rel="stylesheet" >
Here is the general layout structure of the template: for dashboard
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> @include('partials.dashboard._head') </head> <body> @include('partials.dashboard._body') </body> </html>
Here is the general layout structure of the template: for frontend
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> @include('partials.frontend._head') </head> <body> @include('partials.frontend._body') </body> </html>
Here is the general CSS structure of the template for dashboard:
<link rel="shortcut icon" href="{{ asset('dashboard/images/favicon.ico') }}"/> <link rel="stylesheet" href="{{ asset('dashboard/css/bootstrap.min.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/dark.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/developer.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/dataTables.bootstrap4.min.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/dripicons.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/flatpickr.min.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/fontawesome.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/ionicons.min.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/line-awesome.min.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/owl.carousel.min.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/magnific-popup.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/remixicon.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/responsive.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/select2-bootstrap4.min.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/select2.min.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/slick-theme.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/style.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/typography.css') }}" /> <link rel="stylesheet" href="{{ asset('dashboard/css/variable.css') }}" />
Here is the general CSS structure of the template for frontend:
<link rel="shortcut icon" href="{{ asset('frontend/images/favicon.ico') }}"/> <link rel="stylesheet" href="{{ asset('frontend/css/flatpickr.min.css') }}"/> <link rel="stylesheet" href="{{ asset('frontend/css/bootstrap.min.css') }}"/> <link rel="stylesheet" href="{{ asset('frontend/css/all.min.css')}}"/> <link rel="stylesheet" href="{{ asset('frontend/css/animate.min.css') }}"/> <link rel="stylesheet" href="{{ asset('frontend/css/remixicon.css') }}"/> <link rel="stylesheet" href="{{ asset('frontend/css/magnific-popup.css') }}"/> <link rel='stylesheet' href="{{ asset('frontend/css/dark.css') }}"/> <link rel='stylesheet' href="{{ asset('frontend/css/owl.carousel.min.css') }}"/> <link rel='stylesheet' href="{{ asset('frontend/css/select2-bootstrap4.min.css') }}" /> <link rel='stylesheet' href="{{ asset('frontend/css/select2.min.css') }}" /> <link rel='stylesheet' href="{{ asset('frontend/css/slick-animation.css') }}" /> <link rel='stylesheet' href="{{ asset('frontend/css/slick-theme.css') }}" /> <link rel='stylesheet' href="{{ asset('frontend/css/slick.css') }}" /> <link rel='stylesheet' href="{{ asset('frontend/css/typography.css') }}" /> <link rel='stylesheet' href="{{ asset('frontend/css/style.css') }}" /> <link rel='stylesheet' href="{{ asset('frontend/css/responsive.css') }}" /> <link rel='stylesheet' href="{{ asset('frontend/css/variable.css') }}" />
Here is the general Javascript structure of the template for dashboard:
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="{{ asset('dashboard/js/jquery.min.js')}}"></script> <script src="{{ asset('dashboard/js/popper.min.js')}}"></script> <script src="{{ asset('dashboard/js/bootstrap.min.js')}}"></script> <script src="{{ asset('dashboard/js/jquery.dataTables.min.js')}}"></script> <script src="{{ asset('dashboard/js/dataTables.bootstrap4.min.js')}}"></script> <!-- Appear JavaScript --> <script src="{{ asset('dashboard/js/jquery.appear.js')}}"></script> <!-- Countdown JavaScript --> <script src="{{ asset('dashboard/js/countdown.min.js')}}"></script> <!--Select2 JavaScript --> {{-- <script src="{{ asset('dashboard/js/flatpickr.min.js')}}"></script> --}} <script src="{{ asset('dashboard/js/select2.min.js')}}"></script> <!-- Counterup JavaScript --> <script src="{{ asset('dashboard/js/waypoints.min.js')}}"></script> <script src="{{ asset('dashboard/js/jquery.counterup.min.js')}}"></script> <!-- Wow JavaScript --> <script src="{{ asset('dashboard/js/wow.min.js')}}"></script> <!-- Slick JavaScript --> <script src="{{ asset('dashboard/js/slick.min.js')}}"></script> <!-- Owl Carousel JavaScript --> <script src="{{ asset('dashboard/js/owl.carousel.min.js')}}"></script> <!-- Magnific Popup JavaScript --> <script src="{{ asset('dashboard/js/jquery.magnific-popup.min.js')}}"></script> <!-- Smooth Scrollbar JavaScript --> <script src="{{ asset('dashboard/js/smooth-scrollbar.js')}}"></script> <!--Apex JavaScript --> <script src="{{ asset('dashboard/js/apexcharts.js')}}"></script> <!-- Chart Custom JavaScript --> <script src="{{ asset('dashboard/js/chart-custom.js')}}"></script> <!-- Custom JavaScript --> <script src="{{ asset('dashboard/js/custom.js')}}"></script>
Here is the general Javascript structure of the template for frontend:
<!-- app JavaScript --> {{-- <script src="{{asset('/js/app.js')}}"></script> --}} <script src="{{asset('frontend/js/jquery-3.4.1.min.js')}}"></script> <script src="{{asset('frontend/js/flatpickr.min.js')}}"></script> <!-- jQuery, Popper JS --> <script src="{{asset('frontend/js/popper.min.js')}}"></script> <!-- Bootstrap JS --> <script src="{{asset('frontend/js/bootstrap.min.js')}}"></script> <!-- Slick JS --> <script src="{{asset('frontend/js/slick.min.js')}}"></script> <!-- owl carousel Js --> <script src="{{asset('frontend/js/owl.carousel.min.js')}}"></script> <!-- select2 Js --> <script src="{{asset('frontend/js/select2.min.js')}}"></script> <!-- Magnific Popup--> <script src="{{asset('frontend/js/jquery.magnific-popup.min.js')}}"></script> <!-- Slick Animation--> <script src="{{asset('frontend/js/slick-animation.min.js')}}"></script> <!-- Custom JS--> <script src="{{asset('frontend/js/custom.js')}}"></script>
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.
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.
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>
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>
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
There 2 different sliders for you to be used on any page with variety of Options. List of the Sliders:
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.
Code released under the themeforst Reguler License and Extended License.
For more information about copyright and license check iqonic.design.
