Magento's IDs and classes
When creating themes that you intend to share with other Magento users, it can be helpful to use the same naming conventions used in Magento's default themes for the elements you use in your store. They can also be a useful reference while creating CSS for your Magento theme.
[table]
|CSS ID/class|Description|
|.wrapper|This usually contains all of the store's content within the <body> element and can be used to center the design, if necessary.|
|#logo|This ID refers to the store's logo, usually contained within
an <h1> element.|
|.header|It is usual for the store's logo, search feature, and customer links to be contained within the header, though the beauty of theming Magento is that you can change these if you desire!|
|.shop-access|The shop access element is used to contain links to Magento's customer features such as customer accounts, carts, and wishlist.|
|.header-nav|The header navigation class is used to contain your store's navigation links. These often consist of categories and sub-categories of your store.|
|.breadcrumbs|The breadcrumbs class is used to contain the "breadcrumbs" of links that help to orientate your store's customers as to where they are in your store.|
|.head|This class is used to contain heading elements (for example, the <h1> element) in the main body. Depending on your theme's
design, you may find that these are unnecessary.|
|.content|The content class is used to wrap content within the store.|
|.legality|The legality class is usually applied to the copyright notice in the footer of your Magento store, which can be edited through Magento's CMS.|
[/table]
When creating themes that you intend to share with other Magento users, it can be helpful to use the same naming conventions used in Magento's default themes for the elements you use in your store. They can also be a useful reference while creating CSS for your Magento theme.
[table]
|CSS ID/class|Description|
|.wrapper|This usually contains all of the store's content within the <body> element and can be used to center the design, if necessary.|
|#logo|This ID refers to the store's logo, usually contained within
an <h1> element.|
|.header|It is usual for the store's logo, search feature, and customer links to be contained within the header, though the beauty of theming Magento is that you can change these if you desire!|
|.shop-access|The shop access element is used to contain links to Magento's customer features such as customer accounts, carts, and wishlist.|
|.header-nav|The header navigation class is used to contain your store's navigation links. These often consist of categories and sub-categories of your store.|
|.breadcrumbs|The breadcrumbs class is used to contain the "breadcrumbs" of links that help to orientate your store's customers as to where they are in your store.|
|.head|This class is used to contain heading elements (for example, the <h1> element) in the main body. Depending on your theme's
design, you may find that these are unnecessary.|
|.content|The content class is used to wrap content within the store.|
|.legality|The legality class is usually applied to the copyright notice in the footer of your Magento store, which can be edited through Magento's CMS.|
[/table]