Hybrid Design With ♥ by inebur

General Structure

Nav Menu

Lets begin. Open the "header.html" file and follow the steps. Remember! To customize the Navbar according to your liking and style, just go to whmcs -> templates -> horn -> assets -> layout -> menu.tpl


<div class="nav-menu-title">
  <span class="icony">{$LANG.clientareanavservices}</span>
</div>
<li data-username="Home" class="nav-item">
  <a href="{$WEB_ROOT}/clientarea.php">
    <span class="icony">
      <img class="svg" src="templates/{$template}/assets/fonts/icohorn/home.svg">
    </span>
    <span class="sideinfo">{$LANG.clientareanavhome}</span>
  </a>
</li>
<li data-username="store" class="nav-item hasmenu">
  <ul class="submenu">
    Content...
  </ul>
</li>

Plans

To customize the plans section, go to whmcs -> templates -> horn -> assets -> layouts -> sections -> plans.tpl.
You can add, edit or delete the any plans you want. Each plan are commented to help you on customization.


<div class="container-fluid main-fluid bottom-sec">
  <div class="row">
    <div class="col-md-12">
      <div class="main-title center-text">
        <h2>{$LANG.cloudSlider.selectProductLevel}<h2>
        <p>{$LANG.upgradechoosepackage}<p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      Content Plan..
    </div>
  </div>
</div>

Features

To customize the features boxs section, go to whmcs -> templates -> horn -> assets -> layouts -> sections -> features.tpl. You can add, edit or delete the any boxs you want. Each box are commented to help you on customization.


<div class="fetures-section container-fluid main-fluid">
  <div class="main-title center-text">
    <h2>{$LANG.store.sitelockvpn.world.features.title}..<h2>
    <p>class="withandspan">{$LANG.store.sitelockvpn.plans.features.allInclude}:<p>
  </div>
  <div class="row">
    <div class="col-md-4">
      Content Features..
    </div>
  </div>
</div>

HTML Structure

Grid System

This Theme has a Responsive layout and is based on the Bootstrap Framework. For more info visit Bootstrap.
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit. 


<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Nesting Columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).


<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
      Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
      Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

CSS Structure

These are the new css styles files that are loaded into theme inside head.tpl file.

<link href="{$WEB_ROOT}/templates/{$template}/assets/css/flickity.min.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/assets/css/aos.min.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/main.css" rel="stylesheet">

Icons styles:
<link href="{$WEB_ROOT}/templates/{$template}/assets/fonts/evafeat/evafeat.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/assets/fonts/cloudicon/cloudicon.css" rel="stylesheet">

Custom color styles:
<link href="{$WEB_ROOT}/templates/{$template}/assets/css/colors/pink.css" rel="stylesheet" title="pink"/>
<link href="{$WEB_ROOT}/templates/{$template}/assets/css/colors/blue.css" rel="stylesheet" title="blue"/>
<link href="{$WEB_ROOT}/templates/{$template}/assets/css/colors/green.css" rel="stylesheet" title="green"/>
<link href="{$WEB_ROOT}/templates/{$template}/assets/css/colors/dark.css" rel="stylesheet" title="dark"/>

Dont change anything in "main.css" file. It may affect the whole theme. So, if you need to customize the Horn Theme to your liking and style, you should use "custom" files (custom.css & custom.js). Thus, you can added and replace all files or code lines updated, following the change-log file without losing your configurations already implemented.

JavaScript Structure

These are the JS files that are loaded into templates in end of the body section.

<script src="{$WEB_ROOT}/templates/{$template}/js/scripts.min.js?v={$versionHash}"></script>
<script defer src="{$WEB_ROOT}/templates/{$template}/assets/js/jquery.slimscroll.min.js"></script>
<script defer src="{$WEB_ROOT}/templates/{$template}/assets/js/flickity.pkgd.min.js"></script>
<script defer src="{$WEB_ROOT}/templates/{$template}/assets/js/flickity-fade.min.js"></script>
<script defer src="{$WEB_ROOT}/templates/{$template}/assets/js/aos.min.js"></script>
<script defer src="{$WEB_ROOT}/templates/{$template}/assets/js/md5.min.js"></script>

Mandatory "main.js" file
<script defer src="{$WEB_ROOT}/templates/{$template}/assets/js/main.js"></script>
<script defer src="{$WEB_ROOT}/templates/{$template}/assets/js/custom.js"></script>

Dont change anything in "main.js" file. It may affect the whole theme. So, if you need to customize the Horn Theme to your liking and style, you should use "custom" files (custom.css & custom.js). Thus, you can added and replace all files or code lines updated, following the change-log file without losing your configurations already implemented.