LITHO

Installation

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files and sub folders to your hosting web server using FTP or file manager in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website root directory:
    • HTML/css - Stylesheet files
    • HTML/fonts – Icon font files
    • HTML/images - Image files
    • HTML/js - Javacript files
    • HTML/video – Video files
    • HTML/email-templates – Contact and subscription form PHP files
    • HTML/revolution – Revolution slider library files
  3. You should upload all or specific HTML files as per your need.
  4. You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.

HTML structure

LITHO follows a simple and easy to customize coding structure. Here is the sample for your reference:

Copy 
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <!-- title -->
        <meta charset="utf-8">
        <!-- description -->
        <meta name="description" content="">
        <!-- keywords -->
        <meta name="keywords" content="">
        <!-- favicon -->
        <!-- style -->
    </head>
    <body>
        <!-- start header -->
        <header>
            <!-- start navigation -->
            <nav class="navbar navbar-expand-lg navbar-dark bg-transparent header-light fixed-top navbar-boxed header-reverse-scroll">
                ...
            </nav>
            <!-- end navigation -->
        </header>
        <!-- end header -->
        <!-- start sections -->
        <section>
            ...
        </section>
        <!-- end sections -->
        <!-- start footer --> 
        <footer>
            <div class="container">
                ...
            </div>
        </footer>
        <!-- end footer -->
        <!-- javascript libraries -->
    </body>
</html>

Logo settings

The logo container can be found in the Nav Container - .navbar

LOGO setting
Copy 
<!-- start logo -->
<div class="col-auto col-sm-6 col-lg-2 me-auto ps-lg-0">
    <a class="navbar-brand" href="#">
        <img src="images/logo-white.png" data-at2x="images/logo-white@2x.png" class="default-logo" alt="">
        <img src="images/logo-green-dark.png" data-at2x="images/logo-green-dark@2x.png" class="alt-logo" alt="">
        <img src="images/logo-green-dark.png" data-at2x="images/logo-green-dark@2x.png" class="mobile-logo" alt="">
    </a>
</div>
<!-- end logo -->

NoteThree images are used for logo, one for default logo (Logo that will display when you are on the top of the page), second for alternate logo (Logo that will display when header will be sticky) and third for mobile logo (Logo that will display in mobile). .default-logo  is used to set which image you want as default, .alt-logo   is used to set which image you want as alternate. .mobile-logo   is used to set which image you want to display in mobile.

NoteIf you want to increase the size of your logo container then you can increase max-height as per your need in /css/style.css file under this css class: header .navbar .navbar-brand img, header.side-menu .logo img, header .sidebar-nav-menu .navbar-brand img

Image & favicon settings

Image settings

LITHO download package does not contain actual images which are there in our online demo due to licensing limitation and this is already mentioned in item description also as per Envato policy. We are using placeholder images instead of real images. You can replace placeholder image url with your image url like images/yourimage.jpg and make sure to put the image in /images/ folder.

Copy 
<img src="https://placehold.it/750x500" alt="image alt text">
Change to
<img src="images/yourimage.jpg" alt="image alt text">

Background image settings

You can change background image from placeholder image to your own easily like the below code reference:

Copy 
background-image:url('https://placehold.it/1920x1200')
Change to
background-image:url('images/yourimage.jpg')

Favicon settings

To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

Copy 
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

Changing fonts

LITHO uses 2 fonts: Roboto & Poppins from the Google Fonts Library. You can change the fonts from /css/style.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an article of self hosted fonts to review. In this case you need to remove below lines and change font names in /css/style.css file as per your fonts used.

Copy 
<!-- Google font -->
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');