Ocstore - használat html modul egység 3
Nagyon gyakran kell, hogy az online áruház lapjain a kódot, de hogyan kell csinálni? Megpróbálom elmondani róla egy új cikksorozatot. Ebben a cikkben fogjuk telepíteni html blokk 3.3.1 modul a webhely, és ez alapján egy hasznos információt erről a termékről honlapján üzletünkben.
A feladatok listáját a mai:
1. Töltse le és telepítse a modult
2. Csatlakoztassa ikonochny font helyben
3. Munka a modul
4. előírja css stílusokat
1. Töltse le a legújabb verzióját a modul ezt a linket - HTML blokk
2. munka, szükségünk van egy jó ikonochny font, mint tudjuk, gyakran használja ezt: betűtípus Awesome nem törik hagyomány.
Ez köti össze a betűtípus nagyon egyszerű, nyissuk header.tpl a sablon fájlt és add hozzá a blokkhoz
ezt a sort:tovább erről akkor ebben a cikkben: OcStore 1.5.5.1.2 hozzá az alsó panel
3. Bontsa ki a letöltött fájlt, és húzza minden kedves modul mappák saját ftp gyökeret online áruház:
Ha nincs szabványos sablon (nem alapértelmezett, és például moneymaker) a mappa tartalma alapértelmezés (katalógus \ view \ téma / default) egység kell másolni nem csak az alapértelmezett mappába, és még a sablon mappában.
Most megyünk az admin felületen, a honlapon, és telepíti a modult:
Gratulálunk, a modul telepítve van, akkor elkezdhetjük a munkát.
3.1. Azt viszont, hogy a modul beállításai:
Admin - Növekedés - modulok - HTML blokk - Változás
Menj a lap Units:
és kattintson a Hozzáadás gombra egység:
Idővel, van egy csomó különböző modulok és hogy nem kap kusza hozzá blokk fejléc, adjunk neki egy nevet: Bolt információ
Most képes előállítani a szükséges tartalmát nekünk, Gyakran kérdezik tőlem, hogy írjon többet HTML és CSS, úgyhogy írok egy lépésről lépésre, először egy wrapper:
Most hozzon létre egy wrapper az első bekezdésben, például a következők szerint:
A garancia az árut 14 napon
mi lesz néhány pukto egy másik design, obernom a szöveget személyre wrapper:
Már jobb, de természetesen szeretnénk 14 napon rendezik az alsó sorban, és vettek fel nagyobb, merész színek, és talán más színnel? csinálunk:
Nos, a szöveg jellemzői, valamint az azonos ikon? Csak a szöveg nem érdekes, igaz? Menj a ikonochnogo font oldalon, és válassza ki az ikont, például ikon naptár:
kattintson rá, és kap arra az oldalra, a kódot a kiválasztott ikonok, másolja a kódot:
Mi kiegészíteni a kódot ikon:
Az első elem valóban készen áll, az összes kód így néz ki:
kód nehezen olvasható, vessünk, hogy egy kicsit formázni:
és adjunk hozzá egy második pont:
majd a harmadik pont:
A készülék készen áll, szükséges, hogy azt a kívánt pozícióba, és miután a visszavonás kérdés, megy:
Admin - Növekedés - modulok - HTML blokk - Változás
kattintson a Hozzáadás gombra modul
Nyomja meg a Mentés gombot:
Mi jár, hogy bemutassa üzletünkben:
A kód jelent meg, hurrá! De anélkül css stílusokat nem úgy néz ki, folytassa a következő lépéssel.
4. Nyissa ../catalog/view/theme/default/stylesheet/stylesheet.css fájlt (ha nem használja a szabványos alapértelmezett sablon, menjen a mappa), és hozzon létre új stílusok végén a fájlt:
/ * * Info_shop /
#info_shop padding: 10px;
text-align: center;
font: bold 12px Arial;
>
# Info_shop_1, # info_shop_2, # info_shop_3, # info_shop_4 kijelző: inline-block;
padding: 20px;
border: 1px szilárd # 777;
border-radius: 3px;
>
# Info_shop_1: hover háttér: #BBDEFB;
>
# Info_shop_2: hover háttér: # 90CAF9;
>
# Info_shop_3: hover háttér: # 64B5F6;
>
# Info_shop_4: hover háttér: # 42A5F5;
>
#info_shop div: hover, #info_shop div: hover .fa szín: #fff;
>
#info_shop .fa font-size: 35px;
color: # 777;
display: block;
padding-bottom: 20px;
>
Beszéljünk egy kicsit a stílusok:
#info_shop - wrapper tartalom központok Divas mi egységek, akkor beállítja a kis bemélyedés, és egyetlen stílus meghatározza az összes feliratot üzemeink
# Info_shop_1, # info_shop_2, # info_shop_3, # info_shop_4 - rendeli ugyanazt a stílust a mi egység, építi az összes blokk egy sorban, egy olyan keretet minden oldalon a doboz, lekerekített sarkokkal és a határon mozog a belső tartalom
# Info_shop_1: hover. # Info_shop_2: hover. # Info_shop_3: hover. # Info_shop_4: hover - egyszerűen rendelhet az egyes blokk a személyes háttér, ha lebeg a kurzort a blokk
#info_shop div: hover, #info_shop div: hover .fa - ha lebeg a kurzort minden blokk átfestés az ikon és a szavak, fehér
#info_shop .fa - beállítja a méretét és színét az ikon jelzi, hogy a böngésző ikon kell elkülönítve jelenik meg a szöveg egy szóközt a ikonok szöveggé
A munkánk eredménye látható az alábbi:
Design, méret, stb meg lehet változtatni magát, ha szeretne egy külön cikket fog mutatni néhány példát mutatni, hogyan kell tervezni, és egy felirat utal, hogy egy cikket, vagy egy adott árut.
Jelenleg minden, amíg újra nem találkozunk.
Share "OcStore 1.5.5.1.2 használatra html modul egység (1. rész)"