Uno - Documentation

Introduction

Thank you for purchasing our template. The purpose of this documentation is to help you make the most of what this template has to offer. We've covered almost everything needed to start using our template, we tried to keep it as simple as possible. If you have any questions that are beyond the scope of this help file, please feel free to email us from our Profile Page. Please don’t forget to mention your purchase code in your message.

We would happily welcome feedback from you on how, if anywhere, you would like this documentation improved. If you would find anything a little bit easier and more helpful if we went into more detail, or explained something a little better - we'd be happy to hear it.

Basic Structures

Below are all the files included with the template:

CSS
- reset.css -> used for reseting default browser styles
- animate.css -> CSS file for animations.
- styles.css -> Main styles stylesheet.
Images -> contains all the images used in the template.
Includes
- Font -> "Canela, Roboto" the fonts used in template.
- fontawesome -> "FontAwesome" font icon files.
- flaticons -> "Flat Icons" font icon files.
- mail_scripts -> script file for contact page.
JS
- scripts -> main template JavaScript file
- magnific popup
- swiper
- imagesloaded
- modernizr
- easing
- jquery
- waypoints
And the HTML files.

HTML Structure

The layout system is based on 3 layouts: Fullscreen layout, Fullwidth layout, and Boxed layout

Fullsreen Layout

Fullscreen layout expand the container width and height to fill the page. It's mainly used for horizontal sliders and fullscreen slideshows.

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

Here's an example of how to use the fullscreen layout:


                    <!DOCTYPE HTML>
                    <html lang="en-US" class="fullscreen">

                    <!-- Begin Head -->
                    <head>
                            <meta charset="utf-8">
                            <title>Uno</title>
                    </head>
                    <!-- End Head -->

                    <!-- Begin Body -->
                    <body class="fullscreen">

                            <!-- Begin Main -->
                            <main>
                                    <div class="portfolio horizontal-slider centered">
                                    </div>
                            </main>
                            <!-- End Main -->

                    </body>
                    <!-- End Body -->
                    </html>

Fullwidth Layout

Fullwidth layout expand the container width fill the page. It's mainly used for Grid layouts and Masonry layouts.

Here's an example of how to use the fullwidth layout:


                    <!DOCTYPE HTML>
                    <html lang="en-US">

                    <!-- Begin Head -->
                    <head>
                            <meta charset="utf-8">
                            <title>Uno</title>
                    </head>
                    <!-- End Head -->

                    <!-- Begin Body -->
                    <body>

                            <!-- Begin Main -->
                            <main>
                                    <div class="gallery grid isotope three-columns">
                                    </div>
                            </main>
                            <!-- End Main -->

                    </body>
                    <!-- End Body -->
                    </html>

Boxed Layout

Boxed layout keeps the content contained in a '1100px wide' container. It's mainly used for normal pages and blog pages.

Here's an example of how to use the boxed layout:


                    <!DOCTYPE HTML>
                    <html lang="en-US">

                    <!-- Begin Head -->
                    <head>
                            <meta charset="utf-8">
                            <title>Uno</title>
                    </head>
                    <!-- End Head -->

                    <!-- Begin Body -->
                    <body>

                            <!-- Begin Main -->
                            <main class="page extra-padding">
                                    <div class="inner-container">
                                            <h1>Page Header</h1>
                                    </div>
                            </main>
                            <!-- End Main -->

                    </body>
                    <!-- End Body -->
                    </html>

CSS Structure

CSS styles are divided into 10 sections, for better handling and understanding. Down below is the basic css structure:

Basics
Header
Footer
Elements
Portfolio
Gallery
Pages
Blog
Transitions
Media Quieries

If you need to make some edits in the styling, just head to the section you want to edit, make your changes, and save.

JavaScript Structure

All the plugins needed in this template have been listed in files sturcture. The main template javascript file is "scripts.js", down below is the structure of the file.

Global section -> contains common functions used globally all over the template pages.
Events Section -> contains all the events which are called once, and doesn't depend on the main "draw" function.
Functions Section -> contains all the functions used to draw different layouts, including the main "draw" function which is responsible for drawing the layout, even when the window is resized.

Elements

This section explains most of the elements used in the template including:

Preloader
Header
Home layouts
Rooms layouts

Preloader

The preloader is the loading screen which appears when you open any page in the template. It's used as a cover to hide any images which are being loaded, or any layout which are being drawn. It automatically disappears when all the loading are finished.

Here's a preview of how it is written:


                    <div class="preloader">
                        <div class="lines">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>

Header

There are 3 types of home layouts used in this template:

Style 1
Style 2
Style 3

Header - Style 1

Here's a demo of Style 1 of Header.

Make sure you add class "style-1" to the header. You can also make the header appear on top of other sections or any content by adding class "position-absolute" or class "position-fixed" to the header

Style 1 Header's content is broken into 3 areas: "content-left", "content-center", "content-right"

Header - Style 2

Here's a demo of Style 2 of Header.

Make sure you add class "style-2" to the header. You can also make the header appear on top of other sections or any content by adding class "position-absolute" or class "position-fixed" to the header

Style 2 Header's content is broken into 3 areas: "content-left", "content-center", "content-right"

Header - Style 3

Here's a demo of Style 3 of Header.

Make sure you add class "style-3" to the header. You can also make the header appear on top of other sections or any content by adding class "position-absolute" or class "position-fixed" to the header

Style 3 Header's content is broken into 3 areas: "content-left", "content-right"

Home layouts

There are 13 types of home layouts used in this template:

Intro Slider (Unique content layouts)
Label Slider (Unique content layouts)
List Slider (Unique content layouts)
Horizontal Focused Slider
Strips Slider
Boxed Slider
Vertical Slider
Big Slider
Block Slider
Fullscreen Slider 1
Fullscreen Slider 2
Sliced Slider 1
Sliced Slider 2

Rooms

There are 4 types of rooms layouts used in this template:

Rooms Archive 1
Rooms Archive 2
Rooms Archive 3
Room Details

Help

All of our products include a 6 months support period and free lifetime template updates. Once the 6-month support period ends, you have an option to extend support coverage for an additional 6 or 12 months. If you choose to not extend your support, you will no longer be able to receive technical assistance, but you still have access to our online documentation.

Support is limited to questions regarding the template’s features or problems with the template. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your template, we suggest enlisting the help of a developer.

Our support covers template-related questions, and bugs or other issues that may occur when using the template. Customization can be any work you need done to the template that does not fall within the scope of our support agreement. In most cases, this is anything falling outside of the options the template offers. We do not provide customization services or freelance support to incorporate modifications in our themes.

What's included in item support?

During the product support period, the author is expected to be available to:

Answer specific technical questions about the features and functionality of the template.
Provide guidance on how the template is designed to function.
Help you with issues related to using the template and getting optimum value from its functionality.
Answer questions about third party plugin functionality as it relates to the template.
Product updates to fix bugs, ensure ongoing compatibility, and resolve security vulnerabilities.

What's Not included in item support?

During the product support period, the author is not expected to:

Modify or extend the template beyond the original features seen in the demo.
Install the template.
Address issues regarding your hosting or server environment; please check with your provider.
Address third party assets.

You will find a complete description of these support policies in ThemeForest's Support Policy.

Extra Customisations

Please follow this article if you are interested in extra customisations that are not part of the preset options of the Uno template or extra freelance services.

According to the Envato license terms this Help-Center is running to support possible bug fixes and installation problems that may arise with our softwares. Help with template modifications is beyond the scope of this service and it's not part of the purchase package.

We are defining customisations all the variations that are not part of the preset options of the admin panels and any HTML, PHP, JavaScript and CSS files modifications which will alter the native look and functionalities of our products.

Updates & Fixes

Here you can view what has been changed/fixed after a template update:

Version 1.0

Launch.

Contact Us

If you have any questions that are beyond the scope of this help file, please feel free to email us from our Profile Page. Please don’t forget to mention your purchase code in your message.

You can send a message to us via the Uno Theme comments section on ThemeForest. At the bottom of the comments page you will find a "Add a comment" form to send a message.