Need help buying now? +48-22-219-5163 +1-917-720-3250
My Cart

Your Cart is Empty

Need help buying now?
+48-22-219-5163 +1-917-720-3250

Magento design

There are a lot of methods to customize a Magento theme or create a new one. Let us review basic principles of developing a custom Magento Design, class types, their purpose and principles of their creation.

General information

Structural blocks

Magento, as well as other site constructors, may contain several blocks, each of them designed for representing a specific information category. The blocks are:

  1. 1. Header
  2. 2. Content
  3. 3. Footer
  4. 4. Left column
  5. 5. Right column

 

Each of these blocks, in its turn, consists of additional sub-areas. For ‘Content’ they are:

Content blocks

Expectedly, content blocks are the blocks responsible for content of each page in your Magento store. This block type may consist of the following:

  1. 1. Store navigation
  2. 2. Store access links
  3. 3. Page content
  4. 4. Footer content
  5. 5. Callout
  6. 6. Mini cart
  7. 7. Newsletters

 

Let us review the ways of modification each block separately. Magento code editor is very convenient even if used by an amateur. Each code package is named according to an area it is responsible for, e.g. ‘header’ can be found at this path:

app/design/frontend/default/your_theme/template/page/html

Most frequently, this section is used for modification of a store logo. Locate the following line in the editor: echo $ this-> getLogoAlt ()?>, where Alt is a link to an image (this link can be seen in description when an image is uploaded to the store). Then, the line <? PHP echo $ this-> getLogoSrc ()?>, where ‘Logo’ is responsible for the logo output.

In the same way you may change the output of a header, logo, fonts, but this is quite a complicated process that requires some programming knowledge. In order to change those data without using editor, go to the admin panel, then to System – Configuration – Design.

Editing Footer

The bottom part of the page called ‘Footer’ usually contains links useful for customers. There one can find an advanced search option, login button to a personal account, information of the store visits and the platform state (PR, Tits).

Favicon

Favicon is a small image displayed on the site tab in the end user’s browser. The same image is displayed during the search, it attracts customers’ attention and increases the level of trust. In order to setup Favicon in Magento you need to upload a necessary image, write it, paint it in PS and save it in .ico format. The image should be located at this path: skin/frontend/default/your_theme/favicon.ico

CSS classes

Now let us review CSS classes:

.wrapper: the representation of the entire store content depends on this parameter, it is located in <body>;

#logo: this section is responsible for the store logo representation, it is located in <h1> element;

.header: combines everything that is located in the header area – logo, text, contacts, search, links;

.shop-access: an identifier that keeps the links used by customers to access your store, this may be ‘My Account’, ‘Shopping cart’, etc.;

.header-nav: navigation class that displays all categories and subcategories in the store. It consists of internal links;

.breadcrumbs: this section helps customers to navigate through the store and a specific section they are in;

.head: a header identifier, its parts (<h1>, <h2>, etc.) in the main store area. It may not be in use, but it is not recommended to remove it completely;

.content: it is a content element used to create and configure a content block;

.legality: it is a legal class which displays the store ownership rights. It is located in footer, below the main data.

Any of these classes can be modified by the same principle. Each row has its own text color, background color, alignment, width and height. All these data can be changed according to your wish and the store style.

All other theme settings are located in the ‘Configuration’ section. The folder ‘Design’ contains subfolders Templates, Skins and Layout which you may modify in order to completely customize your store. The code editor is not needed here.

The main problem is that inexperienced users can often take the entire store down by simply not having closed one bracket in classes. If you have any problems with configuration, development or modification of Magento Design, you may contact Magento experts who will be glad to assist you. You may ask your questions in comments or visit a corresponding section on our forum http://magentoforum.com/.

Newsletter