There are a lot of methods to customize a theme for Magento ® or create a new one. Let us review basic principles of developing a custom Design for Magento ®, class types, their purpose, and principles of their creation.
General Magento Design information
Structural blocks
Magento ®, as well as other site constructors, may contain several blocks, each of them designed for representing a specific topical category. The blocks are:
- Header
- Content
- Footer
- Left column
- 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 the content of each page in your Magento ® store. This block type may consist of the following:
- Store navigation
- Store access links
- Page content
- Footer content
- Callout
- Mini Cart
- Newsletter Cart
Let us review how to modify 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 details without using the 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 on 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 a search, it attracts your customers’ attention and increases the level of trust. In order to set up a Favicon in Magento ® you need to upload the image you want to use. 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 navigate through your 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 details 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 Design in Magento ®, you may contact GoMage experts who will be glad to assist you.
