Generátor barevných schémat pro některá témata.
Instalace a nastavení
- V admin/build/modules (Administrace, Prvky webu, Moduly) modul povolte.
- V 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:
- 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)
- vytvořte novou vrstvu vyplněnou základní referenční barvou (slouží pro kontrolu výsledku)
- 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
- 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
- výsledné vrstvy shadows a lights 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í
- základní barva – v CSS použitá pro vše ostatní
- barva odkazů – v CSS aplikovaná na element
a
- horní barva lineárního přechodu hlavičky
- spodní barva lineárního přechodu hlavičky
- barva textu – v CSS vyjádřená vlastností
color
- 'copy' => array
- obrázky, které budou nakopírovány beze změny
- 'css' => array
- '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)
- logo a screenshot (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
- 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
(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.)