Tvorba vlastního vzhledu I. - základní pojmy
Protože webdesign je můj denní chleba, tak mi bylo od začátku používání RS Drupal jasné, že si s dostupnými šablonami nevystačím. Pro ty, kteří také nejsou spokojeni s nabídkou šablon uveřejněných na www.drupal.org nabízím vodítka jak vytvořit vlastní deisgn pro RS Drupal (případně modifikovat některou ze šablon).
Jistě víte, že Drupal nabízí možnost změny šablony designu. Tuto možnost najdete na cestě Administrace → Témata vzhledu. Pokud si nahrajete vlastní šablonu (nebo budete modifikovat stávající), můžete přepnutím zcela změnit vzhled i chování vašeho portálu. Jak to celé funguje?
Drupal řeší design sofistikovaně a s ohledem na SEO
Téměř veškerý design stránek je řízen pomocí CSS stylů, zdrojové scripty page.tpl.php, node.tpl.php a comment.tpl.php jsou neskutečně jednoduché a s ohledem na SEO správně strukturované. Myslím si, že tohle je jednou z hlavních předností Drupalu – SEO je přecijenom jednou z nejdůležitějších oblastí internetového marketingového mixu.
Celá šablona je vždy uložena ve složce themes. Zde najdete jednotlivé podsložky, každá znamená jednu šablonu. Např. v themes/garland je uložena kompletní šablona tématu vzhledu Garland.
V každé šabloně jsou uloženy soubory typu .tpl.php, které ovlivňují vzhled stránky. Pojďme si říct na co které soubory jsou a co v nich najdeme:
Page.tpl.php
Tento soubor řídí zobrazení stránky jako celku. Zde můžete změnit hlavičku dokumentu, tělo a patu. Vložením dalších tagů můžete přidat dynamické i statické prvky jako jsou třeba stabilní odkazy, reklamy, akce apod. Téměř veškeré parametry jsou dynamicky řízené a stylované CSS externími soubory, takže nepočítejte s tím, že zde změníte třeba orientaci menu z levé strany na pravou. Můžete zde ale pomocí snippetu zobrazit třeba uvítání uživatele, nebo upozornit na to, že uživatel není zaregistrován.
Node.tpl.php
Tímto souborem řídíte zobrazení článků. Mimo samotný článek je zde možnost řídit způsob zobrazení patičky článku, autora apod. Díky snippetům můžete dynamicky zobrazovat další obsah (například pomocí zjištění ID autora článku zobrazit relevantní odkaz atd.)
Block.tpl.php
Jednoduchý soubor, který řídí zobrazování bloků. Každý zobrazený blok se vykreslí právě pomocí této šablony.
Další soubory
Tři uvedené jsou základy, které najdete v 99 % všech témat vzhledu. Díky možnostem Drupalu mohou některá témata obsahovat další template soubory, které řídí např. zobrazování komentářů, odkazů pod článkem (jako zde), apod. V podstatě všechny zobrazovací funkce máte možnost ve složce s tématem potlačit a přepsat svými. V tom případě je nejlepší hledat v diskusi na Drupal.org a na api.drupal.org
Jak je to s CSS?
Celý design stránek je řízen dvěma CSS soubory – Drupal.css a Style.css. První soubor nedoporučuji měnit, obsahuje základní grafické nastavení Drupalu a navíc – soubor Style.css může tato základní nastavení měnit (a také to ve většině případů dělá). CSS ID a CLASSů je zde celá řada a v závislosti na vašem deisgnu se mohou názvy lišit. Vřele vám proto doporučuji nejdříve si pohrát s CSS styly některého ze stávajících designů a to pokud možno on-line. K tomu vám dám tip:
Pokud používáte Firefox (nepoužíváte? Děláte si srandu? :-), tak si nainstalujte Web Developer lištu z www.firefox.com. Pomocí této lišty můžete editovat CSS on-line a okamžitě tak vidíte dopad vaší editace CSS na design. Pokud nejste příliš zběhlí v CSS, tak metoda pokus-omyl časem zapracuje a CSS se (stejně jako já) rychle doučíte. Pomocí CSS je řešeno skutečně cca 90% grafiky.
Když nemám moc času, tak nejraději zmodifikuji již hotový template. Jako příklad uvedu můj nový mini-projekt www.smajlici.cz, jehož design byl vytvořen pouhou úpravou CSS stylů základní designové šablony DRUPAL 4.7 – Bluemarine. V photoshopu jsem si samozřejmě musel vytvořit úvodní hlavičku a pár ikon, ale i jejich umístění je provedeno čistě a jen pomocí editace Style.css souboru.
Hlavní RSS kanál
A pokud používáte
A pokud používáte Operu, doinstalujte si tlačítko CSS editor :-)
Hezký článek, díky za něj a hlavně za další díly.
Jasne
Dobre, moc noveho jsem se toho nedozvedel ale sem rad ze vychazi serial o sablonach v drupal:)
btw: docela bych uvital nejake speky co se tyce PHPtemplate…
Příklad
Uvital bych zde celistvy priklad na tvorbu vlastniho vzhledu… hlavne at je to jednoduche. napr.: hlavicka= logo+login+nejaky ten napis co bued vsude na strankach, potom levy sloupec= nejake vlasni jednoduse upravene menu,obsah=proste obsah;-), paticka=copyright+autor+RS Drupal :D… To by bylo primo perfektni … no a kdyz tam pridate speky z PHPtemplate tak se regnu na linkuj a hodim to tam :D:D
Urcite v dalsich dilech
Urcite v dalsich dilech
login
zdravím, chci se zeptat, kde v jakém souboru se dá editovat šířka kolonek pro přihlašování…viz. input type=„text“ maxlength=„60“ name=„name“ id=„edit-name“ size=„60“ value="" tabindex=„1“ class=„form-text required“
díky
nalezeno
tak uz jsem to s bozi pomoci nasel, tudiz se omlouvam za zbytecny prispevek… staci editovat /modules/user/user.module,někde okolo řádku 900 :-)
NE PROBOHA. to je naprosto
NE PROBOHA. to je naprosto spatny pristup. Prosim nedelejte to. Az upgradujete Drupal na novejsi verzi, o upravu prijdete!
ve style.css,
ve style.css, napr
#edit-name { width: xyz px; }
A pokracovani?
Clanek se mi velmi libi, jenze bylo neco nakousnuto a … Dockame se jeste nekdy pokracovani? Please :)
bude další díl?
dalšího dílu se už asi nedočkáme, přece jen ten první už má za sebou skoro 6 měsíců.
a vůbec, připadá mi, že na tomhle webu naprostá většina článků skončí u prvního dílu. čím to?
podle http://drupal.org/node/509 není tvorba šablony zase tak těžká, dnes jsem si zkusil svou první (po cca 5 dnech používání drupalu) a je to celkem triviální.
v podstatě se dá říct, že Vám stačí page.tpl.php, v něm pomocí php vypíšete tyto proměnné http://drupal.org/node/11812, vytvoříte style.css a základ je hotov.
hlavně je potřeba vypsat většinu proměnných, jinak by se mohlo stát, že nebudete mít např. přihlašovací form :-). a taky je dobré v tom php neudělat syntaktickou chybu. ;-)
Vlastní styly
Ahoj tak jsem prisel na drupal a prvni co mne zajima neni jak co kde nastavit a zprovoznit, ale jak dostanu stavajici WEB do Drupala. Momentalne vse musim delat ruco neni to zalozene na RS a tak i sprava je uzivatelsky neprivetiva (bez zkusenosti s XHTML, CSS a zakladu PHP jeto nerealne. www.rybarizatec.cz).
NJ web je hotovy a komplet napsan v XHTML 1.0 strikt a CSS 2.1 . Rad bych zachoval ne jen web ale i samotny XHTML kod. Je nejaky navod jak na to je mi jasne ze budu nucen nejak zprovoznit PHP a DB a co vic plne zachovat drupalovskou administraci. Proc toto??? Jiz se o server nestaram a dela to po mne delsi domu starsi clovicek (65) ktereho jsem to nejaky patek ucil. Je moc a moc schopny. Jenze nestiha a tak potrebuji nejake redaktory atd.
Poradte da se to cele udelat a nebo budu muset prekopnout vzhled.
Dále bych pozadal, zda-li je tu nejaky zkuseny PHP kodér, dokaze nekdo implementovat skript ktery podle rocniho období automatycky zmení vzhled???
Mozna vyzva pro nekoho kdo se zabyva psanim modulu.
Hodilo by se mi nastavit si v modulu nebo jinde 4 rocni období tzn. 4 vlastni temata, ktere se dle datumu automaticky promeni. Vim ze to jde a v PHP je to lehke (nejsem zkusenej koder), ale jak to udelat tady. Myslím ze se to hodi udelat i tak ze se da nastavit automaticky treba denni a nocni vzhled a jine.
Diky za vyjadreni hlavne k prvnimu tematu. Ahoj Radek
Co zkusit CRON?
Myslím, že jsem našel řešení na http://www.drupal.cz/…programatora
Ahoj, myslím, že se dá vytvořit script, kterej by se spouštěl spolu s CRONem (na to už moduly jsou) a do něj jen vymezit datum. Pak to celé napojit na vzhled DRUPALu např. pomocí nějaké funkce. Něco jako:
if($mesic >= „3“ && $mesic <= „6“) {
load_theme(„jaro“) } … apod.
Je to jen nápad. Hodně štěstí.
nevím, jestli někdo najde můj
nevím, jestli někdo najde můj příspěvek, ale kdyby… jde zarídit, aby každá položka v např. primárních odkazech měla vlastní obrázek pozadí?
napadlo mě nějaký script, kterej by čísloval odkazy a přiřazoval jim číslované obrázky – ale scripty a php neumím, jsem malej html a trochu css amatér
V primárních odkazech zrovna
V primárních odkazech zrovna velmi snadno, ale asi to záleží na tématu vzhledu. Například v Zenu (ale i v řadě dalších, asi ve většině) má každá položka vlastní třídu, například li class=„menu-cislo“.
ok dik moc
ok dik moc
tak jsem se po dvou měsícíh
Potřeboval bych tedy něco co mi oindexuje i submenu, např.: class =„collapsed first (1)“ class =„expanded first active-trail menu 2“
class =„leaf first 2“
class =„leaf 2“
class =„leaf 2“
class =„leaf last 2“ class =„collapsed 3“ class =„collapsed 4“ class =„collapsed last (5)“
Předem děkuju za každou radu.
Hľadal si na drupal.org?
Neskúšal som to, ale človek na to natrafí často:
Snáď pomôže…
pomoc
dobry den nemohl by me nukdo udelat kompletni vzhled na moje nove stranky ? prosim ozvete se mi na email predem diky
Tak jsem myslel že zde najdu
Tak jsem myslel že zde najdu někde druhý díl a nikde nic. Docela se nyní již zajímám o změnu vzhledu šablon, ale přijde mě to moc složité, protože PHP neumím a teprve zabrušuji do stylů. Jde mě o to, jak přehodit třeba navigaci zcela nahoru, nebo aby zasahovala nejlépe do obrázku v headeru… Kdyby jste věděli o nějaký českých stránkách přímo na tvorbu šablon, nebo úprav, případně o nějakém programu, který umí graficky editovat šablony php a ccs, hodtě prosím link. Něco jako je dreamweaver v html. Díky
sablony
vie mi niekto poradit, preco sablony z drupalu mozem naistalovat a pouzivat bez problemov a niektore, stiahnute z inych stranok nainstalujem do FTP ale uz v mojej stranke sa vobec nezobrazia.
Na takový obecný dotaz skoro
Na takový obecný dotaz skoro nejde odpovědět – nevíme, co jsou „některé“ a co znamená „z jiných stránek“. Může např. být, že nesouhlasí verze tématu s verzí Drupalu. Ale bez příkladu fakt těžko…
sablony
Dakujem za odpoved, nevedel som ci ja mam nieco zle, alebo robim zle. Ale to mi staci ze viem, ze nesuhlasia verzie temat. Som zaciatocnik a tak niektore veci…no problemy :-)
V pohodě, jde taky ale o to,
V pohodě, jde taky ale o to, abyste se naučil ptát (a dát k tomu potřebné informace), protože jinak se nic nedozvíte, nebo ne to, co jste chtěl ;-). Držím palce.
sablony
ano, mate uplnu pravdu, vediet sa pytat na problem. Ved prave to, ze ani sa neviem pytat :-), pretoze zatial je pre mna vsetko nove a skusam sa ,,ucit,, :-)…zatial sa len snazim vsetko citat (co tu je )a chapat. Ide mi to zatial dost tazko…ale urcite sa budem pytat ! Kupil som si program a podla neho som si urobil web stranku, dost som sa natrapil, pretoze vsetko bolo pre mna nove a vsetko to bolo potrebne pochopit. Dakujem Ema.
spam?
spam?
zdravím, doinstaloval jsem
zdravím, doinstaloval jsem CSS editor do opery, ale v toolbarech nemůžu najít ono tlačítko? kdepak se zobrazí? předem děkuju
Artisteer
Zkusil někdo program ARTISTEER??? Dá se v něm udělat hodně rychle a hlavně pěkný vzhled pro drupal nebo obyčejný css styl. Můžete se mrknou na moje stránky…
to jo, a pak porad resit
to jo, a pak porad resit nejaky problemy, tu se nezobrazuji jazykove ikony, tam zase nefunguji ankety…
Poslat nový komentář