Layover for Magento Documentation

Layover
for Magento | Theme Documentation
Version 1.1
Last Updated: March 3, 2011
gothemeteam.com
Table of Contents
Adding a Footer........................................24 Installation & Conguration.......................3 Overview & System Requirements..............3 Uploading Layover......................................4 Upgrades & CSS Customization .............27 The Homepage ........................................... 7 Magento Help ...........................................28 Components ..............................................7 Setting Up the Page Layout........................9 Additional Help......................................... 31 Adding the Code ......................................11 Gallery......................................................14 Top Sellers List .........................................15 Featured Items Sliders..............................16 Message Box ...........................................17 Newsletter Sign-Up Form .........................19 The Header................................................20 Components ............................................20 Adding a Logo..........................................21 Navigation Menu Options .........................22 The Footer.................................................23 Components ............................................23
gothemeteam.com
Layover for Magento | Theme Documentation
Installation & Conguration Overview & System Requirements

Thank you for purchasing Layover for Magento! This document provides instructions for installing and using Layover. Since the instructions are specic to the theme, they do not cover every Magento function. For more information on using Magento, please see the Magento Help section for additional resources. Layover requires Magento Community Edition 1.5.0.1 and PHP 5.2.13 or newer. The theme does not support any other versions of the Community Edition and does not support Magento Enterprise Edition. Please visit www.magentocommerce.com/download to download the correct version of Magento. Before downloading Magento, make sure you meet the system requirements and test the compatibility of your server. For help with installing Magento, please refer to the following links:
Magento System Requirements Server Compatibility Check Magento Installation Guide
gothemeteam.com
Installation & Conguration Uploading Layover

Before you begin the theme installation process, we recommend backing up your Magento installation and database. To upload Layover to Magento: 1. Unzip the downloaded layover-magento-theme folder. 2. Using an FTP client, copy the app and skin folders to the Magento softwares root directory. If you are working on a Mac, please make sure you are merging the new folders with Magento and not replacing the Magento directory. You will also need to upload the directory app/code/local/ThemeTeam and the le app/etc/ modules/ThemeTeam_All.xml. 3. We have also extended a core mage controller. We have not changed any of the core les, just created a new controller to extend a product view. Please copy the app/code/core/Mage/Catalog/controllers/Ajax folder. 4. Log on to the Magento admin panel. 5. From the top menu, go to System > Conguration. Click Design in the left-hand menu. 6. Under Themes, nd the Default eld and type layover.
gothemeteam.com

7. Scroll down to the Header section. In the Logo Image Scr eld, type images/logo.gif.
Select Design
Figure 1a
8. Click the Save Cong button at the top of the page.
gothemeteam.com

9. Next, you will need to clear the store cache and all cookies. From the top menu, go to System > Cache Management. 10. Click Select All on the left side of the page. On the right side, select Refresh in the Actions drop-down menu and click the Submit button.
Figure 1b
11. Finally, click the following buttons: Flush Magento Cache, Flush Cache Storage, and Flush JavaScript/CSS Cache. Clicking Flush Catalog Images Cache is optional.
gothemeteam.com
The Homepage Components

This section will help you create the Layover homepage, which consists of the components found in Figures 2a and 2b (the top and bottom halves of the page, respectively).
Gallery
Top Sellers list Featured Items sliders
Figure 2a
gothemeteam.com
The Homepage Components
Message box
Newsletter sign-up form
Figure 2b
gothemeteam.com
The Homepage Setting Up the Page Layout

To set up the homepage layout: 1. Go to CMS > Pages and select Home page from the list of pages. 2. Select Enabled in the Status drop-down menu. 3. Click the Save Page button.
Figure 3a
gothemeteam.com
The Homepage Setting Up the Page Layout

4. Next, select Design in the left-hand menu. The following page will appear:
Figure 3b
5. Select 1 column from the Layout drop-down menu. 6. In the Layout Update XML box, either remove the existing content or add the following tag around the existing content:

7. Click the Save Page button.
gothemeteam.com
10
The Homepage Adding the Code

The next step in setting up the homepage is entering the correct HTML. You will need to open the pages content editor to enter the code. 1. If you have navigated away from the homepage, go to CMS > Pages from the top menu. Select Home page. 2. In the left-hand menu, click on Content. 3. Click the Show / Hide Editor button to leave WYSIWYG mode and open the content editor:
Click to leave WYSIWYG mode
Enter HTML here.
Figure 4
gothemeteam.com
11

4. Copy and paste the following sample code into the content editor. Modify it later with your own content.
<div class="img-gallery">{{block type="catalog/product_list" category_id="26" template="catalog/product/homepage-gallery.phtml"}} </div> <div class="two-columns"> <div class="small-column"> <div class="ttl-area"> <h2>Top Sellers</h2> </div> <ul class="top-list"> <li> <strong class="num">1</strong> <div class="img"><a href="{{store direct_url="mens/shoes/shoes-a.html"}}"><img src="{{skin_url='images/img-06.jpg'}}" alt="" width="58" height="61" /></a></div> <div class="description"><a href="{{store direct_url="mens/shoes/shoes-a.html"}}"><strong class="product-name">Military Boots</ strong> <span class="price">$120</span></a></div> </li> <li> <strong class="num">2</strong> <div class="img"><a href="{{store direct_url="mens/shoes/shoes-b.html"}}"><img src="{{skin_url='images/img-07.jpg'}}" alt="" width="58" height="47" /></a></div> <div class="description"><a href="{{store direct_url="mens/shoes/shoes-b.html"}}"><strong class="product-name">Gaming Mouse</ strong> <span class="price">$14</span></a></div> </li> <li> <strong class="num">3</strong> <div class="img"><a href="{{store direct_url="mens/shoes/shoes-c.html"}}"><img src="{{skin_url='images/img-08.jpg'}}" alt="" width="58" height="47" /></a></div> <div class="description"><a href="{{store direct_url="mens/shoes/shoes-c.html"}}"><strong class="product-name">Purty Belt</ strong> <span class="price">$230</span></a></div> </li> </ul> </div> <div class="big-column"> <div class="ttl-area">
Continued on the next page...

gothemeteam.com
12

<h2>Featured Items</h2> </div> <div class="gallery-area"> <div class="column-box"> <div id="carusel1" class="gallery"><a class="link-prev" href="#">prev</a> <div class="img-gallery gallery-holder">{{block type="catalog/product_list" category_id="3" template="catalog/product/homepagecarousel.phtml"}}</div> <a class="link-next" href="#">next</a></div> </div> <div class="column-box"> <div id="carusel2" class="gallery"><a class="link-prev" href="#">prev</a> <div class="img-gallery gallery-holder">{{block type="catalog/product_list" category_id="18" template="catalog/product/homepagecarousel.phtml"}}</div> <a class="link-next" href="#">next</a></div> </div> </div> </div> </div>
5. Click the Save Page button. Now lets take a closer look at the code.
gothemeteam.com
13
The Homepage Gallery

Div id img-gallery controls the homepages main image gallery.
1 2 3 <div class="img-gallery"> {{block type="catalog/product_list" category_id="ID number" template="catalog/product/homepage-gallery.phtml"}} </div>
Images can be pulled from a specic product category by entering its ID number in category_id. Category ID numbers can be found by going to Catalog > Manage Categories in the admin panel. Click on the desired category and you will nd the ID number at the top of the page:
Figure 5
Since the homepage gallery only supports three blocks, it will show the rst three products in a category. It may a good idea to create a separate category ID for the gallerys images.
gothemeteam.com
14
The Homepage Top Sellers List

The next section has two columns. The left column contains a Top Sellers list, which is controlled by ul class toplist.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <div class="two-columns"> <div class="small-column"> <div class="ttl-area"> <h2>Header</h2> </div> <ul class="top-list"> <li> <strong class="num">1</strong> <div class="img"> <a href="{{store direct_url="Page URL"}}"><img src="{{skin_url='Product image URL'}}" alt="" width="58" height="61" /></a> </div> <div class="description"> <a href="{{store direct_url="Page URL"}}"><strong class="product-name">Product name</strong> <span class="price">Price</span></a> </div> </li> Repeat li for each listing </ul> </div> <div class="big-column"> Second column... </div> </div>
gothemeteam.com
15
The Homepage Featured Items Sliders

The right column is wider and contains two sliders. These sliders are controlled by div class gallery-area.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <div class="two-columns"> <div class="small-column"> Top sellers list... </div> <div class="big-column"> <div class="ttl-area"> <h2>Header</h2> </div> <div class="gallery-area"> <div class="column-box"> <div id="carusel1" class="gallery"><a class="link-prev" href="#">prev</a> <div class="img-gallery gallery-holder">{{block type="catalog/product_list" category_id="ID number" template="catalog/product/homepage-carousel.phtml"}}</div> <a class="link-next" href="#">next</a> </div> </div> <div class="column-box"> <div id="carusel2" class="gallery"><a class="link-prev" href="#">prev</a> <div class="img-gallery gallery-holder">{{block type="catalog/product_list" category_id="ID number" template="catalog/product/homepage-carousel.phtml"}}</div> <a class="link-next" href="#">next</a> </div> </div> </div> </div> </div>
Each slider pulls its slides from a specic category. Enter the category ID number in category_id (see page 14 for instructions on getting category ID numbers).
gothemeteam.com
16
The Homepage Message Box

The message box is not part of the code. It is a static block. To add a message box: 1. Go to CMS > Static Blocks. Select Message Box. If the block doesnt exist, click the Add New Block button and enter Message Box as the block title and messagebox as the identier. 2. Select Enabled in the Status drop-down menu. Click the Show / Hide Editor button to leave WYSIWYG mode and open the content editor:
Enter HTML here.

Figure 6
gothemeteam.com
17
The Homepage Message Box

3. In the Content box, enter the following code (replacing the content with your own):
<div class="message"> <div class="message-area"> <h2>Header</h2> <p>Message box content</p> </div> </div>
4. Click the Save Block button.
gothemeteam.com
18
The Homepage Newsletter Sign-Up Form

The newsletter sign-up form is a standard Magento feature. The path for the newsletter template is app/design/ frontend/default/layover/template/newsletter/subscribe.phtml. Please see the Magento Help section for resources that will help you set up this feature.
gothemeteam.com
19
The Header Components

The header is located at the top of every page. The My Account links, shopping cart, navigation menu and search box are all standard Magento features. Please see the Magento Help section for a list of resources that will help you with these features. The next page will show you how to change the logo.
Logo My account links Shopping cart
Figure 7 Navigation menu Search box
gothemeteam.com
20
The Header Adding a Logo

To add a logo to the header: 1. In the top menu, go to System > Conguration. Select Design in the left-hand menu. 2. Scroll down to the Header section and enter your logos URL in the Logo Image Src eld (you may have entered the URL for a default logo when you rst installed the theme). Type the images alt attribute in the Logo Image Alt eld.
Figure 8
3. Click the Save Cong button at the top of the page.
gothemeteam.com
21
The Header Navigation Menu Options

The headers navigation menu options are your product categories. If you would like to exclude a category from the menu, please follow the steps below. 1. In the top menu, go to Catalog > Manage Categories. 2. In the category directory on the left side of the page, select the category you want to exclude. 3. Scroll down to the bottom of the page. You will see the option Include in Navigation Menu. Select No from its drop-down menu.
Figure 9
4. Click the Save Category button at the top of the page.
gothemeteam.com
22
The Footer Components

At the bottom of every page is a footer, which has three columns with footer links and a fourth column with social links and contact info.
Social links Footer links Contact info
Figure 10
gothemeteam.com
23
The Footer Adding a Footer

The whole footer section is a static block. Follow the steps below to set up the footer. 1. Go to CMS > Static Blocks. Select Footer Links. If the block doesnt already exist, click the Add New Block button and enter Footer Links as the block title and footer_links as the identier. 2. Select Enabled in the Status drop-down menu. Click the Show / Hide Editor button to leave WYSIWYG mode and open the content editor. 3. In the Content box, enter the following code (later replacing the content with your own):
<div class="grid_3"> <h3>INFORMATION</h3> <ul> <li><a href="{{store <li><a href="{{store <li><a href="{{store <li><a href="{{store <li><a href="{{store <li><a href="{{store <li><a href="{{store </ul> </div> <div class="grid_3"> <h3>CATEGORIES</h3>
direct_url="about-magento-demo-store"}}">About Dashing Co.</a></li> direct_url="#"}}">Terms & Conditions</a></li> direct_url="#"}}">Shipping & Returns</a></li> direct_url="#"}}">Privacy Statement</a></li> direct_url="customer-service"}}">Customer Service</a></li> direct_url="#"}}">Stores and Locations</a></li> direct_url='contacts'}}">Contact Us</a></li>
Continued on the next page...
gothemeteam.com
24

<ul> <li><a href="#">Womens</a></li> <li><a href="#">Mens</a></li> <li><a href="#">Styles</a></li> <li><a href="#">Gifts</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Sales</a></li> </ul> </div> <div class="grid_3"> <h3>LEARN</h3> <ul> <li><a href="{{store direct_url="#"}}">In the News</a></li> <li><a href="{{store direct_url="#"}}">Dashing Co Blog</a></li> <li><a href="{{store direct_url="#"}}">How We Make Our Products</a></li> <li><a href="{{store direct_url="#"}}">What is Fair Trade</a></li> <li><a href="{{store direct_url="#"}}">Communities We Support</a></li> <li><a href="{{store direct_url="#"}}">Social Responsibility</a></li> <li><a href="{{store direct_url="#"}}">Our History</a></li> </ul> </div> <div class="grid_3"> <h3>FOLLOW US</h3> <div id="social-links"><a href="#"><img src="{{skin url='images/i_twitter.png'}}" alt="Twitter" /></a> <a href="#"><img src="{{skin url='images/i_facebook.png'}}" alt="Facebook" /></a> <a href="#"><img src="{{skin url='images/i_rss.png'}}" alt="RSS" /></a> <a href="#"><img src="{{skin url='images/i_linkedin.png'}}" alt="linkedIn" /></a> <a href="#"><img src="{{skin url='images/i_flickr.png'}}" alt="Flickr" /></a> <a href="#"><img src="{{skin url='images/i_video.png'}}" alt="V" /></a></div> <h3>DASHING CO.</h3> <div id="contacts"> <p>544 Oenoke Ridge<br /> New Canaan, CT 06480</p> <p>http://worryfreelabs.com<br /> Toll Free: (800) 555-1212</p> </div> </div>
gothemeteam.com
25

4. Click the Save Block button. Each column is generated by div class grid_3. To create a column of footer links, add ul to generate the links and add li for each link:
1 2 3 4 5 6 7 8 9 <div class="grid_3"> <h3>Header</h3> <ul> <li><a href="{{store direct_url="Page URL"}}">Link text</a></li> <li><a href="{{store direct_url="Page URL"}}">Link text</a></li> <li><a href="{{store direct_url="Page URL"}}">Link text</a></li> ... </ul> </div>
To create the last column, add div id social-links to generate the social links and div id contacts to generate the area with contact information.
1 2 3 4 5 6 7 8 9 10 11 <div class="grid_3"> <h3>Header</h3> <div id="social-links"> <a href="Social link URL"><img src="{{skin url='Icon URL'}}" alt="Icon alt attribute" /></a> ... </div> <h3>Header</h3> <div id="contacts"> <p>Contact information</p> </div> </div>
gothemeteam.com
26
Upgrades & CSS Customization

We recommend creating a separate le for any CSS modications (e.g. custom.css) to avoid having to redo any changes when you upgrade the theme. Then, when you download a Layover upgrade, make sure the le is loaded after Layover CSS les. Here are a few resources to help you with CSS customization:
Understanding Magento CSS CSS Resources Designing for Magento
gothemeteam.com
27
Magento Help
To make the most out of the Layover theme, you will need to familiarize yourself with Magento. There are tutorials, articles, forums and screencasts to help you learn how to use Magento and its features. This section provides helpful links to instructions on commonly used Magento features, but you can learn even more by exploring these resources:
Knowledge Base Screencasts Magento Wiki Magento Forum
gothemeteam.com
28
Magento Help
Creating and Managing Categories To help customers browse your online store efciently, you will need to organize your products into categories and sub-categories. Please read the following documentation to learn how to create and manage categories.
Knowledge Base Tutorial: Creating and Managing Categories Magento Wiki: Admin Panel > Categories > Manage Categories
Layered Navigation Layered navigation allows users to lter through products under a particular category. Examples of lterable attributes include price, size and color.
Knowledge Base: How Does Layered Navigation Work? Magento Screencast: Layered Navigation
gothemeteam.com
29
Magento Help
Adding Products You will, of course, need to know how to add products to your online store. The following links will help you set up, organize and manage your products and add images and product descriptions.
Knowledge Base Tutorial: Creating Products Magento Screencast: Creating a Simple Product Magento Wiki: Adding a New Product
Ratings and Review Module Magento gives you the option of allowing customers to rate and/or review your products. To use this feature, you will need to learn how to set up the module and manage incoming reviews and ratings.
Knowledge Base: How do I congure and use the Reviews & Ratings module? Magento Screencast: Managing Ratings and Reviews
Layover for Magento | Theme Documentation 30
gothemeteam.com
Additional Help
For further assistance, please visit Theme Teams support site at http://help.gothemeteam.com. For more information on using Magento, please use the resources mentioned in the Magento Help section of this documentation. Thank you for purchasing Layover for Magento!
gothemeteam.com
31

Layover for Magento Documentation

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Layover for Magento Documentation

Uploaded by

Copyright:

Available Formats

Layover

for Magento | Theme Documentation

Layover for Magento | Theme Documentation

Installation & Conguration Overview & System Requirements

Magento System Requirements Server Compatibility Check Magento Installation Guide

Layover for Magento | Theme Documentation

Installation & Conguration Uploading Layover

Layover for Magento | Theme Documentation

Installation & Conguration Uploading Layover

8. Click the Save Cong button at the top of the page.

Layover for Magento | Theme Documentation

Installation & Conguration Uploading Layover

Layover for Magento | Theme Documentation

The Homepage Components

Top Sellers list Featured Items sliders

Layover for Magento | Theme Documentation

The Homepage Components

Newsletter sign-up form

Layover for Magento | Theme Documentation

The Homepage Setting Up the Page Layout

Layover for Magento | Theme Documentation

The Homepage Setting Up the Page Layout

7. Click the Save Page button.

Layover for Magento | Theme Documentation

The Homepage Adding the Code

Click to leave WYSIWYG mode

Enter HTML here.

Layover for Magento | Theme Documentation

The Homepage Adding the Code

Continued on the next page...

Layover for Magento | Theme Documentation

The Homepage Adding the Code

Layover for Magento | Theme Documentation

The Homepage Gallery

Layover for Magento | Theme Documentation

The Homepage Top Sellers List

Layover for Magento | Theme Documentation

The Homepage Featured Items Sliders

Layover for Magento | Theme Documentation

The Homepage Message Box

Enter HTML here.

Layover for Magento | Theme Documentation

The Homepage Message Box

4. Click the Save Block button.

Layover for Magento | Theme Documentation

The Homepage Newsletter Sign-Up Form

Layover for Magento | Theme Documentation

The Header Components

Figure 7 Navigation menu Search box

Layover for Magento | Theme Documentation

The Header Adding a Logo

3. Click the Save Cong button at the top of the page.

Layover for Magento | Theme Documentation

The Header Navigation Menu Options

4. Click the Save Category button at the top of the page.

Layover for Magento | Theme Documentation

The Footer Components

Social links Footer links Contact info

Layover for Magento | Theme Documentation

The Footer Adding a Footer

Continued on the next page...

Layover for Magento | Theme Documentation