Crisp.

Created: 19/10/2012
By: aether_
Email: contact@aetherdesign.net

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!


Table of Contents

  1. Installation
  2. Customization
  3. Compatability
  4. Sources and Credits

A) Installation

Installation is pretty easy. All you need to do is unzip the file, and upload the contents to your server via FTP.


B) Customization - top

You can custom pretty much everything in the theme.

File Structure

HTML

In the root directory you will find 11 .html files for the main designed pages - the home page (and alternative), the portfolio, the blog and the contact page.

CSS

In the css dir you can find:

Images

The images such as icons and thumbnails can be found in the images directory, and in the css folder there is another directory for images, used for short-coded elements in the theme and images referenced in the CSS and not in the HTML, which are irrelevant to content.

Javascript

There are two files included - the custom.js and the plugins.js. In the custom file there are various setups for the plugins and custom scripts for the navigation and contact form. In the plugins file there are the minified versions of the plguins used - properly referenced for you to check out the sites should you need some help with those.

Content

The HTML is well structured with comments on every section you need to edit, just look for the <!-- --> tags in the code to see the name of the section you are editing.

If you make changes to the overall positioning of the elements you need to familiarise yourself with the grid used when creating the theme. Crisp is built on Skeleton which is a 16 column grid, you can learn more about it here.

Common Elements

Here is the guide on how to custom the common elements recurring in all pages.

Fonts

The fonts used are from the Google Web font library. You can change the font by editing the url provided in the HTML where marked and reflect that change in the css.

Images

To implement images you need to familiarize yourself with the retina support. The code responsible for retina images automatically detects whether the site is being viewed from an retina enabled device and replaces the standard images referenced in the HTML code with retina ones. To achieve this properly you need two sets of images ready for the elements such as icons, the logo etc. The former being the normal file (for example logo.png) and the latter the retina image (exactly twice the resolution of the original) with Apple's prescribed high-resolution modifier (@2x) so in this case logo@2x.png. Both images should be placed in the same directory and in the HTML <img> tag you need to set the width and height of the original image.

For the thumbnails it would be easier to keep the aspect ratio provided for the images I have set up for the theme, but should you wish to deviate from this just make sure that they are at least 420px wide.

Navigation

The theme utilizes two navigation bars, one when viewed on a larger device ( i.e. PC, Laptop ) and the other visible only to mobile devices.

Making a change in the navigation should be reflected in the mobile navigation, all you need to do is make sure you follow the same structure provided when making changes. Navigation items are list items of an unordered list and the drop-down is a separate unordered list featured in the list item you wish to assign a drop-down to.

Footer

The Footer has another navigation associated with it. You need to reflect changes made to the main navigation here as well.

Sidebar

On some pages there is a sidebar that includes twitter feed and flickr feed. To set up the feeds just open js/custom.js and place your twitter username and flickr ID where marked in the file.

Slider

The setup for the slider is in a different document called slider.txt located in the _documentation folder.

Portfolio Filters

In the portfolio page there is an option to set up filters. To customize it just make sure to set up your categories and reflect those as a clas to the thumbnail list item. For instance if you add super design as a category to the filter list, add the class super-design to the thumbnails you wish to be associated with this category.

Single-Project Slider

To set up the slider, just replace the images provided in the images/project folder with your own (make sure to create thumbnail versions of those too).

Email Form

To set up the form you need to open post.php and place your email where marked in the file and you are good to go.

Shortcodes

You can check out the HTML code behind the features page and see snippets of different styled elements: accordion, tabs, alerts, info box, lists, dropcaps, blockquote and buttons.


C) Compatability - top

This template was tested in a vast majority of browsers.

If you found a bug, please use the theme comment section or report it to us describing:

  1. Operating System
  2. Browser version
  3. What is needed to replicate it

Compatible with:

This theme is fully responsive and compatible with all major devices:



D) Sources and Credits - top


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.


Go To Table of Contents