Ultimate Flat - Bootstrap One Page Template

× Important Note: To make sure you're using the latest version of this help file, please check out the Online Documentation


The scope of this documentation file is to provide you with the information you need to help you get started with your new theme.

Should you have any questions that are beyond the scope of this help file, please feel free to post them to on our Support Click here.

Last Update:
Nov 18, 2014
Created By:
Theme in the Box - Marco Dedo
Theme Demo:
View Demo
Support and asks:
Click Here

Installing Template

This Template has a Responsive layout and is based on the Bootstrap Framework. For more information about this visit Bootstrap Documentation.

After unzip the download pack, you'll found a Template Folder with all the files.

Template Files

  • Assets
    Contains graphic files PSD to edit the template.
  • Documentation
    Contains the current help file that comes with the template.
  • HTML
    Here are all the template files you'll need to get started.
  • License
    Licensing information files.

Teplate Installation

In Local

You can view this Template in any browser, you can display or edit the Template without an internet connection.

The only section that will not work is the Contact Section which contains PHP code and requires a server enviroment for send messages.

In Remote

Open your FTP Client (like Filezilla) and upload the content of the HTML folder on your server root.

Once the files are done uploading go to www.yourdomainname.com/index.html


This template uses the fonts provided by the online service Google Fonts. For a full list visit the dedicated page of Google.

Change the font

By default, the template loads this font from Google Web Fonts Services, you can change the font with the one that suits you best.

                            @import url(http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,700,900);


Remember to change the font family into head of style.css

                              #header, #feature, #about, #testimonial, #screenshots, #image, #video, #newsletter, #download, #social {
                                font-family: 'Raleway', sans-serif;


Color Scheme

You can choose from 8 color schemes: Aqua, Green, Grey, Orange, Purple, Red, Sky and Yellow.

By default, the template loads this color scheme, you can change the scheme color with the one of those available.




Introduction to LESS files

Alternatively you can use the LESS file included in the template. HTML > inc > less

Related Links

If you are not familiar with this new CSS technique, should read this posts:


630+ Icons thanks to Glyphicons and Font Awesome

How to use

By default, the template loads and ready to use all icons by GlyphIcons and Font Awesome. Include them is very simple:

Method 1



This works slightly differently, by:

Method 2



                            span.icon { 
                                font-family: 'Glyphicons Halflings'; 

                            span.icon-2 { 
                                font-family: FontAwesome; 

Next, the HTML Entity part:


                            &# xf015; 


                            &# xe021; 
Note: This method may offer you more flexibility (for example, you could use a < div > or < span > tag instead).

Method 3

Or including the rendering of the icon before the content using the :before CSS psuedo-element.



                            span.icon:before { 
                                font-family: 'Glyphicons Halflings'; 
                                content: "\f015"; 


                            span.icon-2:before { 
                                font-family: 'FontAwesome;'; 
                                content: "\f015"; 

To add this icon to a page, add this HTML tag anywhere in the body of your page.





Related Links



The template has 2 slideshows: FlexSlider 2 and OWL Carousel

FlexSlider 2

Flex Slider by Woo Theme, is the best responsive slider. In the Ultimate Flat is ready to use

How to use

  • Slide One
  • Slide Two
  • To add or remove slides, we must act sull'elengo < li > < /li >

    You can also set the advanced behaviors of the slide, changing the parameters in the file inc > js > main.js the line:

                                $(window).load(function() {
                                    animation: "slide",
                                    animationLoop: false,
                                    smoothHeight: true,
                                    touch: true,
                                    itemWidth: 120,
                                    itemMargin: 2,
                                    move: 2,
                                    minItems: 1,
                                    maxItems: 3

    OWL Carousel

    OWL Carousel is touch enabled jQuery plugin that lets you create beautiful responsive carousel slider

    How to use

  • Image
  • To add or remove slides, we must act sull'elengo < li > < /li >

    p>You can also set the advanced behaviors of the slide, changing the parameters in the file inc > js > main.js the line:

                                $(document).ready(function() { 
                                    items : 5, //10 items above 1000px browser width
                                    itemsDesktop : [1000,4], //5 items between 1000px and 901px
                                    itemsDesktopSmall : [900,3], // betweem 900px and 601px
                                    itemsTablet: [600,2], //2 items between 600 and 0
                                    itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option

    Related Links