Upgrade Karma HTML Web Template to 3.0

Posted in: ,
We highly recommend backing up your original website before making any of the changes outlined below.

Overview

This article describes how to upgrade your Karma HTML website template to the new responsive version 3.0. If at all possible we highly recommend to start from scratch using Karma 3.0 rather than following the update instructions below.

Here’s a quick overview of the changes required:

  1. Add new files to your current website
  2. Replace existing files in your current website
  3. Modify existing code within your current website

1. Add New Files

Please copy the following files from Karma 3.0 into your existing website:

  1. jquery-1.8.3.js – located within this folder: js
  2. jquery.cu3er.player.js – located within this folder: js
  3. _mobile.css – located within this folder: css
  4. mobile-bg-jquery2-banner.png – located within this folder: images/_global
  5. mobile-nav-btn.gif – located within this folder: images/_global
  6. mobile-search-bg.png – located within this folder: images/_global
  7. image-frame-sprite-2.png – located within this folder: images/_global

2. Replace Existing Files

Please replace the following files from Karma 3.0 into your existing website:

  1. style.css – located within the root directory of your website
  2. global-sprite.png – located within this folder: images/_global

3. Modify Existing Code

Modifying code can be a long and drawn out process. For these changes we highly recommend using the “find and replace” feature of your code editor. This will enable the changes to occur across every file of your website after executing only a single “find and replace” search.
(we use Adobe Dreamweaver for code editing.)
  1. Open up one of the HTML page templates. (ie. template-blog.html)
  2. Execute the 6 “search and replace” functions outlined in these notes:
    Karma HTML search-and-replace