Sleduj návody s komentářem. Upload obrázků Upload souborů War3Zone.eu Webmail Podpoř náš web a vyber si výhodu




Sponzor VPS:






      

Serialbook - upozornění na nové epizody oblíbených seriálů

Tvorba webu Návody

Moderátor: Web poradce

[TUT]Jak vytvořit vlastní styl phpbb

Příspěvekod  jakubicek » sob 27. lis 2010 11:43:20

Možná jste už někdy přemýšleli o tom, že si vytvoříte vlastní styl, ale nápad jste po chvíli zavrhli, protože nemáte ponětí jak to udělat, co k tomu potřebujete a kde začít. Přečtěte si následující článek a možná budete o něco moudřejší. Předem však upozorňuji, že článek neslouží jako podrobný návod.

Základní rozhodování

Ještě než se do tvorby pustíte, měli byste od začátku vědět jaké barvy budete chtít použít a mít promyšlené, jak by měl Váš nový styl celkově vypadat.
Důležitá otázka je rovněž: "Z jakého stylu by měl můj nový vycházet?" Možné odpovědi jsou 3: subsilver2, prosilver a nebo: "Chci si svůj styl vytvořit kompletně od základu".
Poslední možnost je bohužel opravdu hodně složitá a proto se raději rozhodněte mezi prvními dvěmi.

Potřebné znalosti

Pro případ, že si budete chtít vyrobit opravdu speciální styl, ať už úpravou současného stylu, či výrobou nového, je nutné, abyste k Vašemu elánu do práce přidali ještě poměřně rozsáhlé znalosti HTML a CSS.
Pokud se spokojíte s lehkými úpravami v kódu již existujícího stylu, musíte rovněž disponovat určitými, výše zmíněnými, dovednostmi. Jejich míra závisí na tom, co vše budete chtít poupravovat. V případě, že to bude pouhá změna barvy pozadí příspěvku, postačíte si se znalostí najít v CSS správnou třídu, která toto zajišťuje a vložit kód nové barvy - viz. níže.
Míníte - li jen povyměňovat obrázky ve stylu, který používáte, jmenované znalosti potřebovat nebudete.
Ať tak, či onak, nejlepší způsob jak začít s úpravami, popř. výrobou stylu je - mít nainstalované phpBB forum.

Přihlašte se a běžte do
ACP -> Styly
Toto je hlavní sekce ze které se úpravy stylů provádí. Nalevo uvidíte menu se čtyřmi odkazy.

Styly
Šablony
Skiny
Sady obrázků


Na pravé straně pak je tabulka, ve které jsou vypsány názvy všech stylů, které na foru máte - instalované i neinstalované.
Sklouzněte očima opět doleva a klikněte na Šablony. Zobrazí se znovu tabulka s výpisem stylů, ale pár možností přibylo. Pro nás je klíčová možnost Upravit. Klikněte na ni vedle jednoho ze stylů, které na foru máte a zobrazí se Vám rolovací nabídka. V té jsou uvedeny všechny HTML soubory, které daný styl používá.
Ti z Vás, kteří ovládají zmíněný značkovací jazyk zde můžou provádět editace šablon a v podstatě si styl po jisté stránce přetvořit k obrazu svému. Mějte však stále na paměti, že je potřeba před úpravami zálohovat.

Porozhlédněte se, klikněte vlevo na Skiny a zvolte možnost Upravit. Nabídne se Vám jeden jediný soubor, kterým je stylesheet.css*. Toto je soubor, který bude většina z Vás upravovat nejvíc. Jsou v něm mmj. uloženy barvy, které forum používá.
Nechte si jej zobrazit a uvidíte velké množství tzv. tříd, z nichž každá má svůj kousek kódu.

*Jestliže používáte prosilver, či styl, který z něj vychází, zobrazí se Vám rovnou okno pro editaci namísto roletky s výběrem. Prosilver totiž používá více CSS souborů a v nabídnutém okně máte vypsán obsah všech.

Styl tyto všechny třídy využívá. Uveďme si příklad:

Běžte do ACP -> Styly -> Šablony, vedle prosilveru vyberte možnost Upravit, v nabídce ponechte hned první soubor attachment.html a stiskněte Vybrat.
Pokud jste následovali cestu správně, uvidíte zdrojový kod souboru attachment.html začínající:
Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!
Pod tímto jsou další dva řádky a my si vybereme ten druhý, který zní takto: <dl class="thumbnail">.
Z tohoto námi vybraného řádku vyplývá, že soubor attachment.html využívá thumbnail, což je třída uložena v stylesheet.css.
Nyní pojďte do ACP -> Styly -> Skiny, vedle prosilveru zvolte možnost Upravit a nabídne se Vám okno k editaci.
Stiskněte dohromady klávesy CTRL + F a do vyhledávácího okna, které se Vám zobrazí nakopírujte dl.thumbnail a vyhledávání potvrďte. Výsledků hledání, které odpovídají zadané třídě bude několik. Ta, kterou chceme vypadá následovně:
Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!
Vídíte, že je definována v CSS souboru.


Takto se HTML soubory všech stylů v phpBB3 odkazují na soubor s kaskádovými styly, ze kterého získávají informace o tom jakou barvu a velikost má mít např. vyhledávací rámeček.
Pokud tedy patříte mezi ty, kterým se nelíbí jak je barevně proveden určitý styl, který máte na foru, tak úpravou údajů v souboru stylesheet.css* můžete po nalezení konkrétní třídy tyto barvy změnit - viz. níže. Před úpravami opět zálohujte a po jejich provedení pročistěte Cache a aktualizujte prohlížeč. To stejné proveďte i pokud budete editovat HTML soubory.

*Jak už jsem uvedl výše - u stylů založených na prosilveru je problematika CSS poněkud rozvětvenější... Pokud však budete provádět editace přes ACP, tak jak jsme si teď popsali, nebude nutné bloudit mezi těmito soubory, jelikož se Vám vše zobrazí do jednoho okna. Jestliže byste ale prováděli úpravu CSS na FTP, budete si muset najít odpovídající soubor.

------------------------------------------------------------------------------------------------------------------------------
Obrázky

Ve standardním stylu prosilver je určité množství obrázků.
Tyto obrázky se Vám možná libí, ale možná taky ne. Naštěstí existuje lehký způsob, jak je nahradit jinými. Jak už jsem předeslal na začátku článku - není nutná znalost HTML ani CSS.
Jednoduše si najeďte na foru na stránku, kde se vyskytuje obrázek, který se Vám nelíbí, klikněte na něj pravým myšítkem a vyberte možnost Vlastnosti obrázku*. Zobrazí se Vám mmj. i URL odkaz na tento obrázek, který může vypadat takto:
Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!

Nás zajímá tato část: /styles/prosilver/theme/images/bg_header.jpg
Přesuňte se do zmíněného adresáře ve Vašem foru, vyhledejte si onen obrázek a jednoduše ho nahraďte jiným, který se Vám líbí. Předpokladem je pochopitelně vlastnit obrázek, kterým ten stávající přepíšete.

*Ve všech prohlížečích nemusí být přesně tato fráze, avšak všechny standardně používáne prohlížeče umožňují zjistit adresu obrázku

------------------------------------------------------------------------------------------------------------------------------
CSS

Pro výraz CSS existuje český název Kaskádové styly
CSS definují jak zobrazovat vybrané HTML prvky
Obyčejně bývají uloženy v tzv. Stylopisech (Stylesheets)
Externí Stylopisy jsou uloženy v samostatných CSS souborech a mohou ušetřit spoustu práce

CSS je tvořeno třemi prvky: selektor {vlastnost: hodnota;}

Selektor je běžný HTML tag, který chcete definovat, vlastnost je atribut a ten může nabývat určitých hodnot. Vlastnost a hodnota jsou odděleny dvojtečkou, obklopeny složenými závorkami a za poslední hodnotou vlastnosti musí být středník. Pokud je hodnota víceslovná, dejte před a za hodnotu úvozovky.

Třídy
Pro CSS jsou specifické právě třídy. Najít správnou třídu může být někdy opravdu těžké. Navíc v phpBB, kde mají všechny třídy několik podtříd...
Když potřebujete najít specifickou třídu, musíte se nejdříve ujistit v tom, co chcete změnit. Je to barva textu, pozadí, či něco jiného?

Ke zjištění správných tříd existuje naštěstí několik add-onů do prohlížečů, které dokáží podstatně urychlit práci.
Pro firefox najdete např. tyto:
1.
Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!

2.
Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!


------------------------------------------------------------------------------------------------------------------------------
V článku jsem často používal výrazy HTML a CSS. Pokud nepatříte mezi ty, kteří chtějí na foru pouze vyměnit defaultní obrázky za svoje, ale chcete si styl více "přetvořit", jsou odpovídající znalosti HTML a kaskádových stylů podmínkou.
Uvedu tedy odkaz na kterém se uvedeným znalostem můžete přiučit:
Kód: Vybrat vše
Pokud chceš vidět odkazy, tak se přihlaš (popř. zaregistruj)!


Možná jste článkem zklamáni a čekali jste, že bude detailnější, ale podstatné bylo uvedeno a teď je na Vás, jak se s tím poperete, neboť popisovat co provádí ten a ten HTML tag a k čemu slouží ta a ta třída je nad naše možnosti. Stránka, kterou jsem uvedl je studnící vědomostí, které budete potřebovat. Pokud byste se o to chtěli zajímat více do hloubky, použijte google, nebo si zakupte odborné publikaci, kterých na toto téma vyšlo nemalé množství.

Toť vše, hurá do úprav ;)

Naposledy upravil TescoTaska dne stř 22. čer 2011 16:55:28, celkově upraveno 1
Důvod: Linky do Code !!!!!
  jakubicek
Podpora
Podpora
 
Příspěvky: 137
Registrován: pon 12. črc 2010 16:30:18
Podpora: 299 Kč

Zpět na Návody

Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků


Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte. Další informace