{"id":2011,"date":"2024-07-02T18:33:09","date_gmt":"2024-07-02T18:33:09","guid":{"rendered":"https:\/\/kunerts.cz\/?p=2011"},"modified":"2025-07-01T10:50:59","modified_gmt":"2025-07-01T10:50:59","slug":"zmena-barvy-systemovych-priznaku-akce-novinka-tip","status":"publish","type":"post","link":"https:\/\/kunerts.cz\/sk\/hotova-reseni\/zmena-barvy-systemovych-priznaku-akce-novinka-tip\/","title":{"rendered":"Zm\u011bna barvy syst\u00e9mov\u00fdch p\u0159\u00edznak\u016f (Akce, Novinka, Tip)"},"content":{"rendered":"

Shoptet ji\u017e vydal aktualizaci, kter\u00e1 zm\u011bnu barvy t\u011bchto p\u0159\u00edznak\u016f umo\u017e\u0148uje, tud\u00ed\u017e si to nyn\u00ed nastav\u00edte jako v\u0161echny ostatn\u00ed p\u0159\u00edznaky \ud83d\ude42<\/span><\/strong><\/h3>\n
\n

Shoptet nab\u00edz\u00ed mo\u017enost vytvo\u0159it si vlastn\u00ed p\u0159\u00edznaky a nastavit si libovolnou barvu, av\u0161ak existuj\u00ed 3 syst\u00e9mov\u00e9 p\u0159\u00edznaky, kter\u00fdm barva v nastaven\u00ed bohu\u017eel nastavit nelze, nebo?<\/p>\n

Jde to zm\u011bnit velmi jednoduch\u00fdm CSS k\u00f3dem, kter\u00fd v\u00e1m d\u00e1m p\u0159\u00edmo zde. Takto vypadaj\u00ed p\u0159\u00edznaky ve v\u00fdchoz\u00edm stavu:<\/p>\n

\"\"

Jak to funguje?<\/h5>\n
    \n
  1. cel\u00fd k\u00f3d mus\u00edte obalit zna\u010dkami, na za\u010d\u00e1tku <style><\/strong> a na konci <\/style><\/strong> – mezi vkl\u00e1d\u00e1te k\u00f3dy, viz. uk\u00e1zkov\u00fd obr\u00e1zek p\u0159\u00edmo ze Shoptetu n\u00ed\u017ee<\/li>\n
  2. barvu si m\u016f\u017eete vybrat v tzv. color pickeru, bu\u010f m\u00e1te mo\u017enost si n\u00e1stroj sami vygooglit nebo n\u00ed\u017ee na str\u00e1nce je p\u0159\u00edmo mo\u017enost si barvu vybrat a zkop\u00edrovat si k\u00f3d ve form\u00e1tu #123456<\/strong> – standardn\u011b 6-ti m\u00edstn\u00fd k\u00f3d plus m\u0159\u00ed\u017eka na za\u010d\u00e1tku, konkr\u00e9tn\u011b HEX<\/strong><\/li>\n
  3. za barvu nezapome\u0148te vlo\u017eit koncov\u00fd st\u0159edn\u00edk ;<\/strong><\/li>\n
  4. k\u00f3d vkl\u00e1d\u00e1te v sekci Vzhled a obsah<\/strong> -> Editor<\/strong> -> z\u00e1lo\u017eka HTML k\u00f3d<\/strong> a vkl\u00e1d\u00e1te do Z\u00e1hlav\u00ed<\/strong> (prvn\u00ed editor)<\/li>\n<\/ol>\n

    \"\"<\/p>\n

    1) p\u0159\u00edznak Akce\u00a0<\/h5>\n
      \n
    • p\u016fvodn\u00ed \u010derven\u00e1<\/span> barva p\u0159\u00edznaku je #e94b4b<\/span><\/li>\n
    • v\u00e1mi vybranou barvu potom nastav\u00edte t\u00edmto k\u00f3dem, j\u00e1 pro uk\u00e1zku zvolil \u010dernou<\/span><\/strong>:<\/span><\/li>\n<\/ul>\n
      <style>
      \/*
      Vlastn\u00ed barva pro p\u0159\u00edznak Akce
      *\/
      span.flag.flag-action{
        background-color: #000;
      }
      <style>

      <\/pre>\n
      2) p\u0159\u00edznak Novinka\u00a0<\/h5>\n
        \n
      • p\u016fvodn\u00ed zelen\u00e1<\/span> barva p\u0159\u00edznaku je #7ad046<\/span><\/li>\n
      • v\u00e1mi vybranou barvu potom nastav\u00edte t\u00edmto k\u00f3dem, j\u00e1 pro uk\u00e1zku zvolil oran\u017eovou<\/span>:<\/span><\/li>\n<\/ul>\n
        <style>
        \/*
        Vlastn\u00ed barva pro p\u0159\u00edznak Novinka
        *\/
        span.flag.flag-new{
          background-color: #ffb900;
        }
        <style>

        <\/pre>\n
        2) p\u0159\u00edznak Tip\u00a0<\/h5>\n
          \n
        • p\u016fvodn\u00ed modr\u00e1<\/span> barva p\u0159\u00edznaku je #59d6e4<\/span><\/li>\n
        • v\u00e1mi vybranou barvu potom nastav\u00edte t\u00edmto k\u00f3dem, j\u00e1 pro uk\u00e1zku zvolil fialovou<\/span>:<\/span><\/li>\n<\/ul>\n
          <style>
          \/*
          Vlastn\u00ed barva pro p\u0159\u00edznak Tip
          *\/
          span.flag.flag-tip{
            background-color: #d900ff;
          }
          <style><\/pre>\n
          \n
          Color picker – v\u00fdb\u011br vlasn\u00ed barvy:<\/h5>\n\n\n