2013 2012 2011

Magento Club Templates

Kirigami Responsive Magento Template

Magento
Magento 1.7

Kirigami, the 15th Magento template release, is our first responsive Magento theme. A responsive design adapts itself to a particular viewing environment such as desktop or mobile, without the need for separate layouts for varying platforms.

The theme boasts 10 style variations, with our 12 RokMage extensions seemlessly integrated with the design.

Responsive Magento Template

Responsive Magento Template

Kirigami is a responsive Magento theme. That means that there's no need for an additional mobile version of your store, as the template automatically adapts to the viewing device, such as a smartphone, tablet or desktop, based on the resolution of the screen.

This is achieved through @media queries - which can detect the width of the browser window, and allow for different CSS accordingly. It also detects if you are viewing from a mobile device, and if so, will display a mobile optimized version of our ProductView extension, complete with a product image gallery that can be browsed with touch slide gestures.

There are 5 "breakpoints" for the template, each one optimized to display your products prominently, making sure that everyone can browse your store from whatever device they please, from mobiles up to widescreen desktops. For example, the menu system for a smartphone device will be that of a select-field (a select field is a great solution for this because most phones have nice native select UI elements), whilst desktops will get the full animated dropdown menu.

12 Integrated RokMage Extensions

RokMage Integrated Extensions Kirigami utilizes 12 of our custom RokMage Magento extensions, which come fully integrated with the template. Completely configurable from the admin panel, via System -> Configuration -> RT RokMage Modules, these extensions allow you to easily arrange your store exactly how you wish - adding a vast amount of extra options not otherwise available - and giving you unprecedented control over the design of your store.
More Details...


Features and Screenshots


10 Preset Styles RokMage Integrated Extensions - Admin Panel Recently Viewed Thumbs RokMage MageMenus Extension - jQuery Powered Menus jQuery Accordion Menus and Product Filters RokMage ProductView Zoom and Pan RokMage ProductVideo Extension RokMage ModalHeader Extension - Modal HeaderCart

  • 10 Preset Color Variations
  • MageMenus extension
  • ModalHeader extension
  • HomepageGrid extension
  • CategoryView extension
  • ContentSlider extension
  • ProductScroller extension
  • ProductView extension
  • CmsCallouts extension
  • ImageBorders extension
  • FooterBlock extension
  • ProductVideo extension
  • FeaturedProducts extension
  • Recently Viewed Footer Thumblist
  • Smooth jQuery menu and other animations
  • FF4+, Opera 9.6, Safari 3, IE8, 9 Compatible
  • W3C XHTML 1.0 Strict. W3C CSS Valid

Installation


Downloading the Theme Files

To install the theme, you only need one file:-

  • Kirigami Theme (rt_kirigami_m.zip) This file is the template package you will use to install your template in Magento. All files are laid out in the correct directory structure, so are ready to be dropped into an existing Magento installation.

There are other files that you may wish to download that accompany the release, but are not required for the theme to work.

  • Kirigami Source PNG(s) rt_kirigami_m-sources.zip – This contains all the Adobe Fireworks PNG source files for the template, and if applicable, the logo font.

Using FTP

  • Extract rt_kirigami_m.zip
  • Open your FTP client (for example FileZilla)
  • Upload the contents of the unzipped folder to your Magento root directory, being sure to Merge and not Overwrite the files!
  • Login to the Magento administrator dashboard (http://www.yoursite.com/admin/ by default)
  • Go to System -> Configuration
  • Click the Design tab on the left
  • Under the Package heading, add kirigami as the Current Package Name
  • Under the Themes heading, add style1 (or which ever preset you prefer) as the Skin (Images / CSS), and light as the Default, and save
If you receive an "Access Denied" error in the admin section after uploading the files, simply log out and log in again to reset the session.

Installing the RokMage extension settings

The integrated RokMage extensions are all incuded in the download zip. However, the configuration settings for each extension also make up part of the theme, as they control image sizes, layout options, animation settings and so on, so these also need to be added. If you've set up a fresh magento store (with or without sample data) and have yet to start on any customization, you can simply drop the extension settings sql installer file (mysql4-install-1.0.php) into the ExtensionSetup module (app/code/community/Rockettheme/ExtensionSetup/sql/extensionsetup_setup/), replacing the dummy file that's currently there, and it will add the correct tables to your database, complete with the correct settings for each extension.

It will also automatically edit your CMS homepage to show the HomepageGrid extension, edit the other default CMS pages to use the correct RokMageLayout for the theme, and edit the footer menu CMS block to work within the FooterBlock extension. Be sure to replace the installer file BEFORE you add the theme files to your Magento installation, otherwise the ExtensionSetup module will run with the dummy file in place.

You can download the extension settings installer file from the template download page.

NOTE: If you have already made customizations to your Magento store (CMS pages, store views, CMS blocks etc) or you have already installed the RokMage extensions with another theme and do not wish to lose your current settings, do NOT use this installer file, as it will override your current setup. If you are comfortable dealing with sql statements, you can of course edit the installer file to suit your needs. If not, you should add the extension settings manually through the admin configuration page.

Installing a Kirigami Demo Store (with Sample Data)

If you wish to see the theme in a full store setting, you can download the Kirigami RocketLauncher. This will install a complete version of Magento, along with all template files and extensions, plus the Magento sample data.

Instructions

  • Download the Kirigami RocketLauncher Package (rt_kirigami_m-rocketlauncher.zip) from the Kirigami template downloads section
  • Unzip the package on your computer to reveal the rt_kirigami_m-rocketlauncher folder
  • Upload this to your webspace using your FTP client
Note, on some servers, you can upload the zip and extract the package directly onto your server using cPanel or SSH access. For more details on this, please contact your hosting provider.
  • Direct your browser to the installation (for example www.yoursite.com/rt_kirigami_m-rocketlauncher)
  • Follow the installation instructions, inserting your database information (host name, mysql username and mysql password)
  • Complete your installation
Once installation has completed, sign in to the admin and re-index data (you can follow the link just below the main admin menu to the "Index Management" page). Simply click "Select All" and the "Submit".

Frequently Asked Questions


What are the system requirements for running Magento?
You can check the requirements on the main Magento site here.
Where can I find the RokMage extension settings?
  • Log in to the Magento admin panel
  • Go to System -> Configuration
  • Look under the RT RokMage Modules section in the left side menu
How do I add the HomepageGrid to my stores homepage?
  • From the Magento admin, go to CMS -> Pages
  • Either select your current Homepage or make a new one if needed
  • Add the following to the content section, replacing any text that may already be there: 
    {{block type="catalog/product_list" name="rokmage_homepage_grid" template="rokmagemodules/rokmage-homepagegrid/rokmage-homepage-grid.phtml"}}
NOTE: Your content for the Homepage should now be added via the HomepageGrid config section, under System -> Configuration.
I can't see any changes I made - how do I disable the cache?
  • From the Magento admin, go to System -> Cache Management
  • Click "Select All" and set the "Actions" dropdown to "Disable" and hit Submit
TIP: Don't forget to re-enable the cache once you're finished with the design process, as this will greatly increase the speed of your store.
How do I add this theme to my current store?
  • From the Magento admin, go to System -> Configuration
  • Click the "Design" tab on the left
  • Under the "Package" heading, add "kirigami" as the Current Package Name
  • Under the "Themes" heading, add "style1" as the Skin (Images / CSS), add "light" as the Default and save
Can I have different themes/theme settings for different store views?

Sure. Simply follow the same procedure as above, but this time, using the "Current Configuration Scope" dropdown at the top left, select the store you wish to add the theme to. You will need to un-check "Use Website" next to each input. You can also edit any of the RokMage extension settings, again by un-checking "Use Website" next to each input, and the newly added settings will only apply to the current store.

I'm getting an "Access Denied" error in my admin after installing a template?

Simply log out and log in again to fix it.

I already installed the RokMage extensions with another RocketTheme template - can I just add the theme files without overwriting my current extension settings?

Yes. Simply copy over the Kirigami folders in skin/frontend and app/design/frontend, to the same locations in your Magento directory. Then follow the instructions above on adding the theme to a current store. Bear in mind that the extension settings do form part of the theme, so things may not look exactly like the Kirigami demo.

My installation isn't working or I'm getting a 404 error page, what do I do?

Please check your file permissions are correct, as per the official installation instructions. If you're still having problems, and your current hosting platform does not seem to be letting Magento install, it's very possible that Apache is running PHP in an suEXEC/suPHP Environment. In that case, you can try downloading this file, and upload it to the directory you are installing Magento in. Next, visit "http://MY_MAGENTO_SITE.com/magento-cleanup.php", replacing "MY_MAGENTO_SITE.com" with your domain. This sorts through the file permissions, clears the cache, and makes it possible for Magento to operate correctly. Please delete this file from your server when you are done.

Changelog

Please see the Kirigami downloads page for a changelog.

Member Login: