Tentered

Responsive Multi-Purpose HTML5 Template

Created: 20/01/2014
Updated: 18/06/2014
By: imithemes
Support: support.imithemes.com
Email: envato@imithemes.com

Thank you for purchasing 'Tentered' If you have any questions that are beyond the scope of this help file, please feel free to open a ticket at our support forum. Thanks so much!

Tentered is a nice and simple HTML theme designed for Personal pages and can be used by anyone as its personal website. It is fully responsive theme based on Twitter Bootstrap 3.0 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 Tentered Template?

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

Files and folders structure

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

tentered-theme
- images(all images and backgrounds)
- css
  - animations.css(css3 animation effects)
  - style.css(main stylesheet)
  - font-awesome.css(icon fonts)
  - ie8.css(optional ie8 compatibility file)
  - bootstrap.css(Twitter bootstrap 3.0 css)
  - fonts(folder containing icons font files)
- js
  - jquery.gmap.js(custom google maps plugin)
  - bootstrap.js(Twitter bootstrap 3.0 js file)
  - helper-plugins.js(small helper plugins to get the site up and running)
  - modernizr.js(html5 compatibility package)
  - init.js(file to initialize all the plugins and cutom functions)
- Plugins
  - owl-carousel(carousel plugin for the theme)
  - rs-plugin(revolution slider plugin)
  - page-scroller(page scroller plugin for one page websites)
  - prettyphoto(lightbox effects plugin)
  - flex-slider(slider plugin optional)
  - countdown(jquery countdown plugin used on coming soon page)
- colors(all color schemes - activate one at a time)
- mail
  - contact.php(file for the forms on the website
- api
  - twitteroauth(contains twitter plugin files to get the latest tweets)
  - tweet.php(plugin description for the latest tweets)
  - config.php(file to put twitter app details to get the latest tweets plugin running
- All .html pages are in the root of tentered-theme folder

Grid system

Tentered 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 http://getbootstrap.com/css/#grid

Icons font

Tentered used 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: http://fontawesome.io/cheatsheet/

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

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

Tentered comes with 10 predefined color schemes to use it handy. All premade themes can be found inside colors folder of the theme directory. A new color scheme can be defined very easily just copy any of the premade color css file and keep it inside colors folder and name it as you like then just replace the color hex code in the file to your liking. Afterwards you will have to replace the name of the css in the head of each page like below:

This line can be found in every .html page in the top head section

Changing image placeholders to real images

Tentered 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 repace these holders with your real images by just putting the same size image that you 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.

How to create a new carousel?

Creating new carousels are very easy. Just put the class "owl-carousel" to any div or ul or any tag to get started and define the data attributes for the settings. For example see below:

data-columns will define the columns of the items
data-autoplay will define if you want the carousel to slide automatically or not
data-arrows will define if you want to show the next/prevois arrows or not
data-pagination will define if you need the pagination bullets to appear under carousel or not.
data-items-desktop will define how many items you want to show at once on a screen size above 1200px
data-items-desktopsmall will define how many items you want to show at once on a screen size below 1000px
data-items-tablet will define how many items you want to show at once on a screen size below 960px
data-items-mobile will define how many items you want to show at once on a screen size below 767px
to show only one item at a time just remove all data-items attributes and put data-single-item="yes"

Showing a latest tweets widget

You can place a twitter widget anywhere on any page by just using:

data-tweets-count attribute will define how many tweets you want to show in the widget, by default its 1

To enable the twitter widget you need to get some info from your twitter account and put it in the config.php file in tentered-theme > api folder as described there.

Here are the steps to get the details needed for this

Go to https://dev.twitter.com/apps/new and log in, if necessary
Supply the necessary required fields, accept the TOS, and solve the CAPTCHA.
Submit the form
Copy the consumer key (API key) and consumer secret from the screen into your application
Ensure that your application is configured correctly with the permission level you need (read-only, read-write, read-write-with-direct messages).
On the application's detail page, invoke the "Your access token" feature to automatically negotiate the access token at the permission level you need.
Copy the indicated access token and access token secret from the screen into your application

Showing a flickr widget

Tentered comes with built in flickr plugin implemented, which you can use to show your latest flickr photos anywhere on any page. To use see below code:

data-flickr-userid will be your flickr user if that you can get from here http://idgettr.com/

data-images-count will define how many image you want to show in the widget, by default it will show 4

How to setup date in coming soon page?

See below code for the date counter setup

You just need to put the end date of the event in the data-date attribute and you are be ready to go

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 $address = "Your Email Here"; in this .php file and put the email you to receive submission forms to inside the quotes

Source Files in the package

Tentered theme comes with a psd file of the homepage design. More might come soon