THEMES in Magento Design

 

A Magento theme is comprised of templating files (layout, template, locale) and/or skin files (CSS, images, theme-specific JavaScript) that create the visual experience of your store. These files reside in two main directories in your Magento file system:

•      “App/design” directory – Files that control how the page templates are rendered

•      “Skin” directory – Files that control the visual aspects of the theme—CSS, images, etc

Magento breaks its theme files into separate directories like this to allow you more control over the security level of each directory on your server. The files in the skin directory need to be accessible to web browsers and need a very open permission setting. The files in the app/design directory only need to be accessible to the app and can be locked down furthe r.

Inside of each of these directories, the files in a theme are broken down into further subdirectories by type of file.

Below is a little more explanation of each directory and the types of files it contains.

Templating files in the app/design/frontend/<designPackageName>/<themeName>/ directory are organized into the following subdirectories:

•      Layout—Contains the basic XML files that define block structure for different pages as well as control meta information and page encoding.

•      Template—Contains the PHTML files that contain xHTML markups and any necessary PHP to create logic for visual presentation. Some templates are page templates and some are block templates.

•      Locale—Contains simple CSV text documents organized on a per language basis containing translation strings (as name-value pairs) for all text produced by Magento (e.g., for interface elements and messages, not products and categories)

Skin files in the skin/frontend/<designPackageName>/<themeName>/ directory are organized into the following subdirectories:

•      CSS—Contains the CSS files used to control visual styling of the website

•      Images—Contains all images used by the theme

•     
JS—Contains theme-specific JavaScript routines and callable functions. (Most JavaScript libraries, which might be shared across themes) are placed in the js/ directory at the Magento root

magento one step checkout - fancy product designer - magento extensions