"My Story" template by Hexocat - documentation

Table Of Contents

  1. Support
  2. Description
  3. Structure
    1. Overview
    2. HTML Files
    3. CSS Files
    4. Image Files
    5. JavaScript Files
    6. Other Files
  4. Features
    1. Switching Variants
    2. Twitter
      1. Stream
      2. Twitting
    3. Responsive Images
    4. Embedding Videos in Post
    5. Font Awesome
    6. Google analytics
  5. Policy

Support

Thank you for purchasing my template. Below you will find the explanation how to setup and customize this template. If you have questions that are beyond the scope of this help file, but related to the template please feel free to contact me via my ThemeForest profile.

What I support:

What I do not support:

Description

"My Story" is a portfolio website template for designers, illustrators and photographers. It is blazing fast and super responsive - fitting all mobile and tablet resolutions.

The template includes HTML, CSS, JavaScript, font files and some additional files

Structure

Overview

In order to edit the contents of the template, a basic knowledge of HTML and CSS is required, however in order to modify it, knowledge of HTML5, CSS3, JavaScript and jQuery is required.

The HTML structure of the template is based on HTML5 Boilerplate (H5BP).

I use only classes, never IDs, this is to make the CSS classes modular and reusable and also to prevent specificity "wars". Since I try to reuse classes, make sure that when you make changes they don't appear in other unwanted places.

HTML Files

CSS Files

Image files

Image files that appear in the demo are not included in the template.

The image size recommended for the "works" section in the home page and the gallery thumbnails is 520 * 640 pixels.

JavaScript Files

Other Files

There are a few other files, most of them from H5BP, that provide advanced functionality. They are not within the scope of this documentation and I strongly advise not to modify them without understanding their functionality.

Features

Switching Variants

The built-in modifications that are available are the following:

Twitter

Stream

To show live twitter stream I use LiveTwitter 1.7.4 jQuery plugin by Inge Jørgensen. All the settings for the stream appear and documanted in "main.js" file.

To start using it right away go to the calling to livetwitter (line 4 by default):

$(".tweets").liveTwitter('your-name-on-twitter', {

and put your twitter username in.

Twitting

When you click "Tweet me to let me know what you think" a twitter tweet page will open up with a text set by the template. The text is created in the "main.js" file (line 57 by default):


var twitterUrl = "http://twitter.com/home/?status=",
	beginning = encodeURIComponent("Interesting stuff on "),
	pageUrl = location.href,
	pageTitle = encodeURIComponent(document.title),
	end = encodeURIComponent(" by @user #hashtag ");
url = twitterUrl + beginning + pageUrl + end;
			

You can change the "beginning" and "end" text variables and mix their order in the "url" variable.

Responsive Images

For making the images responsive I use Adaptive-Images by Matt Wilcox. All you need to to do is move the .htaccess file (in "additional files" folder) to the root folder of your website and the hosting server must support PHP.

Embedding Videos in Post

If you want to include a youtube video in a blog post, in order to keep it's size responsive, you should wrap it with a div giving it a "video-embed" class. Like this:


<div class="video-embed"><iframe width="560" height="315" src="http://www.youtube.com/embed/_nW5AF0m9Zw" frameborder="0" allowfullscreen></iframe></div>
			

Font awesome

I use "Font Awesome" by Twitter for UI and social service images. To insert a font awesome image use the following code:

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

For the list of all available icons go to their page

Google analytics

Every page of the template is google-analytics ready. Just go to the bottom of the page, find the code and insert your site ID (if you don't use Google analytics I suggest you remove that code)

Policy

All rights for code (markup/css) and design belong to me. You can not claim you are the author of markup and design and you can not delete my name from meta in the head. Template is under protection of DMCA and any break of copyright will be reported.

Only customers who purchased the template legally via ThemeForest (not any other illegally selling templates website) will get responses to additional questions. Thank you!