В теле, там где это надо вставляем:
<span><a onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;">Читать далее</a> <div class="abc">ваш скрытый текст</div> </span>
В стилях прописываем класс:
.abc{
display: none;
}
В в папке с темой по умолчанию расположенной по адресу /skin/frontend/default/default лежит папка css.
В этой папке находятся файлы стилей, по умолчанию их семь.
Название некоторых из них говорят сами за себя, о других поговорим ниже. Самый важный файл из перечисленных это boxes.css.
Этот файл контролирует представление таких параметров как:
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
Отвечает за элементы меню
Есть два способа поменять тему в Magento – автоматически через Magento Connect и вручную.
Автоматически через Magento Connect установить тему просто.
1. Выбираем тему в Magento Connect, например Blank Theme.
2. Копируем ее Extension Key в Админка > Система > Расширения Magento Connect > Управление расширениями > > жмем install
3. После удачной установки идем в Система > Конфигурация > Дизайн > Темы и проставляем название темы в нужные вам поля – Шаблоны, Шаблон сайты (изображения css)Макет, По умолчанию в нашем случае название темы Blank(правильное название темы совпадает с названием папки в которой она лежит). Если сомневаетесь какое поле вам нужно проставьте новое название во все 4 поля. Нажмите сохранить.
Ручная установка темы для Magento:
1. Скаченные папки кладем по адресам:
Для шаблона это /app/design/frontend/default/
Для скина /skin/frontend/default/
2. Идем в Система > Конфигурация > Дизайн > Темы и проставляем название темы в нужные вам поля – Шаблоны, Шаблон сайты (изображения css)Макет, Макет, По умолчанию в нашем случае название темы Blank(правильное название темы совпадает с названием папки в которой она лежит). Если сомневаетесь какое поле вам нужно проставьте новое название во все 4 поля. Нажмите сохранить.
примечания:
1. для корректной работы некоторых тем Мадженто с расширенными возможностями требуется дополнительная настройка, которая описана в инструкции по установке.
2. если вы все сделали как написано выше а внешний вид магазина не изменился, обновите кеш. Идем в система > управление кешем > Весь кеш выбираем отключить и жмем сохранить настройки кеша!
Готовые Magento шаблоны (Magento templates) вы можете выбрать ниже:
Небольшое вступление.
Дизайн в Magento построен по логичной схеме. В Magento элементы наследуются по иерархии, внизу которой находится дефолтный параметр(будь то скин или шаблон), его наличие исключающий момент когда у вас чего-то будет не хватать. Иными словами если вы в вашей теме забыли прописать какой-то параметр, это параметр подцепится из темы или шаблона который находится ниже по иерархии.
В дизайне Magento минимум технически узких мест, требующих специальных знаний. К примеру я не знаю php. Для редактирования дизайна Magento этого не надо. Достаточно базовых знаний html и понимания логики работы css. Если есть желание разобраться, а руки растут из правильного места, у вас все получится.
Картинки и css лежат в /skin/frontend/default/имя темы/.
Шаблоны и блоки в /app/design/frontend/default/имя темы/
А теперь по теме:
Перед тем как делать дизайн для своего магазина, сделайте копии тем(шаблонов), которые вы используете как основу и переименуйте как вам нравится.
Например вы используете Blank theme как основу.
/skin/frontend/default/blank/.
/app/design/frontend/default/blank/
переименовываем в:
/skin/frontend/default/newtheme/.
/app/design/frontend/default/newtheme/
теперь можете менять все чтоугодно не боясь потерять какойто файл, или например все наработки при обновлении. (=
Простой способ сделать круглые углы для блоков в Magento, без использования картинок, только css.
-moz-border-radius-bottomleft:*px;
-moz-border-radius-bottomright:*px;
-moz-border-radius-topleft:*px;
-moz-border-radius-topright:*px;
Пример использования:
.blog {
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;
}
Чем больше пикселей тем больше сглаживание.
п.с.: работает в firefox, google chrome
