Welcome

First of all, Thank you so much for purchasing this item. You are really awesome! You are entitled to get free lifetime updates to this product and support from the - Themetags team directly.

Installation

We have used HTML, CSS and JS to develop the template. There is nothing to install. Just unzip the template and use it. Enjoy!

Configurations

We have used HTML, CSS and JS to develop the template. There is nothing to configure. Just unzip the template and use it. Enjoy!

How to make live?

• Download the item from Envato and unzip it.
• Upload the hostlar.zip under the HTML Template folder to your hosting webroot.
• Unzip hostlar.zip and browse from your domain: yourdomain.com
• To install the WHMCS template, check the WHMCS installation part below.

Template folder structure

Item Folder

Template customize and edit

Head

HTML structure

Changing title, favicon

You can update title, favicon font and also OG info with SEO meta description.

Title

In this head section you can find the title tag. Just replace the text on title tag.

favicon

If you replace the favicon.png image or icon on img folder then favicon will automatically update.

Header

In this header part, we put the main menu and the topbar menu. We have two types of header white header with color logo and Transparent header with white logo both headers has included with topbar. For a transparent header just .white-bg class with .bg-transparent class name.

Logo Setting

The Logo you can be found in the nav tag on header menu container. Change the logo path for Transparent header.

Main body content

When you will use a white header with a color logo then you should use .main-with-padding class in this main body content wrap, and when you will use Transparent header with white logo then you should use .main-without-padding class in this main body content wrap.

For white header body content wrap

For white header body content wrap

Image and background image

HostLar download package does not contain images that are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace the placeholder image URL with your image URL like img/your-image.jpg or img/your-image.svg or img/your-image.png

*We only included SVG images it's MIT license Open-source illustrations for every project you can use it.

For image

For background image

When you use background image then you should follow bellow structure .gradient-overlay need to call on parent div

Header Menu Item

You can find the menu inside the nav tag on header section. In this menu items you can see every parent li is commented like home start, pages start, hosting start etc.

Hero section

We have different hero section please check different demos. Here is index.html hero section included

Background Video section

We have a background call to action section please check the demo Home background video or index-bg-video.html

Promo section

VPS slider configuration

In HTML: 

Check the below values: data-slider-max="12". Maximum slide value will be 12 data-slider-step="1". If we scroll then it will increase only 1 per step data-slider-value="6". Default value is 6 for the demo data-currency="$". Currency sign is $

Change the value according to your plan but you need to change according to your need in JS file as well.

In JS (assets/js/app.js):

We have added our plans in the vpsPriceInfo . Default core value is 6 that we set in the HTML. We have added details like CPU core, memory, storage, bandwidth, price and order link in a plan. We have total 12 plans. Based on the vpsCore value, we change the other values. Check the rest of the code if you need to change:

How to counting or coming soon page

We have used two types of countdown one for coming soon another one for the black Friday offer page

1. Coming Soon Page

Under the pages on main menu you can find coming soon page. Go to js file and select app.js open it and find bellow code change this date 2022/01/30

2. Black Friday Offer Page

Go to the app.js file under the js folder then find this line "set_time = "December 30, 2022 00:00:00";"

You can control your offer countdown from here. Just set your date like "December 30, 2022" . 

How to change chat url or script

Go to the app.js file under the js folder then open it and find bellow code, change this URL with your talk to URL https://embed.tawk.to/5e19bb9b27773e0d832d0621/default

Note For this chat you should create a Talk To account. After creating this account you can create your own chat script like the below code. you can replace all code or change that URL. It's very easy to use and manageable.

Footer

footer tag contain footer section. in this footer section has trusted logo, footer menu, copyright and payment method.

How to remove talk to chat

Go to your app.js file in js folder find this talk to js script then remove it.

// 18. chat api js
var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
(function () {
    var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
    s1.async = true;
    s1.src = 'https://embed.tawk.to/5e19bb9b27773e0d832d0621/default';
    s1.charset = 'UTF-8';
    s1.setAttribute('crossorigin', '*');
    s0.parentNode.insertBefore(s1, s0);
})();

WHMCS template installation

How to install WHMCS template

We have Standard, Professional and Slim WHMCS templates design with orderform. If you want to use hostlar professional whmcs template then we need to follow the below steps to complete the template installation completely

1. Add the hostlar-standard and hostlar-standard-rtl to the templates folder

2. Add the hostlar-standard orderform to the orderforms folder

3. Add hooks to hooks folder

4. Add language to the language folder

5. Configure your price from WHMCS admin panel

6. Change the default WHMCS template and orderform from admin panel

WHMCS Template folder

Add the hostlar-standard and hostlar-standard-rtl to the templates folder

• Go to the path:  /<your-public-root-directory>/whmcs/templates
• Upload the hostlar-standard and hostlar-standard-rtl templates here or other templates if you want 
• Unzip the hostlar-standard and hostlar-standard-rtl template folders
• View this screenshot:

Add Orderforms

Add the hostlar_standard orderform to the orderforms folder

• Go to the path: /<your-public-root-directory>/whmcs/templates/orderforms
• Upload the hostlar-standard orderform here 
• Unzip the hostlar_standard orderform folder if you have the zip version
• Add the hostlar_standard folder

Add hooks to hooks folder

Add the hooks file in the hooks folder

• Go to the path: /<your-public-root-directory>/whmcs/includes/hooks
• Upload all files under the hooks to the hooks folder
• Check the screenshot:

Add language

Add language to the lang folder

• Got to the path: /<your-public-root-directory>/whmcs/lang
• Add the english.php file from the lang folder
• Check the screenshot:

Change Default Template and Orderforms

Change the default WHMCS template and orderform from the admin panel. We can change our template and orderform from General setting but we can also set different orderform from the product group.

Change the default template from the general setting:

Click the setup menu>got to the general settings>general

Change the default Orderform from General setting:

In this General settings click the tab Ordering then you can see the different types of orderform template. Now select the Hostlar Standard. Check the below image:

After selecting this then click on the Save Change button.

Configure your price

Configure your product or price from WHMCS admin panel

First of all, login your whmcs admin panel then got to setup > products/services > products/services and follow the steps:

I hope you have already created product group name and under the group you have created single product package. If you don't have this package then you should create first. Then edit the single product package like bellow images:

Click the edit icon then you can see this bellow image. Copy this code and paste in the product description field like bellow image. You have to change the text or value based on your plan and follow for rest of the plan and product.

Change cart link from Domain Result Page

Open the domain-search-result.php file and find the below code around line number 916.

Change http://themetags.net/whmcs  with your WHMCS base URL.

How to manage home page Product Price

In this Hooks folder you will get two php file "products.php" and "pricetable.php" . Home page product price manage from those files.

Now go to your template folder open header.tpl file then you can see bellow section for product price.

How to change WHMCS template logo

If you have 2 different logos such as a colorful and white version, follow the below steps:

1. Rename your colorful logo with "logo-primary.png". We are saying it is the primary logo.

2. Rename your other logo with "logo-secondary.png". We are saying it is the secondary logo.

3. Upload logo-primary.png and logo-secondary.png logo to "templates/{your template}/img/" folder

If you want to use a different name then rename the logo with your name and upload it to the img folder (step#3). Also, you need to change the logo name in the template where we have used the logo. You will find: <your template>/includes/logo.tpl file.

How to setup WHMCS Multi-Currency?

Go to your admin panel then click the setting icon right side of the navbar. Then type "currencies" on the search box, then click on it. check this bellow image-

After clicking it, now you need to add your currency like this-

Need to fill up the currency code, Prefix, Format and Base Conv. Rate. We need this currency code in the currency hook file. Now click the Add Currency button.

What do we need to do for the multiple currency support?

1.  Need to add currency from here. The currency code is BDT.
2.  Add the currency code and flag in the currency hook
3.  Add the domain price for your currency
4.  Add the product/ service price for your currency

Configure Domain and Product Price For Multi-Currency

For multi-currency domain price configuration:

Go to do admin panel click the setting icon right side of the navbar then go to the domain price option like the bellow image.

After click domain pricing then you will go to the domain price-setting option. After clicking the pricing button domain then open a popup option now you can set your multi-currency price value. Check bellow image
NB: This option available after enabled the multi-currency option.

For multi-currency product, price configure:

Go to the product/services configure option then click the edit icon. check this image

After clicking the product edit option then click the price tab on the tab option bar. Check the image below. 

NB: This option will be available after enabled the multi-currency option.

How to add favicon

At first, add your favicon image in your templates/{your template name}/img folder. Make sure your favicon name will be favicon.png and height, the weight keeps the same like 80x80.

Configure WHMCS Hooks

We have customized 4 types of sections or blocks using WHMCS hooks. Go to the Hooks folder then you can see the bellow .php files:

1. Menu (menu.php)

2. Domain Price (pricetable.php)

3. Home Page Product price (products.php)

4. Client Area overdue message  (clientAreaPanel.php)

5. Multi-currency support (currency.php)

1. Menu (menu.php)

We have customized the menu using the bellow function on menu.php in the hooks folder. 

For more details: https://docs.whmcs.com/Editing_Client_Area_Menus

2. Domain Price (pricetable.php)

In the hero section, we have added domain lists like .com, .net, .org, etc, with a price. We have managed the domain price list from the pricetable.php hook file.

here is the pricetable.php file

Before that, you need to make sure that you have set the domain price from your admin panel. Go to Setup>Products/Services>Domain Pricing. Check the below image:

Click the pricing and set the domain price.

3. Managed Hosting Price in Home Page (products.php)

We have the hosting or product price on the home page. We have managed by the hooks (products.php).

In this products.php file, you can see homepage_products_hook function ->where('tblproducts.gid','1'). This line manages which product group price show in the home page. Number '1' is the product group id.

How to find out product group id number:

Go to your WHMCS admin panel then Setup>Products/Services>Products/Services

If you mouse hover over on group icon then you can see the product group id.

Go to the products.php file in the hooks folder then replace that group id with your product group id. 

After updating the products.php file, you will see that product group price on the home page like below depending on your configuration.