Logo

Nápověda

Pro obchody od shoptetu

 
 

Tipy a triky pro menší individuální úpravy

Zde naleznete seznam kódů, které Vám mohou pomoci upravit některá nastavení, která nelze ovlivnit přes administraci. Pokud budete některý z nich chtít využít, stačí ho zkopírovat a vložit do Vaší administrace v sekci HTML kód (Vzhled a obsah - Editor - HTML kód) do políčka označeného záhlaví.

Záhlaví:

Skrytí ikonky domečku v drobečkové navigaci v záhlaví

<style type="text/css"> #a-home { display: none } </style>

Rozbalení kategorií v horním menu na šabloně POP

<script type="text/javascript"> $(document).ready(function(){ var children = $('#menu-helper-box').children(); $('ul.inline-list').append($(children)); $('#menu-helper').remove(); }); </script>

Úprava - změna velikosti písma pro email a telefon v záhlaví (Rock a Pop šablona)

Hodnotu v procentech lze upravit - větší písmo (například 110%), menší písmo (například 90%).

<style type="text/css"> #header-in .header-phone, #header-in .header-email { font-size: 100% } </style>

Úprava - tučnější písmo pro email a telefon v záhlaví (Rock a Pop šablona)

Hodnotu 700 můžete nahradit "tučnější" hodnotou (například 800) nebo méně tučnou (například 600).

<style type="text/css"> .header-contacts { font-weight: 700 } </style>

Skrytí vyhledávacího pole (Rock a Pop šablona)

<style type="text/css"> .searchform { visibility: hidden } </style>

Skrytí informačního prvku v hlavičce (Rock šablona)

<style type="text/css"> .header-info { display: none } </style>

Skrytí emailu a telefonu v záhlaví (Rock a Pop šablona)

Email a telefon lze skrýt v administraci pod url www.nazeveshopu.cz/admin/nastaveni-kontaktniho-panelu/ - tím se však zároveň skryje i email v kontaktním panelu.

<style type="text/css"> .header-contacts { visibility: hidden } </style>

Skrytí pouze emailu v záhlaví (Rock a Pop šablona)

<style type="text/css"> .header-email { visibility: hidden } </style>

Skrytí pouze telefonu v záhlaví (Rock a Pop šablona)

<style type="text/css"> .header-phone { visibility: hidden } </style>

Skrytí košíku v záhlaví

<style type="text/css"> #header-cart { display: none } </style>

Skrytí přihlášení|registrace v záhlaví

<style type="text/css"> #top-links { display: none } </style>

Skrytí podkategorií ve výpisu kategorie

<style type="text/css"> #subcategories { display: none } </style>

Zmenšení mezer mezi odstavci v editoru wysiwyg

- Pro šablonu rock a pop

Hodnotu 0rem můžete nahradit hodnotami 0.1, 0.2, 0.3 atd. - podle toho se bude velikost mezery upravovat.

<style type="text/css"> p { margin-bottom: 0rem } </style>

- Pro starší typy šablon

První a třetí hodnotu můžete nahradit hodnotami 0.1, 0.2, 0.3 atd. - podle toho se bude upravovat velikost mezer nad a pod odstavcem.

<style type="text/css"> p { margin: 0em 0 0em 0 } </style>

Úprava barevnosti krátkého popisku ve výpisu kategorie

Barvu #A7F0C7 lze nahradit za jakoukoliv jinou barvu v hexadecimálním tvaru - toto lze zjistit například zde colorpicker.com .

<style type="text/css"> .shortDescription { color: #A7F0C7 } </style>

Úprava barevnosti krátkého popisku v detailu produktu

<style type="text/css"> #short-description { color: #A7F0C7 } </style>

Rubriky:

Skrytí výpisu článků v rubrice - místo "Název rubriky" v kódu uveďte skutečný název rubriky

<script type="text/javascript"> $(document).ready(function(){ if ($('h1:contains("Název rubriky")')){ $('article.news').remove(); } }); </script>

Sjednocení grafického vzhledu menuboxu a rubrik v zápatí (šablona POP, ROCK)

Odrážku (puntík) lze nahradit za jiný typ odrážky

<style type="text/css"> #footer-in a { text-transform: none; color: #444 } #footer .topic a { color: #000 } .section article { margin-top: 0.25rem } #articles ul li:before { border-bottom: 0.25rem solid transparent; border-left: 0.25rem solid transparent; border-top: 0.25rem solid transparent; content: "•"; left: -0.4rem; top: .1rem; color: #444 ; font-size: 10px !important } .footer-in-wrap #articles ul li:before { top: -0.1rem } #articles ul li:after { border-bottom: 0.25rem solid transparent; border-left: 0.25rem solid transparent; border-top: 0.25rem solid transparent } #footer-in .section .strong h4 { display: inline-block } #footer-in header.strong:before { content: "•"; color: #444; padding-right: 7px; font-size: 10px; position: relative; top: -2px } #footer-in ul>li::before { border: 0 !important; font-size: inherit !important; } </style>

 

<script type="text/javascript"> $(document).ready(function(){ $('#footer-in .small').remove(); $('#footer-in br').remove(); }); </script>

Sjednocení grafického vzhledu menuboxu a rubrik v zápatí (šablona SOUL)

<style type="text/css"> #footer h4 { font-weight: normal; text-transform: none } </style>

Parametrický filtr:

Skrytí značek (výrobců) v parametrickém filtru

<style type="text/css"> #manufacturer-filter { display: none } </style>

Úplné skrytí parametrického filtru v kategorii

<style type="text/css"> #cat-price-filter, #param-filter-hover, #category-filter, #tab-pagi, .pagination-category-tabs { display: none } </style>

 

Skrytí karet nejlevnější / nejprodávanější a nejdražší v kategorii

<style type="text/css"> #category-tabs { display: none } </style>

 

Skrytí pouze vrchní části parametrického filtru

<style type="text/css"> #category-filter { display: none } </style>

 

Skrytí filtrování akce/novinka

<style type="text/css"> #boolean-filter { visibility: hidden } </style>

 

Skrytí filtrování na skladě

<style type="text/css"> #stock-filter { visibility: hidden } </style>

 

Popisy jednotlivých elementů (tlačítko Do košíku apod.):

Změna popisku u tlačítka "Do košíku"

Pro změnu popisku u tlačítka "Do košíku" (obsahuje text v položce value a tvar takového elementu vypadá např takto: <input type="submit" value="Do košíku" />) na vašem e-shopu do editoru HTML napište tento kód:

<script type="text/javascript"> $(document).ready(function(){ $('.b-cart-variants').val('Vložit do košíku'); }); </script>

Kde .b-cart-variants je element se třídou .b-cart-variants. Tento selektor (tedy název elementu) můžete samozřejmě měnit dle potřeby a místa, které chcete upravit.

Pro změnu textu u elementů, které nejsou tzv. inputy a text je u nich v naprosté většině zapsán ve formátu: <div>Krátký text</div>, můžete použít toto:

<style type="text/css"> .bool-new { text-indent: -999em; line-height: 0 } .bool-new:after { content: 'whatever it is you want to add'; text-indent: 0; line-height: initial; display: block } </style>

Kde .bool-new je element se třídou .bool-new. Tento selektor (tedy název elementu) můžete samozřejmě měnit dle potřeby a místa, které chcete upravit.

 

Objednávkový proces:

Změna názvu Poznámky

<script type="text/javascript">
$(document).ready(function(){ $('#note-box legend').text("Nový název poznámky"); });
</script>

Výchozí zaškrtnutí tlačítka Chci se zaregistrovat v e-shopu

<script type="text/javascript">
$(document).ready(function(){ $('#set-registration').attr('checked','checked'); });
</script>

Výchozí zaškrtnutí tlačítka Chci odebírat newslettery

<script type="text/javascript">
$(document).ready(function(){ $('#sendNewsletter').attr('checked','checked'); });
</script>

Výchozí rozbalení poznámky

<script type="text/javascript">
$(window).load(function(){ $('#add-note').attr('checked', true); $('#note-box, #note').removeAttr('style').removeClass('js-hidden'); });
</script>

Změna textu Slevy a doplňky - Classic

<script type="text/javascript">
$(document).ready(function(){ $('.cart-summary h4').html('Nový text Slevy a doplňky'); });
</script>

Změna názvu poznámky - Classic

<script type="text/javascript">
$(document).ready(function(){ $('.form-group label[for="add-note"]').text("Nový název poznámky"); });
</script>

Úpravy písma - neaplikovat velká písmena na nadpisy:

Nadpis na titulní stránce

<style type="text/css">
#h1-welcome-nor { text-transform: none }
</style>

Nadpisy v horním menu

<style type="text/css">
#menu li a { text-transform: none; }
</style>

Úpravy písma (velikost, tučné, pozice):

Úprava velikosti fontu v horním menu

Hodnotu 0.5 můžete zaměnit za nižší, případně větší

<style type="text/css">
#menu li { font-size: 0.5rem; }
</style>

Úprava velikosti hlavních kategorií

Hodnotu 0.55 můžete zaměnit za nižší, případně větší

<style type="text/css">
#column-l-in #categories .categories .topic, #column-r #categories .categories .topic { font-size: 0.55rem; }
</style>

Úprava velikosti nadpisů

Hodnotu 2.45 můžete zaměnit za nižší, případně větší

<style type="text/css">
h1 { font-size: 2.45rem }
</style>

Úprava barevnosti nadpisů

Hodnotu #000000 můžete zaměnit za jakoukoliv barvu v hexadecimální vyjádření

<style type="text/css">
h1 { color: #000000 }
</style>

Nadpis na titulní stránce - velikost

Hodnotu 2.4 můžete zaměnit za nižší, případně větší

<style type="text/css">
#h1-welcome-nor { font-size: 2.4rem }
</style>

Posunutí nadpisů na střed

<style type="text/css">
h1 { text-align: center }
</style>

Úprava velikosti písma a fontu v popisech produktu

<style type="text/css">
.shortDescription * { font-family: Verdana; font-size: 11pt; }
#description * { font-family: Verdana; font-size: 11pt; }
#short-description * { font-family: Verdana; font-size: 11pt; }
</style>

Tučné písmo v horním menu

(Hodnotu 800 lze nahradit za tučnější - 900, atd nebo za méně tučnou - např. 700)

<style type="text/css">
#menu li a { font-weight: 800; }
</style>

 

Větší písmo v horním menu

Hodnotu 0.9rem lze zvětšit (1rem, 1.1rem atd) nebo zmenšit.

<style type="text/css">
#menu li { font-size: 0.9rem }
</style>

Změna barvy vedlejší ceny

Barvu #ffffff můžete nahradit jakoukoliv barvou v hexadecimálním tvaru (lze vybrat zde colorpicker.com.)

<style type="text/css">
.price-additional { color: #ffffff }
</style>

Zápatí:

Změna barvy vrchního pruhu patičky (POP a ROCK)

Barvu #ffffff můžete nahradit jakoukoliv barvou v hexadecimálním tvaru (lze vybrat zde colorpicker.com ). Případně lze také upravit výši pruhu manipulací s hodnotou 0.75 (0.65, 0.50, 0.45...).

<style type="text/css">
#footer-in { border-top: 0.75rem solid #ffffff; }
</style>

Změna barvy písma v patičce (POP a ROCK)

<style type="text/css">
#articles ul li a { color: #ffffff; }
</style>

Změna barvy patičky (POP a ROCK)

Barvu #000000 můžete nahradit jakoukoliv barvou v hexadecimálním tvaru (lze vybrat zde http://www.colorpicker.com/ ).

<style type="text/css">
#footer { background: #000000; }
</style>

Nahrání obrázku do patičky (POP a ROCK)

<style type="text/css">
#footer { background-image: url("zde zadejte URL adresu obrázku"); }
</style>

Změna rozdělení e-mailu, který je příliš dlouhý a přepadává na další řádek

<script type="text/javascript">
$(document).ready(function(){ $('.contacts-email span').removeClass("text-word-breaking"); });
</script>

 

Editace prvku newsletter:

Změna názvu prvku Newsletter pro sběr e-mailů

<script type="text/javascript">
$(document).ready(function(){ $("#newsletter h3").text("Pozadovany_Text"); });
</script>

Přidání textu pod nadpis Newsletter

Vzorový text "vlastní text" můžete nahradit Vaším textem.

<script type="text/javascript">
$(document).ready(function(){ $('#newsletter h3.topic').after('<div>vlastní text </div>'); });
</script>

Přidání obrázku pod nadpis Newsletter

Vzorový text "url adresa" je třeba nahradit vlastním obrázkem.

<script type="text/javascript">
$(document).ready(function(){ $('#newsletter div.topic').after('
<img src="url adresa obrázku"/>
'); });
</script>

Frontend:

Změna odsazení mezi bannery

Hodnotu 2rem lze zvětšit či zmenšit - podle toho se zvětší/zmenší mezera.

<style type="text/css">
.banner { margin-top: 2rem }
</style>

Přidání textu na stránku registrace

Hodnotu text lze nahradit libovolným textem.

<script type="text/javascript">
$(document).ready(function(){ $('#h1-system-8').after(" text "); });
</script> 

Úprava barevnosti kategorií

Hodnotu #ADB708 lze nahradit jakoukoliv barvou v hexadecimálním tvaru.

<style type="text/css">
.categories .topic, .categories.expandable .topic { background-color: #ADB708;}
</style> 

Změna černého pozadí na průhledné u Upozornění pro nové návštěvníky

Poslední číslo - v našem případě 0.65 určuje stupeň průhlednosti - pokud číslo zmenšíte, černé pozadí bude více průhledné, pokud navýšíte, bude méně průhledné.

<style type="text/css">
.site-agreement-wrapper { background: rgba(0,0,0,0.65); }
</style>

 

Přesun parametrů pod krátký popis

<style type="text/css">
a[title="Parametry"] { display: none !important }
</style>
<script type="text/javascript">
$(document).ready(function(){ $('#parameters').insertAfter('#short-description'); });
</script>

Skrytí drobečkové navigace

<style type="text/css">
#navigation { display: none }
</style>

Skrytí vyhledávacího pole (Rock a Pop šablona)

<style type="text/css">
.searchform { visibility: hidden }
</style>

Úprava barevnosti názvu webu

<style type="text/css">
.text-logo { color: #000000; }
</style>

Skrytí emailu a telefonu v záhlaví (Rock a Pop šablona)

Email a telefon lze skrýt v administraci pod url www.nazeveshopu.cz/admin/nastaveni-kontaktniho-panelu/ - tím se však zároveň skryje i email v kontaktním panelu.

<style type="text/css">
  .header-contacts { visibility: hidden }
</style>

Skrytí pouze emailu v záhlaví (Rock a Pop šablona)

<style type="text/css">
.header-email { visibility: hidden }
</style>

Skrytí pouze telefonu v záhlaví (Rock a Pop šablona)

<style type="text/css">
.header-phone { visibility: hidden }
</style>

Skrytí košíku v záhlaví

<style type="text/css">
   #header-cart { display: none }
</style>

Skrytí přihlášení|registrace v záhlaví

<style type="text/css">
   #top-links { display: none }
</style>

Skrytí podkategorií ve výpisu kategorie

<style type="text/css">
#subcategories { display: none }
</style>

Zmenšení mezer mezi odstavci v editoru wysiwyg

- Pro šablonu rock a pop

Hodnotu 0rem můžete nahradit hodnotami 0.1, 0.2, 0.3 atd. - podle toho se bude velikost mezery upravovat.

<style type="text/css">
p { margin-bottom: 0rem }
</style>

- Pro starší typy šablon

První a třetí hodnotu můžete nahradit hodnotami 0.1, 0.2, 0.3 atd. - podle toho se bude upravovat velikost mezer nad a pod odstavcem.

<style type="text/css">
p { margin: 0em 0 0em 0 }
</style>

Úprava barevnosti krátkého popisku ve výpisu kategorie

Barvu #A7F0C7 lze nahradit za jakoukoliv jinou barvu v hexadecimálním tvaru - toto lze zjistit například zde colorpicker.com .

<style type="text/css">
.shortDescription { color: #A7F0C7 }
</style>

Úprava barevnosti krátkého popisku v detailu produktu

<style type="text/css">
#short-description { color: #A7F0C7 }
</style>

Různé

Úprava barevnosti hvezdiček u hodnocení

3. generace (šablony Techno, Echo, Tango a Waltz)

Průměrné hodnocení

<style type="text/css">
.rate-average { color: #FFFFFF }
</style>

Hvězdičky

<style type="text/css">
.stars span.star-on::before,.stars a.star-on::before,.stars span.star-half::before,.stars a.star-half::before { color: #FFFFFF; }
</style>

Grafické zorbazení počtu hlasů u hodnot hvězdiček

<style type="text/css">
.current .rate-bar { background-color: #FFFFFF; }
</style>

Přidat odkaz

<style type="text/css">
.add-comment .link-like { color: #FFFFFF; }
</style>

2. generace (šablony Pop, Rock a Soul)

Průměrné hodnocení

<style type="text/css">
.rate-average { color: #FFFFFF; }
</style>

Hvězdičky

<style type="text/css">
.icon-starHalf-before,.icon-starOn-before,.star.half,.star.on { color: #FFFFFF; }
</style>

Grafické zorbazení počtu hlasů u hodnot hvězdiček

<style type="text/css">
.rate-wrap .rate-list.current .rate-bar { background-color: #FFFFFF; }
</style>

Přidat odkaz

<style type="text/css">
.add-comment .link-like { color: #FFFFFF; }
</style>
</style>

Ostatní

Odebrat email na šabloně Tango

<style type="text/css">
.top-nav>a { display: none }
</style>

Odebrat vyhledávání na šabloně Tango

<style type="text/css">
.top-nav-bar>li:first-of-type { display: none }
</style>

Odebrat Tisk a Dotaz

<style type="text/css">
#tr-links { display: none; }
</style>

Změna barvy horního menu - Tango

<style type="text/css">
.navigation-in { background-color: #000000; }
</style>

Zvětšení loga - Classic

<style type="text/css">
#header .site-name a img { max-height: none; } 
@media (min-width: 768px) { 
.menu-helper { top: 100%; transform: translateY(-33px); }
}

Odebrání hodnocení a komentářů - Classic

<style type="text/css">
.latest-contribution-wrapper { display: none; }
</style>

Změna textu Můžeme doručit do

Šablona Pop, Rock a Soul - umístit do sekce Záhlaví

<script type="text/javascript">
$(document).ready(function(){ $('.delivery-time span').html('Váš text'); });
</script> 

Šablona Echo - umístit do sekce Záhlaví

<script type="text/javascript">
$(document).ready(function(){ $('.pr-list-parameter-name:contains("Můžeme doručit do")').html('Váš text'); });
</script> 

Šablona Techno, Tango, Waltz a Classic - umístit do sekce Zápatí

<script type="text/javascript">
$(document).ready(function(){ $('.delivery-time span').html('Váš text'); });
</script> 

Zvětšení standardní ceny - Classic

<style type="text/css">
.flags-extra .flag .price-standard, .flags-extra .flag .price-save { font-size: 14px; }
.flags-extra .flag { width: 70px; height: 70px; }
</style>

Pokud jste nenašli úpravu, kterou hledáte, můžete využít seznam úprav, který pro vás připravil Jan Pikla na adrese http://pastebin.com/u/Piklis


 

Založte si zcela ZDARMA na zkoušku testovací e-shop nebo pokladní systém v naší službě Shoptet.cz


Potřebujete poradit?

Mrkněte na nejčastější otázky a případne nám napište na helpdesk :-)