Color

Generátor barevných schémat pro některá témata.

Instalace a nastavení

  1. V admin/build/modules (Administrace, Prvky webu, Moduly) modul povolte.
  2. admin/build/themes/select (Administrace, Prvky webu, Témata vzhledu) upravte v nastavení požadovaného tématu jeho barevné schéma.

Všechny soubory vygenerované při uložení barevného nastavení jsou ukládány do adresáře files/color a jsou použity místo výchozích obrázků a stylů.

Tip: codekarate.com/daily-dose-of-drupal/adding-color-module-integration-your-drupal-7-sub-theme

Vlastní barevné téma

Základ grafického návrhu tvoří jedna dominantní barva, kde tóny této barvy vytvářejí kontrasty (tj. modul není vhodný pro generování více barevných témat).

Modul umožňuje zvolit plochy, které nebudou obarvovány např. logo, případně přidat další základní barvu.

Postup vytvoření souboru base.png:

  1. původní grafický návrh (png, xcf, psd) je třeba rozdělit tři vrstvy:
    • maska světel
    • maska stínů
    • základní referenční barva (světlejší odstíny budou tvořit světla, tmavší stíny)
  2. vytvořte novou vrstvu vyplněnou základní referenční barvou (slouží pro kontrolu výsledku)
  3. izolujte stíny - cílem je změnit vše nad základní barvou na barvu bílou a nechat jen "stíny"
    • vytvořte kopii grafického návrhu a vrstvu nazvěte shadows tmp
    • zvolte nástroj úrovně a u vstupní úrovně nastavte kapátkem základní barvu jako bílý bod
    • invertujte barvy vrstvy
    • vrstvu si zkopírujte do schránky a skryjte
    • vytvořte novou černou vrstvu s názvem shadows
    • přidejte ji bílou masku a do masky vložte ze schránky vrstvu shadows tmp
  4. izolujte světla
    • vytvořte kopii grafického návrhu a vrstvu nazvěte lights tmp
    • zvolte nástroj úrovně a u vstupní úrovně nastavte kapátkem základní barvu jako černý bod
    • vrstvu si zkopírujte do schránky a skryjte
    • vytvořte novou bílou vrstvu s názvem lights
    • přidejte ji černou masku a do masky vložte ze schránky vrstvu lights tmp
  5. výsledné vrstvy shadowslights uložte jakou soubor base.png (v případě potřeby masky před exportem aplikujte)

Obsah adresáře vlastního tématu vzhledu podporující modul Color:

  • color/
    • base.png – základní grafický návrh s "řezy obrázků" (obrázková mapa) pro generování obrázků
    • color.inc – potřebné parametry
      • 'schemes' => array
        • předdefinovaná barevná schémata obsahující 5 barev v pořadí
          1. základní barva – v CSS použitá pro vše ostatní
          2. barva odkazů – v CSS aplikovaná na element a
          3. horní barva lineárního přechodu hlavičky
          4. spodní barva lineárního přechodu hlavičky
          5. barva textu – v CSS vyjádřená vlastností color
      • 'copy' => array
        • obrázky, které budou nakopírovány beze změny
      • 'css' => array
        • specifikuje CSS soubor, ve kterém modul Color nahradí výchozí barvy a obrázky dle volby uživatele
        • pokud dojde k přesné shodě definovaných barev, dojde k jejich nahrazení
        • v případě použití nesprávných referenčních barev (je ovlivněn odstín, sytost a jas podobných barev) oddělte CSS do samostatných selektorů {}
        • první schéma se používá jako referenční (výchozí) a použité barvy musí přesně odpovídat barvám použitým ve výchozích obrázcích a stylech – v opačném případě výsledné barvy nemusí odpovídat očekávanému nastavení, protože se místo nahrazování míchají dohromady
        • pokud nechcete ovlivnit některé barvy v CSS, připojte je vlastností @import, nebo je umístěte do samostatného souboru, nebo je vložte pod označení
          /*******************************************************************
           * Color Module: Don't touch                                       *
           *******************************************************************/
          
        • základní barva ve vlastnosti colorvytváří "6. barvu" (barva textu nemůže být shodná s barvou pozadí, používá se např. na selektor :hover
      • 'gradient' => array
        • souřadnice přechodu barev obrázku (x, y, šířka, výška)
      • 'fill' => array
        • barevné plochy vyplněné určenou barvou (x, y, šířka, výška)
        • k dispozici je všech 5 barev
        • 'fill' => array(
            'base' => array(0, 0, 1280, 500), // size of base.png
            'link' => array(240, 530, 40, 40),
          ),
      • 'slices' => array
        • definuje název všech použitých obrázků (řezů) v kaskádovém stylu a jejich souřadnice (x, y, šířka, výška)
        • logoscreenshot (150x90 px) jsou zvláštní případ a mají vždy stejný název
      • 'blend_target'
        • referenční barva používaná při míchání (vhodným kandidátem je barva bílá, šedá nebo černá)
      • 'preview_image'
        • cesta k obrázku pro generování náhledu
      • 'preview_css'
        • cesta ke stylu použitého při generování náhledu
      • 'base_image'
        • cesta k základnímu grafickému návrhu pro generování obrázků
      • od verze Drupal 6 je možné měnit barevné schéma i bez existence obrázků 
      • definice parametrů ve verzi Drupal 7 je mírně odlišná 
    • preview.css – kaskádové styly použité při generování náhledu
    • preview.png – obrázek použitý při generování náhledu (640x250 px)
  • styles/
    • color.css - styly pro změny barev (barva odkazů, barva textu, obrázky na pozadí, u kterých je nutné měnit barvu)
      • tento soubor je vhodné oddělit od ostatních stylů, které se nemění
  • my-owns-theme.info
    • musí obsahovat odkaz na soubor styles/color.cssa je funkční pouze pro média all  (z tohoto důvodu musí mít vlastnosti v tomto CSS souboru vyšší váhu než vlastnosti připojených souborů pro jiná média např. screen atd.)
    • stylesheets[all][] = styles/color.css
  • logo.png
  • page.tpl.php
  • screenshot.png
  • template.php
    • <?php
      /**
       * Override or insert PHPTemplate variables into the templates.
       * This will allow the module to override your theme's logo,
       * stylesheet and screenshot.
       *
       * @param $vars
       *   A sequential array of variables to pass to the theme template.
       */
      function phptemplate_preprocess_page(&$vars) {
        // Hook into color.module
        if (module_exists('color')) {
          _color_page_alter($vars);
        }
      }
      ?>

      Místo phptemplate je z hlediska výkonu vhodnější napsat název tématu 

Některá témata, která podporují modul Color:

  • RootCandy
  • Pixture Reloaded
  • Corolla
  • Garland
  • Minelli
  • Abarre
  • AD Blueprint
  • Airy Blue
  • Alldrupalthemes.com basetheme
  • Auquanaut
  • Austere
  • Deco
  • MO6
  • Wabi
  • Twilight
  • Kommunity

Návody:

Další moduly:

  • Switchtheme – umožňuje přepínat mezi povolenými tématy vzhledu
  • Sweaver – komplexní konfigurace vzhledu
  • Livethemer – komplexní konfigurace vzhledu s možností stažení dalších již předpřipravených variant
  • Override css
  • Skinr
  • Skinr Lite