HalfToneTemplate Documentation by Luis Zuno

Thank you for downloading my theme. If you have any questions that are beyond the scope of this help file i don't offer support however you can always visit the forums other members may help you there.

Descriptiontop

HalfToneTemplate is a theme with a responsive design for your creative portfolio. Showcase your work display, blog, videos, image galleries and more. View the online demo

Installling the Fonts top

The download theme doesn't come with the fonts in the preview, but don'w worry its pretty easy to install them. Just go the links below and uncompressed the fonts files to the font folder.

HTML

This theme is a responsive layout theme made in valid HTML 5 markup, its perfect for personal blog/portfolio style websites. Also this site is responsive to all major devices (Tablet and iphone) to date.

HTML Structure top

The HTML structure for the pages are the a HEADER a #MAIN and a FOOTER all inside of a div wrapper to align everything.

File list top

This download package contains all the necessary HTML, CSS, JS and Image files necessary to build a complete site. I will post the editable PSD files at my site pretty soon.

Tooltips top

For the tooltips i am using a javascript library called poshytip its very easy to set up. The default browser tooltip that displays the value of the title attribute is replaced with a "poshier" version just add a title text and a class of poshytip.

Example

<a href="#" title="I am a tooltip" class="poshytip">Tool tip</a>
         
         
<img src="image.jpg" title="I am a tooltip" class="poshytip" alt="Image" />

Google Map top

To set your own google map follow these 3 steps:

1) Go to http://itouchmap.com/latlong.html to get the Latitud and Longitud values from the itouch map app.

2) Edit your "contact.html" file around line #164 and enter the values for the Api key, the Longitude and the Latitude values:

var latlng = new google.maps.LatLng(-34.397, 150.644);

Contact Form top

There are 2 files nedded filed needed for the FORM VALIDATION (js/form-validation.js) and the PHP (send-mail.php) that actually sends the data .

The HTML

Configuring the email recipients and data

To set the sender and the recipients just change the value for the hidden input values inside the contact.html.

Form validation

Form-validation.js This is the javascript validation for the fields.

How to add fields to the contact form:

CSS Files and Structuretop

All the CSS files are stored in a folder named css on the root of the html files.

There's a main css css/style.css with all the styles for the site it also calls different css files that help to reset the styles and some other css files for the social icons and the web elements.

List of css files under the CSS folder:

comments.css

Use this file to edit the visual of the comments on the single.html template page

jquery.tweet.css

To edit the appearance of the tweets

reset.css

Core CSS file needed to display correctly by reseting the default values

social.css

The list of social icons files

style.css

This is the main styles for the whole site, in there you will probably find the most CSS rules for the template

superfish.css

This is a core file for the correct display of the dropdown menu

lessframework.css

This is responsible for the responsiveness depending on the device or browser size.

nivo-slider.css

Style the home page page image slider.

shortcodes.css

This one styles all the web elements such accordions, tabs, buttons...

widgets.css

For the sidebar and footer elements

LESS Filestop

I have included a folder with the LESS files in case you are developer and want to use them instead of the CSS files. You should see this folder named "LESS" on the root folder.

Image Filestop

All the graphic elements for the entire theme are contained at the "img" folder. The mockup images used to feed the site are contained at the "img/dummies" folder.

I will post the editable PSD files at my site pretty soon.

Javascripttop

All the pages link the neccessary js files inside the "head" tag of the document. If you need to modify the behavior from a certain jquery element open the "js/custom.js" file. where you can alter the parameters of some of the js elements.

Twitter Configurationtop

To display your own tweets open your js/custom.js file around line #4 and change the username value for yours. That easy!

//##########################################
// Tweet feed
//##########################################

$("#tweets").tweet({
    count: 3,
    username: "ansimuz"
});

Credits

This theme uses work from the following resources:

Imagestop

Scriptstop

Fontstop