Jak vytvořit vlastní motiv pro Sunlight

V tomto tutoriálu se podíváme na to, jak si při troše šikovnosti udělat nebo předělat vybraný motiv pro Sunlight.

Jako příklad pro předělání, si uvedeme stránku, kde jsou motivy volně ke stažení. Z této stránky si stáhneme motiv se jménem <a href="http://www.free-css.com/free-css-templates/page2/below-the-horizon.php" target="_blank">Below the Horizo.</a>

Stažený motiv si rozzipujeme a podíváme se, co je zde za soubory. Mělo by to vypadat přesně takto :

Ted si vytvoříme šablonu pro sunlight. Uděláme si soubor s názvem motivu. U nás to bude nyní název "Belowthehorizo". Název ukládám vždy bez diakritiky a bez mezer. Jako podsložky uděláme adresáře "style" a "images". Názvy adresářů začínají malými písmeny ! Pokud máme vytvořené tyto dva adresáře, je potřeba vytvořit soubory "template.php"a "config.php". Ve složce můžete vytvořit i textový soubor, kde budou popsány vlastnosti motivu atd.. Můžeme to udělat také tak, že si otevřeme již nějaký motiv pro Sunlight a budeme ho pouze editovat. Je to nejjednodušší a nejrychlejší způsob. Pokud si pak rozklinete složku "Belowthehorizo", mělo by to vypadat asi takto:

Nyní začneme editovat jako první soubor "template.php". Otevřeme si v poznámkovém bloku u motivu "Below the horizo" složku "index.html" a budeme kopírovat. Od značky <body> celý obsah a vkládat do "template.php", který budeme mít otevřený také v poznámkovém bloku. Pozor, v "template.php" musí zůstat hlavička stránky! Vznikne nám následně toto, viz obrázek kopírování z indexu do template. Soubor uložíme.

Nyní budeme kopírovat obrázky ve složce "images". Je to jednoduché, stačí všechny obrázky přenést z jednoho motivu do druhého do složky "images". Nyní jdeme na soubory CSS. U Sunlightu jsou tyto soubory uložené ve složce "style". Takže mi si nyní přeneseme z originálního motivu soubor "default.css" do složky nového motivu "style". Protože nám zůstala hlavička v template.php stejná, je potřeba přepsat tento css soubour "default" na "layout.css". Když si tento soubor nyní otevřeme v poznámkovém bloku, tak vidíme, že jsou zde odkazy na obrázky. Pokud je necháte takto jak jsou, žádný obrázek se vám ukazovat nebude. Proto je potřeba tento soubor editovat a odkazy upravit. Před každý odkaz na obrázek je potřeba přidat "../". V našem případě máme k úpravě celkově tři odkazy na obrázek.

Z nějakého jiného motivu pak si zkopírujeme ostatní soubory do složky "style" s názvy "print.css" a "system.css". Nyní musíme mít ve složce style celkově tři soubory, "layout.css", "system.css" a "print.css". Pokud jste nedočkaví a chcete vidět, jestli motiv bude už fungovat, můžete si ho klidně nahrát do složky "templates" a vyzkoušet. Je-li vše v pořádku, motiv se vám už nyní ukáže takto:

Tak a nyní přichází ta nejdůležitější část a to editace "template.php". Na motivu vidíte, že je tam stále text, který je tam napsán od začátku. Nyní je potřeba si rozmyslet, co chcete zachovat a co chcete smazat. U nás se jedná o smazání textů vpravo s názvy "wellcome" a "suspendisse" a do leva vložit boxy, kde bude později menu. Více méně, vymažeme veškerý text co tam vidíme.

Otevřeme si tedy "template.php" v nějakém editoru (zase stačí poznámkový blok) a vedle si otevřeme nějaký jiný originální soubor "template.php" přímo jíž pro Sunlight hotový a budeme z něho čerpat.

Nyní to vezmeme postupně a podrobněji. Nejdříve jsem z nového motivu vymyzal text, který je jako obsahový. V originálním souboru jsem smazal toto:

A nahradil tímto kodem :

<?php _ templateContent(); ?>

Díky tomuto kodu se Vám ukazuje na stránkách obsah vašeho webu.

Nyní přistupujeme k levému menu. Zde je to jednuduché, potřebujeme vymazat vše co je v "divu" s názvem "menu" a zase nahradit kodem.

Opět celé nahrazujeme tímto kodem:

<?php _templateBoxes(1); ?>

Pokud se nyní podíváte na svůj motiv, tak u mě to vypadá asi takto :

Jako další věc uděláme nadpis webu. Momentálně je tam jako nadpis a titulek nahoře napsáno "below the horizon" a "free css template". Pokud chcete, aby se vám to automaticky měnilo dle toho, co napíšete v administraci v nastavení systému jako "titulek" a "popis", je potřeba udělat malinké úpravy. Pokud si to změníte v "temlate.php" tím, že to přepíšete natvrdo, nemusíte upravovat nic.

My si ukážeme, jak změnit kod, aby se název upravoval automaticky. Vymažeme podle obrázky zvýrazněné kody a místo nich postupně vložíme jiný kod.

Nyní budeme postupně nahrazovat kody. Jako první což je název webu a odkaz, vložíme toto:

<?php echo _title; ?>

Jako popis webu slouží tento kod:

<?php echo _description; ?>

Celý soubor "template.php" teď vypadá takto:

Nezapomeňte si do složky images nahrát systémové obrázky a smajlíky. Z motivu musíte do složky "images" přenést adresáře s názvy "bbcode", "icons", "smileys" a "system". Pokud tam obrázky nedohrajete, nebudou se vám například v knize ukazovat smajlíci a v anketě grafické sloupečky.

Tímto ovšem předělání motivu nekončí. Je potřeba motiv dopilovat a v souborech "system.css" a "layout.css" si nakodovat různé nadpisy, velikosti tabulek a další různé věci, aby motiv přesně graficky sedl pro Sunlight. Celý upravený motiv si můžete stáhnout <a href="../upload/sunlight/soubory/belowthehorizo.zip" target="_blank">zde</a>.

Doufám, že se Vám tento tutoriál líbil pomohl k tvorbě vlastního motivu. Charakter tutoriálu je pouze informativní a je zakázáno ho šířid dál. S pozdravem Ondřej Nevole

Neond

Jak vytvořit vlastní motiv pro Sunlight