Hogyan változtassuk meg a gombot - vásárolni - a opencart cms, az élet egyik munkanélküli
Ma megnézzük egy nagyon szükséges leckét, hogyan kell változtatni a „Vásárlás” gombra a CMS Opencart. A nagyon „Vásárlás” gombra bármely online áruház - ez egy nagyon fontos eleme! Meg kell állni, és vonzzák. Változtatásával a méret, forma, szín és helyét a gombok, akkor jelentősen javítja, illetve megszűntetése átalakítása boltját.
gomb kijelző módszer kissé eltér a változat OpenCart, ezért az újabb verzió a végrehajtását verzió 1.5.5.
Hol találjuk meg a jobb gombot
Fájl megnyitása vezetési stílusok.
your_site / katalógus / view / téma / vasha_tema / stylesheet / stylesheet.css
Gombok kijelző reagál szakasz gomb (valahol a 570. sorban).
Keresse sor: background: url ( '../ image / button.png) repeat-x;
Kiderült, hogy a gomb maga festett button.png fájl
Mi megy a kép könyvtár és másolja a fényképeket a meghajtó szerkesztésre.
Kiderült, hogy a gomb maga levonni ebből a kis darab.
kulcs hossza attól függ, hogy a stílus és méretét betűkkel beállításokat a gomb is, hogy a „Vásárol” vagy a „rend”, vagy valami mást.
Hogyan működik a vásárlás gombra
A magassága a szabványos 24 kulcs pixel, miért nem 48? Mert, mint azt láthatjuk a kép gomb a két szín. A felső szín a szín, amely megjelenik mindenhol alapból, az alsó - ez a szín jelenik meg, ha lebeg az egér gombját. Azaz, abban a formában a program, ha az egérmutatót a fényképet gomb csak emelkedik a felső és látunk egy sötét „Vásárlás” gombra.
Ha azt akarjuk, hogy a gomb vastagabb vagy nagyobb (ahogy szeretné), akkor növekszik a képet a kétszeres sebességgel a kívánt eredményt. Tegyük fel, hogy ... Most a gombra a 24px magas, és azt akarjuk, hogy a 36 (azaz 12), de a fotó növeljük 24 (2-12). és kiderül, mi gomb lesz a mérete 72px magassága (48 + 24). Ez azt jelenti, figyelembe vesszük az egyes színek külön-külön, de ahogy megjelennek ugyanazt a képet, majd adjuk hozzá a színe, mint a kép fel és le ugyanaz! Tény, hogy tisztább, mint a szavak. 🙂
Kérésére változik a felső - és alsó alapszín - a szín, ha lebeg a gomb felett. Mentse el a képet PNG formátumú kívánatos megváltoztatni a nevet, mondjuk button72.png. Mi betölteni kulcs vissza a kép mappát, és visszatér a szerkesztéshez stílusok stylesheet.css
Megváltoztatása a régi kulcs az új
Vegyük az ismerős sort: background: url ( '../ image / button.png) repeat-x; és változtassa meg a fájl nevét a button72.png
Most a gomb az oldalon magassága nem változott, és ha lebeg átfesteni csak egy része. Fix.
Az alábbiakban az osztályban input.button lásd sormagasságot: 24px; - ez a magassága a gomb átvált az egyik, hogy mi volt a képeken, a mi esetünkben 36px.
És még alacsonyabb a.button: hover, input.button: lebeg a húr background-position: 0px -24px; megváltoztatni -24 -36. Ez a paraméter felelős számának növekedése a kép, ha fölé viszi az egérrel.
Itt van, és kap egy szép kövér gomb 🙂
Most már tudjuk, hogy a font nagyobb a felirat. Ez felelős ezen a vonalon font-size: 12px; .
És hozzá a jobb és a bal egy kis hely, hogy a gomb nem volt ilyen téren. Összhangban padding: 0px 0px 22px 22px; input.button 22 attribútumok változik, hogy mit akarunk, mondjuk 36.
Ez az! Most a gomb egyre észrevehető!
Ha korábbi változatait használó OpenCart, akkor van egy gomb használatával valósítjuk több kép. Ha nem érti, forduljon hozzám, majd én segítek.
De mi a helyzet a felirat „Vásárlás”?
Ui Mellesleg, azok számára, akik nem tudják aláírni maga a „Vásárlás” gombra egy fájl módosításait
www.vash_sayt / katalógus / nyelv / orosz / russian.php
ahol 25 sor: