A Clean Bootstrap Blogging Theme.
Version 3.3.6-v3, documentation last updated febrero 2017
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.
Tales supports IE9+, Edge, Firefox, Chrome, Safari, Opera and Android, iOS and Windows Mobile browsers.
| 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
Version 3.3.6-v2, March 2016
Version 3.3.6-v1, November 2015
Version 2.1, February 2014
Version 2.0, September 2013
Version 1.0 August 2013
| 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. |
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.
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.
<!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]-->
<head>
<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>
<![endif]-->
<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>
</head>
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.
<body>
<header>
<div class="widewrapper masthead">
<div class="container">
<a href="index.html" id="logo">
<img src="img/tales-logo.png" alt="Tales Blog">
</a>
<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>
</a>
</div>
<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"
data-toggle="dropdown"
href="#">
Blog
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="index.html">Blog</a></li>
<li><a href="blog-detail.html">Blog Detail</a></li>
</ul>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="credits.html">Credits</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="widewrapper subheader">
<div class="container">
<div class="tales-breadcrumb">
<a href="#">Tales</a>
<span class="separator">/</span>
<a href="#">Starter</a>
<span class="separator">/</span>
<a href="#">Starter Page</a>
</div>
<div class="tales-searchbox">
<form action="#" method="get" accept-charset="utf-8">
<button class="searchbutton" type="submit">
<i class="fa fa-search"></i>
</button>
<input class="searchfield" id="searchbox" type="text" placeholder="Search">
</form>
</div>
</div>
</div>
</header>
...
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.
<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>
</div>
<aside class="col-md-4 blog-aside">
<div class="aside-widget">
<header>
<h3>A simple widget</h3>
</header>
<div class="body">
that says hi!
</div>
</div>
</aside>
</div>
</div>
</div>
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.
<footer>
<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>
<div class="line">
<span class="counter">208</span>
<span class="caption">Comments</span>
</div>
<div class="line">
<span class="counter">2</span>
<span class="caption">Authors</span>
</div>
</div>
</div>
<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>
</ul>
</div>
<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
</span>
</div>
</div>
</div>
</div>
<div class="widewrapper copyright">
<div class="container">
Designed by <a href="http://hackerthemes.com" rel="nofollow">HackerThemes</a>
</div>
</div>
</footer>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="modules/modernizr/modernizr-custom.js"></script>
</body>
</html>
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.
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.
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">
To create a new color scheme, all you have to do are three easy steps:
<head> section of your markupYou 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
@text:#404b55;
@link-primary:#5b6268;
@link-primary-hover:#5b6268;
@link-secondary:#55a773;
// @link-secondary:#5a656f;
// Background
@background: #feffff;
@background-shadow: #ababab;
// Masthead
@masthead-background:#242b32;
@masthead-text:#f8f8f9;
@subheader-background:#37424c;
@subheader-text:#7b8690;
@breadcrumb-link:@subheader-text;
@searchbox-background:@masthead-background;
@searchbox-text:@breadcrumb-link;
// Navigation
@navigation-link:@masthead-text;
@navigation-active-background:#37424c;
@navigation-dropdown-background:#49545d;
@navigation-dropdown-link:@navigation-link;
...
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 {
color:@searchbox-text;
font-size:19px;
}
}
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.
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>
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:
@form-background-color:#fff;
@form-border-color:#ccc;
@form-color:#555;
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:
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'>
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:
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">
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.