Bootstrap HTML Templates Documentation

Prepration

Before you proceed with HTML Template installation, you need to prepare. It is recommended to follow steps, listed below:

Software

We recommend that you download all the required software to edit Website Template. Software Required is listed at template preview page.

Technical requirements might differ depending on exact template, therefore we will list the most basic ones:

  1. First, you'll need proper unzipping software for password-protected sources_#########.zip package extracting. You may use WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac). This is a mandatory software.
  2. You should also use code editor, i. e. Sublime Text, Notepad++, Atom, etc. for template files source code editing.
  3. For files uploading to server FTP manager will be also required, like FileManager at your hosting control panel or desktop applications, such as Total Commander, FileZilla, CuteFTP, etc.
  4. We highly recommend you to use LibSass for SCSS compilation, ex. program Prepros.

Hosting

You can just run index.html file directly from your site folder, but it won't let you explore all template functionality. You should upload template to hosting server in order to display a fully working website correctly.

In case you have existing server already, please check if it meets Website Template requirements, listed at template preview page. For most templates PHP 5.2+ version is the only requirement.

You may also install Website Template to your computer locally by using localhost. In order to set up local server you may use WAMP, AppServ, MAMP or any similar software. All of them are installed same as regular application.


Feel free to check the following tutorials on how to set up local server:

Template upload

You need to upload all files of site/ folder from your localhost to hosting.

Note: the root directory of a site depends on the internal structure of your hosting server. If you upload the site folder itself on hosting, the root of your site will be http://your_domain_name/site. You need to upload inner content of site/ folder if you want url to be http://your_domain_name/

Folder Structure

Checkout the files that you'll see upon downloading

After HTML Website Template package extracting you'll see the following files structure:

  1. html/ - Includes all the html files
    • #####.html
    • #####.html
    • #####.html
  2. html/assets/css - Stylesheet files
    • app.css (Main Compiled CSS)
    • vendor - Includes all the external plugins files
    • fonts – Icon font files
    • elements
      • preloader.css
  3. html/assets/scss - SASS files
    • app.scss (Main SCSS)
    • Basic

      Including styling for general elements of html

    • Elements

      Including styling for elements like button. heading and preloader

    • Helpers

      This folder contains styling for animation, responsive queries and spacing

    • Layouts

      This folder contains styling for header and footer

  4. html/assets/media - Contains the placeholder images that can be replaced with your own
  5. html/assets/js - Javacript files
    • app.js (Main Template Js)
    • vendor

      This folder contains all the js plugin included

  6. html/assets/mail - Contact form
    • contact.php (Mail Sent Script)

HTML Structure

HTML Website Template .html pages structure is built on the following principle: 

<!DOCTYPE html>
<html lang="en">
  <head>
  <!-- Your Stylesheets, Core Scripts (jQuery etc) & Title -- <
   ...
  </head>
  <body>

    <!--  Preloader -->
    <div> </div>

    <!-- Main Wrapper Start -->
    <div>

        <!-- Start Header -->
        <header>

        </header>
        <!-- End Header-->

        <!-- Page Sections -->
        <section> 
        </section>
        <!-- End Page Sections -->

        <!-- Star Footer -->
        <footer>
        </footer>
        <!-- End Footer -->

    </div>
    <!-- Main Wrapper End -->

    <!-- Jquery Js -->
    <script src="assets/js/vendor/jquery-3.6.3.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
            
    <!-- Includes plugins JS files will be here -->

    <!-- Site Scripts -->
    <script src="assets/js/app.js"></script>

  </body>
</html>

Customization

HTML templates are fully customizable, allowing you to tailor the design to your needs. Here are some tips to help you get started:

1. Install Sass:

1. Templates are built with sass you will need to install SASS on your machine follow instruction from this link:

https://sass-lang.com/install

2. Run Watch Command to complile:

After the successfull instaltion you will need to run following command using CMD prompet on main containing folder 'html':

sass --watch assets/sass:assets/css

After these two steps now you are good to go for style changing!


Here are general changing details with screenshots to help you go through!

How to change Font:

Got to 'html/assets/sass/app.scss' file and change the following line:

Thumb

How to change favicon

You will find this line in head of all html files. Favicon image available in 'html/assets/media'

Thumb

How to change logo

Header logo for the desktop version of the site should be changed in Page Head section of the target page with the .navbar-brand class. Find Logo image available in 'html/assets/media'

Thumb

How to change page title

You will find this line in head of all html files. Favicon image available in 'html/assets/media'

Thumb

How to control Slick Slider

Navigate to 'html/assets/js/app.js' you will find this.

Thumb

How to Add/Remove CSS

Add or remove css from head tag of every html page

Thumb

How to Add/Remove JS

Add or remove js near to body end tag of every html page

Thumb

How to change contact form email

Navigate to 'html/assets/mail/contact.php' file

Thumb

Support

We are here for you

If you encounter any issues with the template or have any questions, please don't hesitate to contact us.

Credits

We would like to take a moment to express our gratitude to those who have contributed to the development of this theme, making it a truly exceptional product for our valued users. We extend our heartfelt thanks to:

Images and video

JS Libraries

CSS & Fonts

Conclusion

We hope this documentation has helped you set up and customize your new website with ease. Thank you for choosing UI Paradox for HTML5 template and we wish you all the best with your online presence.