Layover for Magento 1.1

5/14/2018 Layover for Magento 1.1 - slidepdf.com

http://slidepdf.com/reader/full/layover-for-magento-11 1/31

Layover

for Magento | Theme Documentation

Version 1.1Last Updated:March 3, 2011

gothemeteam.com

http://gothemeteam.com/








gothemeteam.com Layover for Magento | Theme Documentation

Table of Contents

2

Installation & Configuration.......................3Overview & System Requirements..............3Uploading Layover......................................4

The Homepage ...........................................7Components..............................................7Setting Up the Page Layout........................9

Adding the Code......................................11Gallery......................................................14Top Sellers List .........................................15Featured Items Sliders..............................16Message Box ...........................................17Newsletter Sign-Up Form.........................19

The Header................................................20

Components............................................20Adding a Logo..........................................21Navigation Menu Options .........................22

The Footer.................................................23Components............................................23

Adding a Footer........................................24

Upgrades & CSS Customization .............27

Magento Help ...........................................28

Additional Help .........................................31










Thank you for purchasing Layover for Magento!

This document provides instructions for installing and using Layover. Since the instructions are specific 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 visitwww.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

3

Installation & Configuration Overview & System Requirements

http://www.magentocommerce.com/wiki/1_-_installation_and_configuration/magento_installation_guide

http://www.magentocommerce.com/knowledge-base/entry/how-do-i-know-if-my-server-is-compatible-with-magento



http://www.magentocommerce.com/system-requirements

http://www.magentocommerce.com/download


















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 software’s root directory. If you are workingon 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 file app/etc/

modules/ThemeTeam_All.xml.

3. We have also extended a core mage controller. We have not changed any of the core files, 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 > Configuration. Click Design in the left-hand menu.

6. Under Themes, find the Default field and type layover.

4

Installation & Configuration Uploading Layover








7. Scroll down to the Header section. In the Logo Image Scr field, type images/logo.gif.

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

5


Figure 1a

Select Design








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.

11. Finally, click the following buttons: Flush Magento Cache, Flush Cache Storage, and Flush JavaScript/CSS

Cache. Clicking Flush Catalog Images Cache is optional.

6


Figure 1b










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).

7

The Homepage Components

Figure 2a

Gallery

Top Sellers list

Featured Items

sliders








gothemeteam.com Layover for Magento | Theme Documentation 8

The Homepage Components

Figure 2b

Message boxNewsletter sign-up

form








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.

9

The Homepage Setting Up the Page Layout

Figure 3a








4. Next, select Design in the left-hand menu. The following page will appear:

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.

10

Figure 3b

The Homepage Setting Up the Page Layout








The next step in setting up the homepage is entering the correct HTML. You will need to open the page’s contenteditor 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 theShow / Hide Editor

button to leave WYSIWYG mode and open the content editor:

11

Figure 4

Enter HTML here.

The Homepage Adding the Code

Click to leave

WYSIWYG mode











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...





<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/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="18" template="catalog/product/homepage-carousel.phtml"}}</div>

<a class="link-next" href="#">next</a></div></div></div></div></div>

5. Click the Save Page button. Now let’s take a closer look at the code.









The Homepage Gallery

Div id img-gallery controls the homepage’s main image gallery.

1 <div class="img-gallery">2 {{block type="catalog/product_list" category_id="ID number" template="catalog/product/homepage-gallery.phtml"}}3 </div>

Images can be pulled from a specific 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 find the ID number at the top of the page:

Since the homepage gallery only supports three blocks, it will show the first three products in a category. It may a

good idea to create a separate category ID for the gallery’s images.

Figure 5








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 top-

list.

1 <div class="two-columns">2 <div class="small-column">3 <div class="ttl-area">4 <h2>Header</h2>5 </div>6 <ul class="top-list">7 <li> <strong class="num">1</strong>8 <div class="img">9 <a href="{{store direct_url="Page URL"}}"><img src="{{skin_url='Product image URL'}}" alt="" width="58"10 height="61" /></a>11 </div>12 <div class="description">13 <a href="{{store direct_url="Page URL"}}"><strong class="product-name">Product name</strong> <span14 class="price">Price</span></a>15 </div>16 </li>17 Repeat li for each listing18 </ul>19 </div>20 <div class="big-column">21 Second column...22 </div>23 </div>








The Homepage Featured Items Sliders

The right column is wider and contains two sliders. These sliders are controlled by div class gallery-area.

1 <div class="two-columns">2 <div class="small-column">3 Top sellers list...4 </div>5 <div class="big-column">6 <div class="ttl-area">7 <h2>Header</h2>8 </div>9 <div class="gallery-area">10 <div class="column-box">11 <div id="carusel1" class="gallery"><a class="link-prev" href="#">prev</a>12 <div class="img-gallery gallery-holder">{{block type="catalog/product_list" category_id="ID number"13 template="catalog/product/homepage-carousel.phtml"}}</div>14 <a class="link-next" href="#">next</a>15 </div>16 </div>17 <div class="column-box">18 <div id="carusel2" class="gallery"><a class="link-prev" href="#">prev</a>19 <div class="img-gallery gallery-holder">{{block type="catalog/product_list" category_id="ID number"20 template="catalog/product/homepage-carousel.phtml"}}</div>21 <a class="link-next" href="#">next</a>22 </div>23 </div>24 </div>25 </div>26 </div>

Each slider pulls its slides from a specific category. Enter the category ID number in category_id (see page 14 for

instructions on getting category ID numbers).








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 doesn’t exist, click the Add New Block button

and enter Message Box as the block title and messagebox as the identifier.

2. Select Enabled in the Status drop-down menu. Click the Show / Hide Editor button to leave WYSIWYG mode

and open the content editor:

Figure 6

Enter HTML here.








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.








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.









The header is located at the top of every page. The My Account links, shopping cart, navigation menu and searchbox 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.

20

The Header Components

Figure 7

Logo My account links Shopping cart

Search boxNavigation menu









To add a logo to the header:

1. In the top menu, go to System > Configuration. Select Design in the left-hand menu.

2. Scroll down to the Header section and enter your logo’s URL in the Logo Image Src field (you may have

entered the URL for a default logo when you first installed the theme). Type the image’s alt attribute in the Logo

Image Alt field.

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

21

The Header Adding a Logo

Figure 8








The header’s navigation menu options are your product categories. If you would like to exclude a category from themenu, 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.

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

22

The Header Navigation Menu Options

Figure 9









At the bottom of every page is a footer, which has three columns with footer links and a fourth column with sociallinks and contact info.

23

The Footer Components

Figure 10

Footer links

Social links

Contact info









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 doesn’t already exist, click the Add New Block

button and enter Footer Links as the block title and footer_links as the identifier.

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 direct_url="about-magento-demo-store"}}">About Dashing Co.</a></li><li><a href="{{store direct_url="#"}}">Terms & Conditions</a></li><li><a href="{{store direct_url="#"}}">Shipping & Returns</a></li><li><a href="{{store direct_url="#"}}">Privacy Statement</a></li><li><a href="{{store direct_url="customer-service"}}">Customer Service</a></li><li><a href="{{store direct_url="#"}}">Stores and Locations</a></li>

<li><a href="{{store direct_url='contacts'}}">Contact Us</a></li></ul></div><div class="grid_3"><h3>CATEGORIES</h3>

Continued on the next page...

The Footer Adding a Footer








<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="#"><imgsrc="{{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>




http://worryfreelabs.com/

http://worryfreelabs.com/









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 <div class="grid_3">2 <h3>Header</h3>3 <ul>4 <li><a href="{{store direct_url="Page URL"}}">Link text</a></li>5 <li><a href="{{store direct_url="Page URL"}}">Link text</a></li>6 <li><a href="{{store direct_url="Page URL"}}">Link text</a></li>7 ...8 </ul>9 </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 <div class="grid_3">

2 <h3>Header</h3>3 <div id="social-links">4 <a href="Social link URL"><img src="{{skin url='Icon URL'}}" alt="Icon alt attribute" /></a>5 ...6 </div>7 <h3>Header</h3>8 <div id="contacts">9 <p>Contact information</p>10 </div>11 </div>








Upgrades & CSS Customization

27

We recommend creating a separate file for any CSS modifications (e.g. custom.css) to avoid having to redo anychanges when you upgrade the theme. Then, when you download a Layover upgrade, make sure the file is loaded

after Layover CSS files.

Here are a few resources to help you with CSS customization:

• Understanding Magento CSS

• CSS Resources

• Designing for Magento


http://www.magentocommerce.com/wiki/4_-_Themes_and_Template_Customization/0_-_theming_in_magento/designing-for-magento

http://www.magentocommerce.com/wiki/4_-_Themes_and_Template_Customization/0_-_theming_in_magento/designing-for-magento

http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/css/css_resources

http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/css/css_resources

http://www.magentocommerce.com/wiki/groups/280/understanding_magento_css

http://www.magentocommerce.com/wiki/groups/280/understanding_magento_css








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


http://www.magentocommerce.com/boards




http://www.magentocommerce.com/wiki/

http://www.magentocommerce.com/wiki/

http://www.magentocommerce.com/media/screencasts

http://www.magentocommerce.com/media/screencasts

http://www.magentocommerce.com/knowledge-base/

http://www.magentocommerce.com/knowledge-base/








Magento Help

Creating and Managing Categories

To help customers browse your online store efficiently, 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 filter through products under a particular category. Examples of filterable

attributes include price, size and color.

• Knowledge Base: How Does Layered Navigation Work?

• Magento Screencast: Layered Navigation

http://www.magentocommerce.com/media/screencasts/layerednavigation/view

http://www.magentocommerce.com/knowledge-base/entry/how-does-layered-navigation-work/

http://www.magentocommerce.com/wiki/modules_reference/english/mage_adminhtml/catalog_category/edit


http://www.magentocommerce.com/knowledge-base/entry/tutorial-creating-and-managing-categories/
















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 configure and use the Reviews & Ratings module?

• Magento Screencast: Managing Ratings and Reviews

http://www.magentocommerce.com/knowledge-base/entry/how-do-i-configure-and-use-the-reviews-and-ratings-module/

http://www.magentocommerce.com/wiki/3_-_store_setup_and_management/catalog/adding-a-new-product

http://www.magentocommerce.com/media/screencasts/creating-a-simple-product/view

http://www.magentocommerce.com/knowledge-base/entry/tutorial-creating-products/

http://www.magentocommerce.com/media/screencasts/ratings-and-reviews/view

http://www.magentocommerce.com/media/screencasts/ratings-and-reviews/view
















Additional Help

31

For further assistance, please visit Theme Team’s 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!

http://help.gothemeteam.com/

http://help.gothemeteam.com/

Layover for Magento 1.1

Documents