TASO

A Responsive One Page HTML5 Template

Created: 06/08/2018
By: Synchrotheme
Email: info@synchronisebd.com

Thank you for purchasing "Taso - A Responsive One Page HTML5 Template" If you have any questions that are beyond the scope of this help file, please feel free to submit a ticket at our Support Forum. Thanks so much!

"Taso" is a full functional HTML5 Template designed & developed for multiple concepts websites. It is fully responsive template based on Twitter Bootstrap framework that makes it available for all screen sizes from the bigger ones to smartphones. Its not only responsive whereas it is retina ready also, now no blurry images on your HiDPI and retina devices.

How to use Taso Template?

"Taso" is very easy to update and modify, it will adapt your website and brand in no time. Steps for modification and updating are described step by step in this exclusive documentation.

Files and folders structure

Whole template is divided in to several folders and their content defines by the folder names easily.

Template => assets =>(Concept Folder)
- image(all images and backgrounds patterns)
- fonts(google fonts)
- css
  - style.css(main stylesheet)
  - bootstrap.css(Twitter Bootstrap css)
  - fontawesome-all.css ( Fontawesome css)
  - owl.carousel.min.css(Carousel stylesheet)
  - owl.theme.default.min.css(Owl theme css)
  - magnific-popup.css (Magnifie popup css)
  - animate.min.css(Animate css)
- js
  - jquery-3.0.0.min.js(jquery script)
  - bootstrap.min.js(Twitter Bootstrap script)
  - jquery.stellar.js(jquery steller script)
  - animated.headline.js(headline script)
  - owl.carousel.min.js(owl carousel script)
  - scrollIt.min.js(scroll it script)
  - isotope.pkgd.min.js(isotope script)
  - jquery.magnific-popup.min.js(magnifite popup script)
  - plugins.js(jquery pluging script)
  - contact.js (contact form script)
- mail
  - contact.php(configuration file for the contact us page form on the website
- All .html pages are at the root of Template Folder

INSTALLATION ON YOUR SERVER VIA FTP

How To Install TASO Via FTP :

Step 1 - Log into your hosting space via an FTP software (Filezilla for example).
Step 2 - Unzip your Download Pack file and use the extracted Business theme folder.
Step 3 - Upload the extracted Business theme folder into one folder or at the root of your server.

Grid system

"Taso" is based upon Twitter Bootstrap css framework that is very easy to use and adapt. It follows the mobile first approach to make the website readily available for all devices and screen sizes. Bootstrap grid is based upon 12 columns that are well defined in the bootstrap.css file inside the css folder. You can get to know about the grid system in detail from this url https://getbootstrap.com/docs/4.0/layout/grid/

Icons font

Font Awesome

"Taso" use font awesome icon fonts for its icons requirement and no images has been used for any icon. A complete list of icons along with the class names can be found here: https://fontawesome.com/icons

To use an icon on any page of the theme use the below code:

               <i class="fa name of the class found at the above url"> </i >

All icons class name will always start with the fa- . There are several sizes for icons are predefined in the fonts.css inside css folder. i.e. fa-lg, fa-2x, fa-3x

Changing color schemes

"Lagom" use scss css preprocessor to set color scheme for the template. Template use 2 colors as to create a color sceme, 1 is primary and another is secondary. Both primary and secondary colors can be set at scss file inside scss folder of the template

            	 $primary-color: #fc6f5c;
				 $secondary-color: #748182;

Changing image placeholders to real images

"Lagom" doesn't come with images that you see in demo and in the downloaded files all images except the logo and some other graphics all images are replace with custom size place holders available from http://placehold.it/

You can easily replace these holders with your real images by just putting the same size image that you find in the link text of the placeholder "http://placehold.it/50x50&text=IMAGE+PLACEHOLDER" in the images folder. This example shows that this image will have to be 50px in width and 50px in height to look perfect on the website. So the real image url will be "images/YOUR IMAGE NAME.jpg/gif/png

It Is very easy to change the image of the theme

Change Banner Image:

               //Change Banner Image 
               <section style="background-image: url('assets/images/background/Your image path name')" >
               </section>

Change Banner Video:

               //Change Banner Video
               <section id="home" class="banner video-bg" data-vide-bg="assets/images/banner/your video path name" data-scroll-index="0">
               </section>

Change Banner Slider Image:

               //Change Slider Image 
               <section class="sl-item" style="background-image: url('assets/images/banner/your video path name')">
               </section>

Change About Image:

              //change the Image
                <div class="about-img >
                  <img src="assets/images/about/Your image path name" alt="">
               </div>

Change Portfolio Item Image:

              //change the Image
                <div class="portfolio-item">
                  <img src="assets/images/about/Your image path name" alt="">
               </div>

Change Testimonial Image:

              //change the Image
                <div class="pic">
                  <img src="assets/images/about/Your image path name" alt="">
               </div>

Change Blog Item Image:

              //change the Image
                <div class="post-img">
                  <img src="assets/images/about/Your image path name" alt="">
               </div>

Contact form receiver's address

There are several contact forms in this theme and all are sharing a common file for this that is contact.php inside mail folder of the theme. Just find $sendTo = "info@domain.com"; in this .php file and put the email you to receive submission forms to inside the quotes