CSS файлы Magento

В в папке с темой по умолчанию расположенной по адресу  /skin/frontend/default/default лежит папка  css.
В этой папке находятся файлы стилей, по умолчанию их семь.

• boxes.css
• clears.css
• ie7minus.css
• iestyles.css
• menu.css
• print.css
• reset.css
   

Название некоторых из них говорят сами за себя, о других поговорим ниже. Самый важный файл из перечисленных это boxes.css.
Этот файл контролирует представление таких параметров как:

• Колонки (1, 2, 3 и более вариантов представления)
• Стиль сообщений
• Кнопки
• Стили форм
• Хедер и футер (Шапка и подвал)
• Фон
• И другие важные элементы вашего интернет магазина magento

boxes.css

Как говорилось выше файл boxes.css один из наиболее важных, он содержит основные элементы дизайна пользовательской части Magento.  Далее мы рассмотрим более подробно содержание этого и других файлов и постараемся разобрать некоторые элементы более подробно, увидим на что они влияют.
Важно. Вам необходимо создать папку для новой темы и скопировать туда файлы css, с которыми вы будете работать, перед началом работы.
Так у вас будет работающая тема на всякий случай.. (=
body {}

body контролирует часть с контентом. Это белая область сайта в центре страницы, которая зависит от высоты страницы(если вы не ограничили высоту).
По умолчанию body содержит:
background:url(../images/main_container_bg2.gif) repeat-y 50% 0 #58645a;
если вы измените ссылку на фоновое изображение main_container_bg2.gif внешний вид поменяется.
Вы можете создать новый фон или модифицировать старый использую например Photoshop.
Page Heading {}

По умолчанию расположен в  boxes.css строка 211
Верхняя часть страницы контролируется в boxes.css, там находятся компоненты отвечающие за эту часть вашего сайта. Не путайте верхнюю часть с хедером, которая содержит логотип сайта и меню.

Page Structure {}

По умолчанию находится в  boxes.css строка 347
Тут описана структура страницы вашего магазина.

.wrapper {}

По умолчанию строка 350
В .wrapper описываются размеры страниц. По умолчанию это  min-width:954px;, это означает минимальная ширина страниц магазина равна 954 пикселя. Вы можете изменить эту величину, установив жесткие размеры например, тогда все страницы будут иметь те параметры которые вы задали.

.header {}

По умолчанию строка 351
Параметр отвечает за лого сайта Magento

.header-top {}

По умолчанию строка 352
Этот параметр отвечает  за внешний вид узкой части чуть выше хедера, которая может содержать форму поиска или преветственное сообщение магазина Magento. Эта часть не содержит меню навигации. Помните этот класс контролирует структуру хедера н оне содержание (например фон).

.header-nav {}

По умолчанию строка 353
Этот класс контролирует верхнее меню, где расположено лого и форма поиска. Обратите внимание он контролирует только структуру меню но не стили отображния.

.middle {}

По умолчанию строка 354
Контролирует структуру средней колонки. Структуру но не стили.
По умолчанию средняя колонка имеет ширину 900 пикселей, минимальная высота 400 пикс, что означает что высота всегда будет не менее 400 пикс. Если содержимое будет увеличиваться, высота колонки изменится пропорционально. Пользователь не может установить статический размер, из за того что в этом случае страница не будет изменяться вслед за увеличивающимся контентом.

menu.css

Отвечает за элементы меню