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.
"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
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.
Normalize.css - Part of the HTML5 Boilerplate, resets default browsers styles, so when other styles implemented they look the same in all browsers.
Main.css - Most of the structure of all pages, including:
Typography.css - text styling, including:
Font-face.css - Here are all the @font-face imports
Color schemes (folder) contains dark/light folders – each color scheme has a dark and light variant, 6 schemes altogether.
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.
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.
The built-in modifications that are available are the following:
Color and shape variants:
There are 12 variants of the website - square and hexagon shapes, dark or light background and 3 color schemes. You can choose any mix of the variants you like - simply go to the "variants" folder, find the one you like, take the files from the color folder and copy them to the main folder, overwriting the existing files.
2-4 images in the "works" section in the main page
The template comes by default with 3 images in the "works" section, if you want to have 2 images, remove the link with "category" class from the div with "works" class. This is the code to remove:
<a href="gallery.html" class="category category-1">
<div class="wrapper">
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail">
</div><!--wrapper-->
<div class="category-name"><h2 class="nav-font">Print</h2></div>
</a><!--category-1-->
To to have a forth work, duplicate the code above and change the class of "works" class div to "four works"
Using two-column blog posts for iPad and other tablets
The 2 columns will appear when using tablet-size monitors, if you prefer to always have only one column, go to "post.html" find main article tag (line 33 by default):
<article class="post two-column">
And remove the "two-column" class.
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.
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.
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.
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>
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
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)
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!