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: , ,

8
Komentáře

avatar
8 Comment threads
0 Thread replies
18 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
लिंक से वीडियो कैसे डाउनलोड करेंJakubDjibrilMájamiso 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?

लिंक से वीडियो कैसे डाउनलोड करें
Guest

I wanted to take a moment to commend you on the outstanding quality of your blog. Your dedication to excellence is evident in every aspect of your writing. Truly impressive!