Created: 4/7/2012
By: Vault of Pixels
Email: themeforest@vaultofpixels.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This theme is based on the great HTML 5 Boilerplate. What it means for you and your users, is just a faster page, without any lag of compability.
We haven't included the server-configuration nor the build script file from the HTML 5 Boilerplate, but we do recommend that you check it out, for even better performance.
We're using two CSS files in this theme.
reset.css
This stylesheet is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
style.css
This stylesheet contains all of the specific stylings for the page.
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
We're also using 2 fonts from the Google Font API.
This theme imports several Javascript files. These should be concatenated for the best performance (HTML 5 Boilerplates Build Script automates this process).
modernizr.min.js
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
jquery.min.js
jQuery is a Javascript library that greatly reduces the amount of code that you must write.
jquery.address.js
The jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state. It enables a number of important capabilities including:
- Bookmarking in a browser or social website
- Sending links via email or instant messenger
- Finding specific content using the major search engines
- Utilizing browser history and reload buttons
jquery.easing.js
A jQuery plugin from GSGD to give advanced easing options.
jquery.widget.js
All of jQuery UI's widgets and interactions are built from a simple, reusable base - the jQuery UI Widget Factory. It provides a flexible base for building complex, stateful plugins with a consistent API. It is designed not only for plugins that are part of jQuery UI, but for general consumption by developers who want to create object-oriented components without reinventing common infrastructure. It does not have any dependencies on the rest of jQuery UI, but most of jQuery UI is dependent on it.
jquery.mousewheel.js
A jQuery plugin that adds cross-browser mouse wheel support.
jquery.mousewheel.intent.js
Mousewheel Intent tries to determine the users intent, to make the mousewheel event more usable.
jquery.scroll.js
jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.
jquery.tweet.js
A jQuery UI Widget based on Tweet!
jquery.validate.js
This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods.
jquery.fancybox.js
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
jquery.gallery.js
A jQuery UI Widget for displaying pagination for galleries
jquery.tooltip.js
A jQuery UI Widget for displaying tooltips
jquery.social.js
A jQuery UI Widget for displaying social networks
plugins.js
Plugins simply contains a plugin that enables placeholder capabilities for input fields, and a plugin that enable mouseevents for unsupported browsers. If you would like to add additional plugins, we recommend that you minify them and place them inside this file. (this is to avoid too many unnecessary HTTP requests).
script.js
This file is responsible for the initialization for the various plugins.
Background
This template offers a few different background combinations. You can change the background color, the background pattern or use a predifined background.
To change the background color replace the class on line 32 with either light or dark.
To change the background pattern replace the class on line 34 with either pattern-1, pattern-2 or pattern-3.
To use a predifined background replace the class on line 34 with either predifined-1 or predifined-2.
Header
We have included 11 different header colors. To change the header color, you need to change the class on the #card-header div (on line 46). The included colors is:
- red (default)
- light-red
- orange
- brown
- light-purple
- grey
- dark-grey
- blue
- matte-blue
- green
- graphite
Logo
The vCard logo is limited to have a width of 254 pixels and a height of 68 pixels. The logo is located in /resources/img/logo.png. For best result make your logo white and transparent.
vCard download
The downloadable vCard is located in the root folder, and is named card.vcf. To change the download url, go to line 48 on index.html and change the data-download property on the div.
Custom scrollbar
To apply the custom scrollbar on any div just add the class scrollable, and define a height.
Button color
As of version 1.1 we added a new default button color: grey. If you prefer the blue button, you just have to add the class blue to the button.
<div class="button blue mouse-events"><div>Send email</div></div>
Header button
As of version 1.2 we added a new header button: a "Hire me" button. If you want to use the "Hire me" button, then add the class hire to the #card-header-button div:
<div id="card-header-button" data-download="card.vcf" class="hire mouse-events"></div>
Action
There are 3 different actions availiable for the header button: The first one is download, which is the one that is used by default. The second one directs to a page on the site, for example contact. The last one opens any url (in a new tab). You can use more than one action at a time. Here are some examples on how to use the actions:
<div id="card-header-button" data-download="card.vcf" class="download mouse-events"></div>
<div id="card-header-button" data-page="contact" class="download mouse-events"></div>
<div id="card-header-button" data-url="http://linkedin.com/" class="hire mouse-events"></div>
Portrait image
The portrait image is located in /resources/img/portrait.jpg and have a width of 200 pixels and a height of 253 pixels. For best result, be sure that you save your portait image with those dimensions.
Skill bars
There are 11 different skill bars, they range from empty to full. To create an empty skill bar just use the class skill-bar. If you would like to fill half of it, then just append -5 to the class, so it looks like this: skill-bar-5. You can replace 5 with a number between 1 and 10. We encapsulate the bar and the label within a list-item that has the non-semantic helper class clearfix to ensure that the content beneath the bar is not collapsing. An example:
<ul class="skills"> <li class="clearfix"> <div class="skill-bar-10"></div> <div class="skill-label">Photoshop</div> </li> </ul>
Images
We have implemented the Fancybox plugin for the gallery. You can edit the options for the plugin in resources/js/script.js from line 17. You can insert your images in index.html from line 126. Every single image should look like this: (you may add a rel attribute for the a tag for arrow navigation within the lightbox)
<li> <a href="FULLSIZED IMAGE"><img src="THUMBNAIL" alt="" /></a> </li>
Social networks list style
There are 2 different ways to display your different social networks, the text way, and the tooltip way. This can be changed in resources/js/script.js on line 26.
Social networks markup
The social network markup looks like this:
<li><a href="#"><img src="ICON" data-text="TEXT" data-network="NETWORK" /></a></li>ICON - File path for icon
Twitter integration
You can change your Twitter username in resources/js/script.js on line 30. On the line below that you can change how many tweets you would like to show.
Recipient of the email form
To edit the recipient of the email form, open mail.php (located in /resources/php/), go to line 24 and switch the current email out with yours.
$receiver = "YOUR EMAIL ADDRESS";
Slide to submit
As of version 1.3 we added a new way to submit the contact form "Slide to submit", it's a very intuitive captcha system. This prevents a large amount of spam mails. It's based on the QapTcha jQuery plugin. To use the old button, just replace the .submit-slider div with the following:
<div class="button mouse-events"><div>Send email</div></div>
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Vault of Pixels