Много често ние трябва да се приведе в магазина страниците на вашия код онлайн, но как да го направя? Аз ще се опитам да ви разкажа за нея в нова серия от статии. В тази статия, ние ще се инсталира Html блок 3.3.1 модул към вашия сайт и да го използвате, за да извлече полезна информация за този продукт на началната страница на нашия магазин.
Списъкът на задачи за днес:
1. Изтеглете и инсталирайте модула
2. Свържете ikonochny шрифта на място
3. Работа с модула
4. предписва CSS стилове
1. Изтеглете най-новата версия на модула в тази връзка - HTML блок
2. За работа, ние се нуждаем от добър ikonochny шрифта, както знаете, аз често използвам този: Font Страхотен няма да наруши традицията.
Той се свързва шрифтът е много проста, отворете header.tpl си шаблонен файл и да добавите към блока
този ред:прочетете повече за това можете да в тази статия: OcStore 1.5.5.1.2 добавете долния панел
3. Разархивирайте изтегления файл, и плъзнете всички наши модул папки, които да им FTP корен в своя онлайн магазин:
Ако не разполагате с стандартен формуляр (не по подразбиране, а например сметкаджия) съдържанието на подразбиране на папката (каталог \ оглед \ тема / по подразбиране) единица трябва да се копира не само в папката по подразбиране, а дори и във вашия шаблон папка.
Сега отиваме в администраторския панел на нашия сайт и да инсталирате модула:
Поздравления, модулът е инсталиран, сега можете да започнат работа.
3.1. Ние се обръщаме към настройките на модула:
Admin - Допълнения - Модули - HTML блок - Промяна
Отиди на звената за раздела:
и кликнете върху бутона Добавяне на устройството:
С течение на времето, ние имаме един куп различни модули и че те не се заплете добавите горен блок, нека да му се даде име: Магазин информация
Сега можем да се създадат необходимите съдържанието на нас, аз често съм помолен да напише повече за HTML и CSS, така че аз ще напиша една стъпка по стъпка, първо се обвивка:
Сега създайте обвивка в първия параграф, например, както следва:
Гаранцията на стоките 14 дни
ние ще имаме някои pukto с различен дизайн, obernom нашия текст на персонални обвивка:
вече по-добре, но със сигурност искаме да 14 дни се установява на най-долния ред и са били назначени на по-големи, смели цветове, а може би в различен цвят? правим:
добре, характеристиките текстови, и като една и съща икона? Само текст не е интересно, нали? Отидете на сайта на ikonochnogo шрифта и изберете иконата, като икона с календар:
кликнете върху него и да стигнете до страницата с кода на избраните икони, копирате кода си
Ние допълни нашата икона код:
първият елемент е готова, всички код изглежда така:
код е трудно да се чете, нека си го вземе малко да форматирате:
и добавяне на втора точка:
след третата точка:
Модулът е готов, е необходимо да се приведе в желаната позиция, и след издаване на изтегляне, отидете на:
Admin - Допълнения - Модули - Html блок - Промяна
кликнете върху бутона Добавяне на модул
Натиснете бутона Save:
Продължаваме да демонстрират нашия магазин:
Нашата код се появява, УРА! Но без CSS стилове, че не изглежда, преминете към следващата стъпка.
4. Отворете ../catalog/view/theme/default/stylesheet/stylesheet.css файл (ако не използвате стандартния шаблон по подразбиране, отидете в папката му) и създаване на нови стилове в края на файла:
/ * Info_shop * /
#info_shop подложка: 10px;
текст-приравни: център;
шрифта: удебелен 12px Arial;
>
# Info_shop_1, # info_shop_2, # info_shop_3, # info_shop_4 езика: вграден блок;
подложка: 20px;
граница: 1px твърдо # 777;
граничен радиус: 3px;
>
# Info_shop_1: навъртам фон: #BBDEFB;
>
# Info_shop_2: навъртам фон: # 90CAF9;
>
# Info_shop_3: навъртам фон: # 64B5F6;
>
# Info_shop_4: навъртам фон: # 42A5F5;
>
#info_shop Разделение: навъртам, #info_shop Разделение: навъртам .fa цвят: #fff;
>
#info_shop .fa шрифта: 35px;
цвят: # 777;
езика: блок;
подложка дъно: 20px;
>
Нека поговорим малко от стилове:
#info_shop - съдържание обвивка центрове диви на нашите единици, които тя поставя малкия вдлъбнатината и един стил, определя всички надписи на нашите единици
# Info_shop_1, # info_shop_2, # info_shop_3, # info_shop_4 - задава същите стилове за нашите единици, се основава на всички блокове в ред, добавите рамка от всички страни на кутията със заоблени ъгли и гранична движи от вътрешната съдържанието
# Info_shop_1: висене. # Info_shop_2: висене. # Info_shop_3: висене. # Info_shop_4: навъртам - просто отдават на всеки блок от личния си фон, когато задържите курсора на мишката върху блока
#info_shop Разделение: навъртам, #info_shop Разделение: навъртам .fa - когато задържите курсора на мишката върху всеки блок да се пребоядиса иконата и думите в бяло
#info_shop .fa - определя размера и цвета на иконата показва, че иконата на браузъра трябва да бъдат показани отделно от текста, добавете интервал от икони в текст
Резултатът от нашата работа може да се види по-долу:
Проектиране, размер и др можете да промените себе си, ако искате отделна статия ще покажем няколко примера, за да покаже как да се проектира и направи надпис позовавайки се на статия или определена стока.
В момента всички, докато се срещнем отново.
Дял "OcStore 1.5.5.1.2 използване HTML модул единица (част 1)"
Свързани статии