The easiest way to install the Quasar theme is using our
Quasar RocketLauncher
- this includes a full Magento installation, simple sample data (that can be easily deleted with no adverse affects) and the theme and extensions, along with all the correct settings. You can watch a video tutorial on installing a RocketLauncher
here
. However, if you wish to install the theme on an existing Magento site, read on.
This guide assumes you have already installed your Magento store, with or without sample data, and you now wish to install the Quasar theme.
Downloading the Theme Files
To install the theme, you only need one file:-
rt_quasar_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.
rt_quasar_m-sources.zip
) – This contains all the Adobe Fireworks PNG source files for the template, and if applicable, the logo font.
Using FTP
Upload the contents of the unzipped folder (the
app, js and skin folders) to your Magento root directory, being sure to Merge and not Overwrite the files!
Login to the Magento administrator dashboard (
www.yoursite.com/admin/
by default)
System -> Configuration
Click the Design tab on the left
Under the Package heading, add
quasar_free as the Current Package Name
Under the Themes heading, add
style6 (or which ever preset you prefer) as the Skin (Images / CSS), and light as the Default, and save
Under the Header section, add
images/logo.png to the Logo Image Src input.
If you receive an "Access Denied" error in the admin section after uploading the files, simply log out and log in again to fix it.
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 Quasar extension settings installer file
here
.
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.
Manually configuring the Quasar template settings
If you decide not to use the Extension Settings Installer, there's also a few things you need to do besides adding the correct settings to the extension config pages.
Firstly, you'll need to go to CMS -> Pages, and select your current homepage from the list. Click the Design tab on the left, and use the Layout dropdown to select RokMage 3 columns layout, and then add the code for the HomepageTabs extension into the content area and save:
{{block type="catalog/product_list" name="rokmage_homepage_tabs" template="rokmagemodules/rokmage-homepagetabs/rokmage-homepage-tabs.phtml"}}
You should also set your other CMS pages to use the RokMage 3 columns layout.
You can now configure your homepage content using the HomepageTabs extension (System -> Configuration -> RT RokMage Modules -> HomepageTabs).
Next up, go to CMS -> Static Blocks and select Footer Links. Click "Hide Editor", and then replace the content with the following and save:
<li><a href="{{store direct_url="about-magento-demo-store"}}">About Us</a></li>
<li><a href="{{store direct_url="customer-service"}}">Customer Service</a></li>
You can also remove these links, or add additional links in the same format - these will be added to the footer menu.
Quasar extension settings (recreating the demo)
All of these settings should be added to the relevant sections under System -> Configuration -> RT RokMage Modules. Any settings not mentioned below can be left as default.
HomepageTabs
GENERAL
Enable Homepage Tabs: Yes
PRODUCT GRID SETTINGS
Number of products to show in grid: 6
Default products layout: Grid
Select "Featured" category: (Choose a category from the list)
Show New Products tab: Yes
Show On-Sale Products tab: Yes (will only show if there are products on sale)
Image Height: 90
Image Width: 90
Disable Ribbons: No
Filter By Store Root: No
CmsCallouts
GENERAL
Enable Left CMS Callout: Yes
Enable Right CMS Callout: Yes
CONTENT
Left Callout Title: Left CMS Callout
Left Callout Text: <p>You can add your content here by going to Admin -> Config -> CmsCallouts -> Left Callout Text. You can also disable this box entirely.</p>
Right Callout Title: Right CMS Callout
Right Callout Text: <p>You can add your content here by going to Admin -> Config -> CmsCallouts -> Right Callout Text. You can also disable this box entirely.</p>
NOTE: Be sure to disable your cache whilst working on a store, otherwise you will see the cached version on the frontend and won't see any changes you make. Go to System -> Cache Management, select all, disable and save.
IE6 Support
This template doesn't support IE6, instead redirecting IE6 users to an "Unsupported Browser" page. This page is added automatically by the RocketLauncher, but if you're installing manually, you'll also need to add this. So, to do so, go to CMS -> Pages and make a new page, called "IE6 Redirect". Set the identifier as ie6-redirect - this is important as it's what is used by the redirect script so make sure to set it this way. Then, set the layout as 1 column, and title and content as you wish. To set the same as the RL version, use the title "Unsupported Browser" and add your content as follows (with editor hidden):
<p>You are using a browser that is not supported by this website. That probably means your browser is woefully out of date, insecure, and just generally lacking in standards. Luckily for you there are literally 10s of modern, standards compatible browsers available to you at no cost. All you need to do is simply take the time to install one.</p><p>We suggest either installing the latest version of <a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>, <a href="http://www.google.com/chrome">Google Chrome</a>, <a href="http://www.apple.com/safari/download/">Safari</a>, <a href="http://www.opera.com/">Opera</a> or upgrading your current version of Internet Explorer to <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages">IE9</a>.</p>