Tales Documentation

A Clean Bootstrap Blogging Theme.

Thank you very much for purchasing Tales. This manual will help you use Tales and explain its functionality. If you have further questions or problems, please feel free to contact me at support@hackerthemes.com.

I hope you will enjoy using my theme.


Tales is a responsive Bootstrap blog theme. It is built on the Twitter Bootstrap framework, therfore many Bootstrap features and elements are available in Tales as well.

Browser Support

Tales supports IE9+, Edge, Firefox, Chrome, Safari, Opera and Android, iOS and Windows Mobile browsers.

Library Versions

Library Version URL
Twitter Bootstrap 3.3.6 http://getbootstrap.com/
jQuery 2.2.3 http://jquery.com
Font Awesome 4.6.1 http://fortawesome.github.io/Font-Awesome/
Modernizr 3.2.0 http://modernizr.com/
Respond.js 1.1.0 https://github.com/scottjehl/Respond


Version 3.3.6-v3, May 2016

  • Updated Font-Awesome to 4.6.1
  • Updated jQuery to 2.2.3

Version 3.3.6-v2, March 2016

  • Added 5 new color schemes
  • Updated Font-Awesome to 4.5.0
  • Updated jQuery to 2.2.1
  • Made HackerThemes link in footer nofollow (feel free to remove this link entirely when using Tales)
  • Gave searchbox a slight inset shadow

Version 3.3.6-v1, November 2015

  • Updated Bootstrap to 3.3.6
  • Updated Font-Awesome to 4.4.0
  • Updated jQuery to 2.1.4
  • Updated Modernizr to 3.2.0
  • Changed folder structure to facilitate easy usage with npm (packages available on npm are now in node_modules)
  • Dropped IE8 support
  • Fixed contrast in breadcrumb for bluegreen scheme to improve readability
  • Changed version number system to piggyback on Bootstrap’s version number
  • In ‘About’ demo page, changed word ‘emacs’ to ‘vim’ because vim is clearly the better text editor :-)

Version 2.1, February 2014

  • Updated Bootstrap to version 3.1.1
  • Updated FontAwesome to version 4.0.3
  • Updated jQuery to version 1.11.0
  • Updated Modernizr to version 2.7.1
  • Removed superfluous references to main.js and ie8.css
  • Added text selection color

Version 2.0, September 2013

  • Migrated from Bootstrap 2.3.2 to 3.0.0

Version 1.0 August 2013

  • Initial Release

Files and Folders Structure

Folder Content
HTML The root folder. Contains all HTML files.
HTML/css Contains style sheets.
HTML/img Contains images like the logo as well as pictures used for the blog.
HTML/less Contains the LESS sources for the CSS style sheets.
HTML/modules Contains third-party modules that are not managed by npm.
HTML/node_modules Contains modules that are available on npm such as Font Awesome and Bootstrap itself.

Using a Bootstrap Theme

Since Tales is based on Twitter Bootstrap, you should be familiar with the concepts of Bootstrap. The most important one is how the grid system works. Have a look at the follwing part of the Bootstrap documentation , which explains the basics of the grid system used in Tales. This is essential, as you most likely want to create HTML pages with custom arrangements.

The Tales starter.html Page

For your convenience, there is a starter page included in the package, called starter.html. This page is a very basic layout without any fancy extras, to help you get started. Let’s take a look at the HTML source code of the page.

The head

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <meta charset="utf-8">
    <title>Tales - Starter Page</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Bootstrap styles -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">

    <!-- Font-Awesome -->
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">

    <!-- Google Webfonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600|PT+Serif:400,400italic' rel='stylesheet' type='text/css'>

    <!-- Styles -->
    <link rel="stylesheet" href="css/styles-bluegreen.css" id="theme-styles">

    <!--[if lt IE 9]>      
        <script src="node_modules/respond.js/dest/respond.min.js"></script>

    <script src="//code.jquery.com/jquery-2.2.3.min.js"></script>

    <script>window.jQuery || document.write('<script src="node_modules/jquery/dist/jquery.min.js"><\/script>')</script>

This part includes the neccessary scripts and styles, as well as some meta information, like title and meta description. You’ll probably want to change titles and descriptions here for your pages.

The header

        <div class="widewrapper masthead">
            <div class="container">
                <a href="index.html" id="logo">
                    <img src="img/tales-logo.png" alt="Tales Blog">

                <div id="mobile-nav-toggle" class="pull-right">
                    <a href="#" data-toggle="collapse" data-target=".tales-nav .navbar-collapse">
                        <i class="fa fa-bars"></i>

                <nav class="pull-right tales-nav">
                    <div class="collapse navbar-collapse">
                        <ul class="nav nav-pills navbar-nav">
                            <li class="dropdown active">
                                <a class="dropdown-toggle"
                                    <b class="caret"></b>
                                <ul class="dropdown-menu">
                                    <li><a href="index.html">Blog</a></li>
                                    <li><a href="blog-detail.html">Blog Detail</a></li>
                                <a href="about.html">About</a>
                                <a href="credits.html">Credits</a>


        <div class="widewrapper subheader">
            <div class="container">
                <div class="tales-breadcrumb">
                    <a href="#">Tales</a>
                    <span class="separator">&#x2F;</span>
                    <a href="#">Starter</a>
                    <span class="separator">&#x2F;</span>
                    <a href="#">Starter Page</a>

                <div class="tales-searchbox">
                    <form action="#" method="get" accept-charset="utf-8">
                        <button class="searchbutton" type="submit">
                            <i class="fa fa-search"></i>
                        <input class="searchfield" id="searchbox" type="text" placeholder="Search">

The <header> tag is the first part of the <body> and includes the top logo, as well as the navigation and breadcrumb. The navigation is another component of Twitter Bootstrap worth learning about. However, for our purposes, you can simply modify the current navigation. To learn more about navigations in Bootstrap, see this part of the Bootstrap documentation.

The Main Content Area

<div class="widewrapper main">
    <div class="container">
        <div class="row">
            <div class="col-md-8 blog-main">
                <h1>My Starter Page </h1>
                <p>Your content goes here... </p>
            <aside class="col-md-4 blog-aside">
                <div class="aside-widget">
                        <h3>A simple widget</h3>
                    <div class="body">
                        that says hi!

Here’s where you’re going to include the bulk of your own content. Notice the first element: <div class="widewrapper main">. The widewrapper is built to give different backgrounds to different sections, and spans acrosss the whole screen. Other options are <div class="widewrapper masthead">, <div class="widewrapper footer">, <div class="widewrapper subheader">. The rest is pretty much standard Bootstrap markup, using the grid system to create a 8:4 ratio column layout, with the main content on the left side, and an aside on the right side. The Bootstrap grid system is explained in detail here.

        <div class="widewrapper footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 footer-widget">
                        <h3> <i class="fa fa-cog"></i>Statistics</h3>

                        <span>Even we sometimes loose track of how many articles we actually have here.  This one helps:</span>

                        <div class="stats">
                            <div class="line">
                                <span class="counter">27</span>
                                <span class="caption">Articles</span>
                            <div class="line">
                                <span class="counter">208</span>
                                <span class="caption">Comments</span>
                            <div class="line">
                                <span class="counter">2</span>
                                <span class="caption">Authors</span>

                    <div class="col-md-4 footer-widget">
                        <h3> <i class="fa fa-star"></i> Hall of Fame</h3>
                        <ul class="tales-list">
                            <li><a href="index.html">Why we Need to Encrypt All Communication</a></li>
                            <li><a href="#">Selling is a Function of Design. Not Vice-Versa.</a></li>
                            <li><a href="#">It’s Hard To Come Up With Dummy Titles</a></li>
                            <li><a href="#">Why the Internet is Full of Cats</a></li>
                            <li><a href="#">Last Made-Up Headline, I Swear!</a></li>

                    <div class="col-md-4 footer-widget">
                        <h3> <i class="fa fa-envelope"></i>Contact Me</h3>

                        <span>I'm happy to hear from my readers. Thoughts, feedback, critique - all welcome! Drop me a line:</span>
                        <span class="email">
                            <a href="#">jimmy@notanactualemail.com</a>, PGP key 0x5AK0BEA1
        <div class="widewrapper copyright">
            <div class="container">
                Designed by <a href="http://hackerthemes.com" rel="nofollow">HackerThemes</a>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="modules/modernizr/modernizr-custom.js"></script>


The last part includes the footer of the page, which is again a simple widewrapper div with the according class, as well as standard Bootstrap markup.

At the bottom of the page, there are some more general scripts. Placing them at the bottom speeds up the loading time of your website, but you might as well include them in the <head> section if you wish.

Tales comes with various color schemes, which you probably have already seen when exploring the live demo. You can easily switch the color theme of you site by replacing the style sheet included in your <head> tag:

<link rel="stylesheet" href="css/styles-bluegreen.css" id="theme-styles">

You have the following options:

Scheme CSS Path
Blue Green (Tales Standard) css/styles-bluegreen.css
Blue Red css/styles-bluered.css
Bright Blue css/styles-brightblue.css
Green (Dark) css/styles-dark-green.css
Yellow (Dark) css/styles-dark-yellow.css
Elegant Blue css/styles-elegantblue.css
Orange css/styles-orange.css
Grey Red css/styles-greyred.css

Basically, any file that follows the naming convention style-XYZ.css is a color scheme. Needless to say, if you know your way around CSS, you can further customize the colors of Tales. You could do this by including your own custom CSS file and overwriting styles you wish to change. This might be a good option if you are making very minor changes. However, there is one other way that allows you to easily create a whole new color scheme by simply changing color values in one central place, and that is by using the included LESS sources, which I’ll describe in the next section.

Modifying the LESS Source Files

Tales comes with the LESS source files, which allow you to easily make changes and create whole new color schemes if you wish. LESS is a dynamic style sheet language which extends CSS with dynamic behavior such as variables, mixins, operations and functions. If you’re familiar with CSS, then LESS will feel very intuitive. However, to create a color scheme, you don’t really need to know about LESS, expect how to compile the sources into a CSS file.

You can find more info on LESS on their official website.

Compiling LESS to CSS

To compile the LESS sources into CSS files, you will need a little helper tool. I use autoless on Ubuntu. On Windows you can use WinLess. If you are a Mac user, then you can use Koala for example.

All you have to do is instruct your tool of choice to compile the file styles-blue.less (or another color scheme) and you can replace the style include in your <head> section with the compiled output file.

<link rel="stylesheet" href="css/styles.css" id="theme-styles">

Creating a New Color Scheme

To create a new color scheme, all you have to do are three easy steps:

  1. Make a copy of styles-bluegreen.less, rename and modify it to your liking
  2. Compile your new styles using a LESS compiler tool
  3. Replace the Tales style sheet with the compiled CSS output in the <head> section of your markup

You will find that the file styles-bluegreen.less contains all color definitions used in Tales, grouped and named according to their purpose:

// Standard body text


// @link-secondary:#5a656f;

// Background
@background: #feffff;
@background-shadow: #ababab;

// Masthead


// Navigation


Along with an include that will include all other style definitions:


// Include the rest of the code
@import "includes.less";

The Font Awesome icons are used by using the <i> tag with the correct class applied, for example:

<i class="fa fa-anchor"></i> fa-anchor

You can adjust both color and size of the icons by using LESS/CSS. For example, see this snippet from the Tales elements.less file:

.tales-searchbox {
    .fa {

Which will compile into the following CSS code in styles-bluegreen.css:

.tales-searchbox .fa {
  color: #7b8690;
  font-size: 19px;

This code is used to give the icon within the searchbox a specific height of 19px as well as a custom color.

For a full list of all available icons, please see the Font Aweseome Icons List. Another great way of browsing the icons is glyphsearch.com, which has a search box and copies the class name on click.

For more information on Font Awesome, visit the Font Awesome Documentation.

Migrating from 3.3.6-v2 to 3.3.6-v3

To update FontAwesome and jQuery, update the contents of the node_modules folder, or run npm install if you want to use npm.

To update jQuery, also update the link in the header:

<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>

Migrating from 3.3.6-v1 to 3.3.6-v2

To update FontAwesome and jQuery, update the contents of the node_modules folder, or run npm install if you want to use npm.

To update jQuery, also update the link in the header:

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>

If you left the link to HackerThemes in the theme footer, please update it with a nofollow attribute like so:

<a href="http://hackerthemes.com" rel="nofollow">HackerThemes</a>

Please note that it is not required to have this link anywhere on your page. I’m always happy about a shoutout though. :-)

Finally, update the CSS file you’re using. If you’re building your custom CSS from the LESS files, be aware that some variables have been added to the styles-XZY.less files. The new variables are:


Migrating from 2.1 to 3.3.6-v1

This update has seen some major changes to the folder structure. If you want to update, make sure to update all references to the following files:

  • bootstrap.min.css
  • bootstrap-theme.min.css
  • font-awesome.min.css
  • html5-3.6-respond-1.1.0.min.js
  • jquery.min.js
  • bootstrap.min.js
  • modernizr-custom.js (previously modernizr.js)

All of those files except for the modernizr can now be found inside the node_modules folder.

Also, the reference to the Google font resources has now an encoded vertical bar in order to pass W3C validation:

<!-- Google Webfonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600%7CPT+Serif:400,400italic' rel='stylesheet' type='text/css'>

Migrating from 2.0 to 2.1

If you are migrating from Tales 2.0 there is only a few changes you need to do in order to make it work. It is assumed that you update all CSS, JS and font resoures. In addition, your markup needs some changes, too:

Changes in the Header

Tales 2.1 uses jQuery 1.11.0, so the reference in the header needs to be updated:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="js/vendor/jquery/jquery-1.11.0.min.js"><\/script>')</script>

In addition to this, you can remove the following two references from Tales 2.1. They are not part of Tales, but the result of some truly epic copy-pasta coding on my part (shame on me!):

<script src="js/main.js" type="text/javascript"></script>

<link rel="stylesheet" href="css/ie8.css"> 

Update FontAwesome Markup

FontAwesome has changed the entire naming system for the better. This means you have to update any icon markup that you are using with Tales.

Old Markup:

<i class="icon-reorder"></i>

New Markup:

<i class="fa fa-bars"></i>

This particular example changed not only the prefix (icon- to fa fa-) but also the name of the icon itself. This is an exception, the icon names are largely consistent (in my experience). I’m pointing this example out because it’s in the mobile navigation and you might not be aware of this icon even being there.

Also, see the full Font Aweseome Icons List on their website.