Jak v menu odlišit určitou kategorii od ostatních

Jak v menu odlišit určitou kategorii od ostatních

Rádi byste v šabloně od Shoptetu v hlavním navigačním menu nebo v postranním panelu vizuálně odlišili konkrétní kategorii od ostatních? To se hodí například, pokud máte na svém e-shopu kategorie typu Novinky, Akce nebo třeba nyní před Vánocemi pro kategorii, která doporučuje dárky pod stromeček.

Sepsal jsem Vám zde jednoduchý návod, jak toho docílit. Konkrétně v pěti nejnovějších šablonách Pop, Rock, Soul, Techno a Tango.

Vždy je třeba se v administraci e-shopu dostat do sekce Vzhled a obsah -> Editor a přepnout na záložku HTML kód. Úpravu pak budeme provádět v textovém poli v sekci „Záhlaví (před koncovým tagem HEAD)“.

Na příkladech jsem měnil pozadí kategorie v menu na šedou barvu s bílým textem.

Šablona Pop a Rock

Pokud používáte šablonu Pop nebo Rock, vložte do textového pole pro HTML kód toto:

<style>
.topic [title=“Název kategorie„], #menu li [title=“Název kategorie„]{background: #333 !important; color: #fff !important;}
</style>

menu1

Šablona Soul

Jestliže jedete na šabloně Soul, vložte do textového pole pro HTML kód toto:

<style>
.panel-element [title=“Název kategorie„], #menu li [title=“Název kategorie„]{background: #333 !important; color: #fff !important;}
</style>

menu2

Šablona Techno

U šablony Techno vložíte do textového pole pro HTML kód toto:

<style>
.topic [title=“Název kategorie„], #navigation li [title=“Název kategorie„]{background: #333 !important; color: #fff !important;}
</style>

menu3

Šablona Tango

A jestliže využíváte zatím nejnovější šablonu Tango, vložíte do textového pole pro HTML kód toto:

<style>
.topic [title=“Název kategorie„], #navigation li [title=“Název kategorie„]{background: #333 !important; color: #fff !important;}
</style>

menu4

Místo „Název kategorie“ vložte vždy název Vaše kategorie, kterou chcete odlišit. Zde však pozor, vložte takový název, jak se stránka jmenuje, nikoliv takový, jak je pojmenovaná v menu.

Tato část kódu – {background: #333 !important; color: #fff !important;}, ta značí odlišen kategorie, v tomto případě tedy šedé pozadí (background: #333, kde #333 je kód barvy) a barvu písma (color: #fff). Část kódu !important značí důležitost změny, aby byla přepsána původní hodnota, která je defaultně na e-shopu nastavena.

První část kódu, např. .topic [title=“Název kategorie„] je změna kategorie v postranním panelu, druhá část kódu, např. #navigation li [title=“Název kategorie„] je změna v hlavním navigačním menu.

Pokud chcete pozadí menu (background) odlišit jinou barvou, než šedou, je zapotřebí zjistit html kód dané barvy, buďto v nějakém grafickém programu nebo například v administraci v sekci Vzhled a obsah -> Editor – Barevnost šablony. Když kliknete do příslušného políčka s barvou, tak se vám objeví její kód.

Pozn.: Všechny uvozovky v kódu musí být horní. Zde mi to pořád WordPress háže dolu.

Štítky: , ,

7
Komentáře

avatar
7 Comment threads
0 Thread replies
11 Followers
 
Most reacted comment
Hottest comment thread
7 Comment authors
JakubDjibrilMájamisoLuboš Recent comment authors
  Subscribe  
nejnovějšího nejstaršího nejoblíbenějšího
Upozornit mě
Doležal
Guest
Doležal

Dobrý den, děkuji za tip, vypadá to velice dobře. Je možné u šablony POP upravit barvu podkategorií rolovacího menu v postranním panelu a zrušit ohraničení. Děkuji za rady

Paja
Guest
Paja

Zkouším to v šabloně POP a nic to nedělá..

Luboš
Guest
Luboš

Bohužel nefunguje.

miso
Guest
miso

Rovnako nefunguje

Mája
Guest

Škoda, taktéž mi to nefunguje 🙁 Uvítala bych na sekci Novinky :-/

Djibril
Guest

Funguje to, treba, ale kód upraviť…

Na našej téme POP funguje:

.topic [title=“Názov kategórie“], #menu li [title=“Název kategorie“] {background: #333 !important; color: #fff !important;}

chyba je v uvodzovkach..

Jakub
Guest
Jakub

Dobrý den,

neporadíte na úpravu s šablonou classic?