Днес ние гледаме на така необходимия урок за това как да промените бутона "Купи" в CMS OpenCart. Самият бутона "Купи" във всеки онлайн магазин - това е един много важен елемент! Тя трябва да се открояват и да привлече. Чрез промяна на размера, формата, цвета и разположението на бутоните, ние може значително да подобри или обезсилва превръщането на магазина й.
изобразяване на бутон е малко по-различна от версията на OpenCart, затова считаме, че по-нова версия на изпълнението на версия 1.5.5.
Къде да намерим десния бутон
стилове Open за управление на файлове.
your_site / Каталог / преглед / тема / vasha_tema / стилове / stylesheet.css
За бутоните на дисплея отговаря бутон раздел (някъде в 570-ти ред).
Намерете ред: фон: URL ( "../ изображение / button.png") повтаря-х;
Оказва се, че самия бутон е боядисан в button.png файл
Отиваме в директорията на изображение и да копирате снимките си с кола за редактиране.
Оказва се, че самия бутон се направи от това малко парче.
дължина на ключа зависи от стила и размера на настройките букви в самия бутон, дали "ще купи" или "ред", или нещо друго.
Как действа на бутона Купи
Височина от стандартен 24 ключовата пиксел, защо не 48? Защото, както можем да видим на снимката бутон се състои от два цвята. Най-горният цвят е цветът, който се показва навсякъде по подразбиране и на дъното - това е цветът, който се появява, когато задържите бутона на мишката. Това означава, че под формата на програма, когато мишката върху бутона снимка просто се издига до върха и ние виждаме една тъмна бутона "Купи".
Ако ние искаме да направим бутона е по-дебел или по-висока (както искате), решихме да увеличим нашата картина при двойно скоростта на желания резултат. Да речем, че ... Сега нашата бутон в височината на 24px, и ние искаме да направим 36 (т.е. 12), но снимката можем да се увеличи до 24 (от 2 до 12). и се оказва, бутон ни ще имат размер 72px височина (48 + 24). Това означава, че ние се вземе предвид всеки цвят поотделно, но тъй като те се показват на една и съща снимка, а след това се прибави и цвят като на снимките надолу и нагоре и също! В действителност, тя е по-ясно от думите. 🙂
По искане на промяна на горната - и по-нисък основен цвят - цветът, когато мишката върху бутона. Запазете изображението в .png формат е желателно да се промени името, да кажем button72.png. Ние се зареди нашата ключа обратно в папката на изображението и да се върнете към стилове редактиране stylesheet.css
Смяна на стари ключът към новото
Вземете запознат ред: фон: URL ( "../ изображение / button.png") повтаря-х; и промените името на файла, за да ни button72.png
Сега нашия бутон на сайта на височина не се е променила, и когато задържите боядисва само част. Fix.
По-долу, в класната стая input.button видите височина ред: 24px; - това е височината на нашия бутон, промяна на тази, която направихме в снимките, в нашия случай 36px.
И още по-ниска в a.button: мишката, input.button: мишката в фон-позиция низ: 0px -24px; промените -24 до -36. Този параметър е отговорен за увеличаването на броя на изображението, когато мишката върху него с мишката.
Тук имаме и да получите хубава закръглена бутон 🙂
Сега можем да направим по-голям шрифт надпис. Той е отговорен за тази линия шрифта: 12px; ,
И за да добавите в дясно и в ляво от малко място, така че бутонът не е такъв квадрат. В съответствие подложка: 0px 22px 0px 22px; input.button 22 атрибути се променят към това, което искаме, да речем 36.
Това е! Сега бутона ни става все по-забележими!
Ако използвате предишните версии на OpenCart, а след това има бутон се осъществява с помощта на няколко изображения. Ако не можете да разберете, моля, свържете се с мен, аз ще ви помогне.
Но какво да кажем за надпис "Купи"?
Послепис Между другото, за тези, които не знаят самата подпише "Купете" на бутон се сменя във файл
www.vash_sayt / Каталог / език / Руски / russian.php
където 25 линия:
Свързани статии