Thank you for showing interest towards our admin template. Feel free to contact us any time. We have a dedicated team to provide you the best support. If you want any queries open support ticket https://support.spruko.com/.
Hostma - Codeigniter Modern Web Hosting Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using PHP, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.
If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊
Hostma Codeigniter is a Modern Web Hosting Template using modern and minimal design. It is fully flexible user-friendly and responsive. Hostma Codeigniter Modern template is powered with PHP, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 40+ PHP Pages . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. This template using Bootstrap 5 framework. After Purchased this template you will get All PHP Files, CSS, SCSS and JS Files.
It has super clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design template.
It is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices
Once you Purchase Hostma Codeigniter is a Modern Web Hosting Template, you will be able to get free download of all future updates.
Light Theme
Dark Theme
LTR Version
RTL Version
Fullwidth & Boxed
| Dark Theme Ready | RTL Version | Boxed Layout |
| 40+ PHP Pages | Easy to Customize | Bootstrap 5 Responsive Framework |
| 24 * 7 Professional Company Support | Error Page | Under Construction Page |
| Color Theme Support (Primary and Background) | Neat, clean and simple design | W3C Validated |
Note: The clear documentation of PDF is given on How To Run Codeigniter Project In Localhost - For Beginners. Please Check out the PDF before running the project.
Step1: Please visit the Official Web Site of the Composer www.getcomposer.org
Step2: Click on the Download option
Step3: Click on the Composer-Setup.exe you are done with download
Step4: Now Right click on the Composer-Setup.exe file and select Run as administrator click on Yes
Step5: You'll be getting two options click as per your choice
Step6: I choose Recommended option here and if your developer you can check the box of the Developer Mode
Step7: And click on the Next button please make sure of installation path and then click Next
Step8: You'll be asked to enter proxy url please skip the step and click on the Next button
Step9: Please make sure with the PHP Version it should not be less than 8.0v, here we used 8.1.12 Version and then click on the next button
Step10: To confirm that Composer is installed in your system then type Composer in command prompt (if you are using XAMPP then go to C:\xampp\htdocs location and type composer)
Note : This installation is shown based on XAMPP server..
Step1: Open command prompt, find the path of your XAMPP that is installed in your system.
Step2: Set your path as (Example: C:\xampp\htdocs>) in command prompt.
Step3. Now type the following command line to install the CodeIgniter Packages in your "htdocs" folder composer create-project codeigniter4/appstarter my-project and press Enter.
Step4: Now your downloading is started please wait for sometime to download all the necessary dependencies and packages.
Step5: Once you are redirected to the Token (hidden):_ path then you are sucessfully installed CodeIgniter
Step6: You can also download the CodeIgniter framework using this link https://codeigniter.com/download
// Optional: If you want to asscess your index.php file from your root directory.Step7: Once the framework is downloaded you need to make a small changes in index.php file that is located in your public folder.
Step8: Note : If you have any further queries in installation please refer to the official websites Click here
"php spark serve" or "php -S localhost:8080"Note :
Please make sure with your "public $baseURL" (Set
your "public $baseURL" according to your root path)
In your root directory
app/config/app.php open app.php in your editor and set the url
Example: public $baseURL = 'http://localhost:8080';
├── app
├── public
├── tests
├── vendor
├── writable
├── .gitignore
├── builds
├── composer.json
├── composer.lock
├── env
├── LICENCE
├── phpunit.xml.dist
├── preload.php
├── README.md
└── spark
Django comes with power of SCSS. The css files can be generated from scss by simply following below steps:
Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync, optimizing images, etc... We are using gulp which allows to easily compilation of scss to css. You can read it more about it here.
Please follow below steps to install and setup all prerequisites:
Make sure to have the Node.js installed & running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,
Make sure to have the Gulp installed &
running in your computer. If you have already installed gulp on your computer, you can skip
this step. In order to install, just run command npm install -g gulp from
your terminal.
After Completion of gulp Install. open gulpfile.js And install the "Declaration of gulp variables" in your command promt. In order to install, just run command npm install gulp, npm install gulp-sass,
npm install gulp-postcss, npm install autoprefixer, npm install gulp-sourcemaps, npm install browser-sync,
npm install gulp-cssbeautify
npm install gulp-beautify from your terminal.
Make sure to have all above prerequisites installed & running in your computer. If you want to install more variables for your template, just declare the variables in gulpfile.js after that run in command promt
To setup, follow below mentioned steps:
Make sure to have all above prerequisites installed & running in your computer
Open your terminal, go to your folder and enter the command npm install. This
would install all required dependencies in node_modules folder.
After you finished with above steps, you can run the command to compile scss files into css:
gulp
Here we provided package.json and gulpfile.js files in your project, you just need to run npm install in your terminal in your project root path.
After compilation of download, you can compile your SCSS files into CSS files by following below procedure.
| Command | Description |
|---|---|
gulp watch
|
In Noa template gulp watch command is used for, whatever the changes made in scss files, will watch and compiled into css files.
|
If you have installed XAMPP on your machine then please follow the below steps
1. Download and Install the Composer from official site https://getcomposer.org/
2. Install CodeIgniter by using Composer as mentioned in the installation process above.
1. After installing your CodeIgniter, Open Xampp and click on the start button on the Apache server and MySQL server
2. Extract the zip file of CodeIgniter project that you received.
3. Please set your public $baseURL before going to run your project, go to /app/Config/app.php Example: public $baseURL = 'http://localhost:8080'; and set your project path in command prompt.
4. If your project is placed in Local Server, Example: C:\xampp\htdocs\myprojectfolder
5. If your project is placed in Desktop, Example: cd C:\Users\Admin\Desktop\myprojectfolder
6. Now run the command line: "php spark serve" or "php -S localhost:8080"
7. Your CodeIgniter PHP Development Server as been started (http://localhost:8080)
8. Copy the url and past it in your favorite browser
Upload the Project that you have purchased in below directory based on your server
├── app/
| ├── Config
| | ├── Routes.php
| ├── Controllers
| | ├── Pages.php
| ├── Database
| ├── Filters
| ├── Helpers
| ├── Language
| ├── Libraries
| ├── Models
| ├── ThirdParty
| ├── Views
| | ├── errors
| | ├── layouts
| | | ├── components
| | | | ├── accept-cookie.php
| | | | ├── custom-scripts.php
| | | | ├── custom-scripts2.php
| | | | ├── custom-scripts.php
| | | | ├── custom-styles.php
| | | | ├── footer.php
| | | | ├── header.php
| | | | ├── scripts.php
| | | | ├── sidebar.php
| | | | ├── styles.php
| | | | ├── switcher-icon.php
| | | | ├── switcher-scripts.php
| | | | ├── switcher-styles.php
| | | | ├── switcher.php
| | | ├── custom-main.php
| | | ├── custom-main2.php
| | | ├── custom-main3.php
| | | ├── main.php
| | | ├── switcher-main.php
| | ├── pages
| | | ├── 40+ php files
| ├── .htaccess
| ├── Common.php
| └── index.html
├── public/
| ├── assets/
| | ├── css
| | ├── icon-fonts
| | ├── images
| | ├── js
| | ├── libs
| | ├── scss
| ├── .htaccess
| ├── .favicon.ico
| ├── index.php
| ├── robots.txt
├── tests
├── vendor
├── writable
├── .env
├── .gitignore
├── .htaccess
├── builds
├── composer.json
├── composer.lock
├── env
├── gulpfile
├── LICENCE
├── package-lock.json
├── package.json
├── phpunit.xml.dist
├── preload.php
├── README.md
└── spark
If you want to add switcher to your template follow the below process.
Go to root path:
app/views/layouts/components/ open
"scripts.php" file and add picker.js link as shown below.
Add Picker JS:
<!-- PICKER JS -->
<script src="<?php echo base_url('assets/js/picker.js'); ?>"></script>
Go to root path:
app/views/layouts/ open
"main.php" in that file, below the body tag, include the switcher path given below.
Switcher path:
Go to root path:
app/views/layouts/ open
"main.php" in that file, below the body tag, include the switcher-icon path given below.
Switcher-Icon path:
Go to root path:
app/views/layouts/components/ open "custom-scripts.php" and "custom-scripts2.php" files, add the picker.js link as shown below.
custom-scripts.php :-
Add Picker JS:
<!-- PICKER JS -->
<script src="<?php echo base_url('assets/js/picker.js'); ?>"></script>
custom-scripts2.php :-
Add Picker JS:
<!-- PICKER JS -->
<script src="<?php echo base_url('assets/js/picker.js'); ?>"></script>
Go to root path:
app/views/layouts/ open
"custom-main.php", "custom-main2.php", and "custom-main3.php" in that files, below the body tag, include the switcher path given below.
Switcher Path:
Go to root path:
app/views/layouts/ open
"custom-main.php", "custom-main2.php", and "custom-main3.php" in that files, below the body tag, include the switcher-icon path given below.
Switcher-icon Path:
Go To _fonts.scss (public/assets/scss/style.scss )
if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file
And paste Your Selected font-family in _style.scss
And add the Your Selected font-family in _customs.scss(public/assets/scss/custom/_customs.scss)
body {
font-size: 1rem;
font-family: "Hind Siliguri", sans-serif;
font-weight: 400;
color: #{$color};
background-color: #{$background};
line-height: 1.5;
text-align: start;
overflow-x: clip;
padding: 0;
margin: 0;
}
Note : After Changing font you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.
Go To "public/assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.
To change Menu icons, Go to Root Path: Views/Shared/Layouts/ and open
_sidebar.cshtml, in that section you will find feather icons of menu in i
tag, there you can replace previous icon with your icon. Example as shown in below
To enable RTL Version you have to open custom-switcher.js (public/assets/js/custom-switcher.js) file
and remove comments for rtl as shown in below
//RTL
if (!localStorage.getItem("hostmartl")) {
// html.setAttribute("dir" , "rtl") // for rtl version
}
rtl as shown
below
//RTL
if (!localStorage.getItem("hostmartl")) {
html.setAttribute("dir" , "rtl") // for rtl version
}
To enable Dark Theme you have to open custom-switcher.js (public/assets/js/custom-switcher.js) file
and remove comments for dark-mode as shown in below
//Dark Theme Style
if (!localStorage.getItem("hostmadarktheme")) {
// html.setAttribute("data-theme-mode" , "dark") // for dark theme
}
dark-mode as
shown below
//Dark Theme Style
if (!localStorage.getItem("hostmadarktheme")) {
html.setAttribute("data-theme-mode" , "dark") // for dark theme
}
To enable Boxed you have to open custom-switcher.js (public/assets/js/custom-switcher.js) file
and remove comments for layout-boxed as shown in below
//Boxed Style
if (!localStorage.getItem("hostmaboxed")) {
// html.setAttribute("data-width" , "boxed") // for boxed style
}
boxed
as shown below
//Boxed Style
if (!localStorage.getItem("hostmaboxed")) {
html.setAttribute("data-width" , "boxed") // for boxed style
}
Open custom-switcher.js file
public/assets/js/custom-switcher.js
To clear LocalStorage loading functions you need to remove localStorageBackup() function in custom-switcher.js as shown below
function localStorageBackup() {
}
To remove complete LocalStorage saving you need to remove all
localstorage related calling functions in custom-switcher.js
public/assets/js/custom-switcher.js files.
LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear. Below are the some examples to find out.
localStorage.setItem("hostmadarktheme", true);
localStorage.removeItem("hostmalighttheme");
localStorage.getItem('hostmaboxed')
localStorage.clear();
localStorageBackup();
To change Primary Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (public/assets/scss/_variables.scss )
Note : After Changing font you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.
If you want to change Dark Theme color you need to follow the below process.
To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (public/assets/scss/_variables.scss )
Note : After Changing font you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.
| Plugins | Versions | URL |
|---|---|---|
| Bootstrap | v5.2.2 | https://www.npmjs.com/package/bootstrap |
| Choices js | v7.0.0 | https://www.npmjs.com/package/choices.js |
| Swiper js | v8.4.4 | https://www.npmjs.com/package/swiper |
| Icons | References |
|---|---|
| Font Awesome | https://fontawesome.com/v4.7.0/icons/ |
| Feather Icons | https://feathericons.com/ |
| Tabler Icons | https://tabler-icons.io/ |
| Bootstrap Icons | https://icons.getbootstrap.com/ |
| Images | References |
|---|---|
| Vecteezy | https://www.vecteezy.com/ |
| Iconscount | https://iconscout.com/ |
| Unsplash | https://unsplash.com/ |
| Bootstrap Icons | https://icons.getbootstrap.com/ |
Google fonts are used in the template. They are as follows: Google Fonts