designing for magento commerce

8/14/2019 Designing for Magento Commerce

1/5

Designing for Magento Commerce

1. Overriding the default template structure

a. How to duplicate a design package b. How to setup new template in administration area

c. Adding custom stylesheets and js libraries (part I)

2. Using XML to change layout and META settings

a. Changing META section

b. Changing page blocks

3. Skinning templates

a. Files structure

b. Dependencies between files

c. Adding custom CSS and JS files to layout (part II)

4. Appendix

a. CSS tutorials

b. HTML tutorials

c. PHP / ZendFramework tutorials


2/5

1. Overriding the default template structure a. How to duplicate a design package

The first step will be duplicating actual template folder structure so we can always

turn back the changes if we damage anything.

Standard Magentos template structure looks like below, and we must duplicate the folders marked red . Duplicating means creating a new folder with the same contents as the source. The simpliest method is copying the folder from original package or duplicating with SSH client.

Base folder structure:

/app/design/frontend/ default / theme customizations

/skin/frontend/ default / is where design package css and images are

Lets name the new template as new_template. Then the new folder structure should look like this:

New folder structure:

/app/design/frontend/ default/ default theme

/app/design/frontend/ new_theme / our new, duplicated design folder

/skin/frontend/ default / is where design package css and images are

/skin/frontend/ new_theme / our new , duplicated skins folder


3/5

b. How to setup new template in administration area

After duplicating the folders we need to switch the template from the administration area.

Step 1. Go to System >Configuration >Design section Step 2. Input new_template in Current package name text field Step 3. Press the Save config button in the upper right corner

c. Adding custom stylesheets and js libraries (part I)

Any external stylesheet files (css) or javasript/ajax libraries (js) that we want to include in our new project must be also copied to proper folders.

Stylesheets

Copy the files to /skin/frontend/new_template/default/css folder

Dont forget

to

include

new

file

in

styles.css

file.

We

can

do

this

by

adding

a

@import url('your_new.css');

After

@import url('custom.css');

Javascript / AJAX libraries

Create a new folder under /js named custom_js and copy there your files. If you are using libraries that is also a good place to put the files into.


4/5

2. Using XML to change layout

With the use of XML we can change most every aspect of our new_template for example set another column layout for particular pages, change META information, page encoding, block types used on page etc. XML files in every folder are referring to the View which we want to change. There are always initLayout.xml files which control the View and additional XML files for extending the defaults.

a. Changing META section

The main and the most important file to set up new values for META section is config.xml file placed in app/design/frontend/new_template/default/etc folder.

Below is a short description of every META tag and possible values:

Magento Commerce

This is the name of our ecommerce site. We can change at our own sweet will.

text/html

This is default page header encoding so we should leave this as is.

utf8

UTF8 is a variable length character encoding for Unicode. It is able to represent any character in the Unicode standard, yet the initial encoding of byte codes and character assignments for UTF8 is backwards compatible with ASCII table. For these reasons, it is steadily becoming the preferred encoding for e mail, web pages, and other places where characters are stored or streamed.

Of course we can change it to any other encoding ex. ISO8859 1 or ISO8859 2 but there is no need as long as were saving our files with proper UTF8 encoding.

More about UTF8 in Wiki: http://en.wikipedia.org/wiki/UTF 8

Default Description

The description tag allows us to put there more information about our site. It's often a way to get a nice description of your page to show up in the search results if your page does rank highly. Your best bet is to write a succinct sentence or 2 which use the keyword phrases that sum up the page content.

Magento, Varien, Ecommerce


5/5

The keywords tag is the place to put the most important words that refer to the site content. Best practices are saying that we will get best results when we put into no more than 500 characters in no more than 20 words.

*

The Robots META tag is a simple mechanism to indicate to visiting Web Robots if a page should be indexed, or links on the page should be followed.

The content of the Robots META tag contains directives separated by commas. The currently defined directives are [NO]INDEX and [NO]FOLLOW. The INDEX directive specifies if an indexing robot should index the page. The FOLLOW directive specifies if a robot is to follow links on the page. The defaults are INDEX and FOLLOW. The values ALL and NONE set all directives on or off: ALL=INDEX,FOLLOW and NONE=NOINDEX,NOFOLLOW

We can simple override the default Magentos mechanism by placing

index,follow or noindex,follow or index,nofollow or noindex,nofollow

but it is not reccomended

The file config.xml contains also 2 additional tags , not connected with META but

used as

a default

settings

for

every

page

in

our

shop.

images/logo.gif

This tag sets up a logo fo our page. The image logo.gif is placed in folder skin/frontend/new_template/default/images so if we want to change it we must copy there a new file. We can also create a new folder ex. new_images ald place there all new files used by template. Of course we can also simply overwrite actual file with a new one.

Magento Cojmmerce

Logos alt tag describes our logo image and is mostly used by screen readers or browsers with image download disabled. If one of our customers uses a screen reader or has image download disabled he will se the alt text instead of image.

designing for magento commerce

Documents