Jak oživit ikonu košíku v šabloně Soul

Jak oživit ikonu košíku v šabloně Soul

Šablona Soul je pro e-shop od Shoptetu perfektní šablonou, to bezesporu. Pro mě je dokonce zatím tou nejoblíbenější. Právě proto jsme do ní mimo jiné nedávno převlékl náš e-shop www.vlapa.cz, který doposavad běžel na šabloně Rock. Jednou z mála slabinek této šablony však může být příliš nevýrazný košík v hlavičce webu, který oproti předchozím šablonám nedisponuje žádným grafickým prvkem.

Rozhodl jsem se, že Vám zde sepíšu návod, jak tento prvek maličko oživit a přidat k němu například nějakou hezkou ikonku nákupního košíku nebo nákupní tašky. Jdeme na to!

Nedříve je třeba si vybrat právě onu ikonku. Můžete tak učinit například na webu www.flaticon.com, kde zadáte do vyhledávání výraz „shopping cart“ nebo třeba „shopping bag“. Poté na ikonku kliknete, vyberete formát PNG, zvolíte potřebnou barvu ikonky a velikost 24px, to je dle mého názoru na naše potřeby ideální velikost ikonky. Některé ikonky jsou ale placené, ty zdarma stáhnout nepůjdou.

kosik1

A ještě jedna důležitá věc, stáhněte si ikonku také v bílé barvě, aby se vám správně pak mohla přebarvit do této barvy na e-shopu při hover efektu.

Nyní ikonky ve dvou barvách (bílá barva plus ta, kterou jste si zvolili) na e-shop nahrajte. Buďto přes FTP nebo jednodušeji přes filemanager v administraci e-shopu například při vytváří nového článku.

kosik2

Teď je potřeba zjistit adresu obrázku. Obrázek vložte do textového editoru a zvolte volbu Nastavení -> Zdrojový kód. Nyní uvidíte adresu toho obrázku, například /user/documents/upload/kosik.png, tuto adresu si někam zkopírujte pro pozdější potřebu.

kosik3

Nyní v administraci vašeho e-shopu přejděte do html editoru (Vzhled a obsah -> Editor a záložka HTML kód).

kosik4

A do textového pole v sekci „Záhlaví“ vložte tento kód:

<style>
.header-cart-pieces{background: url(„adresa obrázku ve zvolené barvě„) no-repeat; padding: 3px 0 3px 30px;}
.header-cart-wrap:hover .header-cart-pieces{background: url(„adresa obrázku v bílé barvě„) no-repeat;}
</style>

Nyní už jen kliknout nahoře na „Uložit“ a je hotovo.

Pozn: Uvozovky v kódu mají být nahoře, nevím, proč ten WordPress je pořád dává dolu 😀

Štítky: , ,

10
Komentáře

avatar
5 Comment threads
5 Thread replies
4 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
PetrGuestPetr PáralOlgaMarek Joska Recent comment authors
  Subscribe  
nejnovějšího nejstaršího nejoblíbenějšího
Upozornit mě
Miroslav Kapoun
Guest

Dobrý den, super tip, díky za něj! Poraďte mi prosím jak skrýt u šablony SOUL v menu volbu „Uvodní stránka“, jak jste to udělali u webu vlapa.cz

Marek Joska
Guest

Dobrý den, bude tato úprava fungovat i pro šablonu Rock

Olga
Guest
Olga

Dobrý den, super, moc díky, povedlo se a to se Shoptetem jenom začínám 🙂 Nemáte prosím tip, jak u šablony Soul schovat nebo pozměnit tu úplně horní lištu (jak je telefon, email a přihlášení). Děkuji, Olga

Guest
Guest
Guest

bohužel mne podle návodu nefunguje. Ve Firefoxu v „prozkoumat prvek“ píše : „Neplatná hodnota vlastnosti“. Může to být testovací verzí shoptetu?

Petr
Guest
Petr

Jak změnit ikonu v šabloně Techno?