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 - PHP 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 HTML5, 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 is a Modern Web Hosting Template using modern and minimal design. It is fully flexible user-friendly and responsive. Hostma Modern template is powered with HTML 5, 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 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 |
├── assets
| ├── css
| ├── iconfonts
| ├── images
| ├── js
| ├── libs
| └── scss
├── layouts
| ├── accept-cookie.php
| ├── footer.php
| ├── header.php
| ├── scripts.php
| ├── sidebar.php
| ├── styles.php
| ├── switcher-icon.php
| └── switcher.php
└── pages
└── (40+ .php pages)
Download and Install the XAMPP from official site https://www.apachefriends.org/download.html
If you have installed XAMPP on your machine then please follow the below steps
1. Launch Xampp and launch the Apache and MySQL servers by clicking the start buttons.
2. Extract the zip folder of the project in the path: EX: C:\xampp\htdocs\ that you have received after purchase.
3. Once the extraction is completed, type the localhost url in the browser to access the project. Example: C:\xampp\htdocs\myproject.
Note : Do not forget to start Apache server and MySQL server
Zanex 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 csss. 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,
Note : If you are using the latest version of Node JS or want to install and use the latest version, click here and install all the dependencies manually that are given below in command prompt.
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 into css:
gulp
Note:- please ensure that you have installed all nodemodules requried to run gulp tasks .
1. In the assets folder you will see css, iconfonts, images, js, plugins and switcher folders
├── assets
| ├── css
| ├── iconfonts
| ├── images
| ├── js
| ├── libs
| └── scss
2. Now you can compile or customize your styles in scss files that are present in the assets folder.
3. Once the changes made in the files in order to apply those changes to your template you need to run the gulp commands in the same terminal or command prompt that you have set your project root path.
4. After Compilation, all your .scss files are converted into .css.
Upload the Project that you have purchased, based on your uploading process on server
├── assets
| ├── css
| ├── iconfonts
| ├── images
| ├── js
| ├── libs
| └── scss
├── layouts
| ├── accept-cookie.php
| ├── footer.php
| ├── header.php
| ├── scripts.php
| ├── sidebar.php
| ├── styles.php
| ├── switcher-icon.php
| └── switcher.php
├── pages
| └── (40+ .php pages)
├── gulpfile.js
├── package-lock.json
└── package.json
If you want to add switcher to your template follow the below process.
Go to root path:
pages open
"All php pages" in that file, below the
body tag switcher path given below.
Switcher path:
Go to root
path: pages open
All php pages in that file, below the
body tag switcher path given below.
Switcher path:
Go to root
path: pages open
All php pages in that file addpicker.js link, below the '../layouts/scripts.php', given below the process.
Add Switcher js:
EX:
<!-- SCRIPTS -->
<?php include '../layouts/scripts.php'; ?>
<!-- PICKER JS -->
<script src="../assets/js/picker.js"></script>
Go To _fonts.scss (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(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 "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, layouts/sidebar.php page open and go through sidebar
section, in that section you will find Bootstrap 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 (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 (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 (assets/js/custom-switcher.js) file
and remove comments for layout-boxed as shown in below
if (!localStorage.getItem("hostmaboxed")) {
// html.setAttribute("data-width" , "boxed") // for boxed style
}
boxed
as shown below
if (!localStorage.getItem("hostmaboxed")) {
html.setAttribute("data-width" , "boxed") // for boxed style
}
Open custom-switcher.js file
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
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 (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 (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