Upravte si Hattrick! (III) - foxtrick skins
Nelíbí se vám vzhled Hattricku a chtěli byste si ho upravit podle vašeho oblíbeného klubu nebo hráče? Jedna možnost tu je: FoxTrick skin. V tomhle článku se pokusím sestavit návod, jak takový skin udělat, co bude k tvorbě třeba nebo kterých chyb se vyvarovat. Rád bych taky zdůraznil, že vycházím ze svých zkušeností a programátoři, kteří vědí o co jde, budou nad některými věcmi kroutit hlavou, čili berte tento text s rezervou. Budu jej psát pro naprosté nováčky.
Do začátku budete potřebovat:
1) prohlížeč Mozilla Firefox - naprostá nutnost, bez něj můžete rovnou přestat číst. Nejnovější verzi browseru najdete tady, bohužel musím zdůraznit, že ne všechny verze Firefoxu skiny podporují. Starší verze Firefoxu najdete tady, eventuelně si pročtěte fórum a zkuste chybu opravit sami.
2) Firefox extension - rozšíření Firefoxu nabízí spoustu přídavných funkcí. Instalace je jednoduchá: zajdeme na http://foxtrick.px.cz/install/, po kliknutí na stáhnutí povolíme instalaci rozšíření (musíte mít nainstalovaný příslušný modul). Po uplynutí pěti vteřin klikněte na Instalovat nyní a už to jede. Po úspěšném nainstalování je ještě třeba restartovat Firefox (vypnout všechna okna).
3) program na kódování barev - každá barva je určná třemi hodnotami: intenzitou modré, zelené a červené. Například bílá: všechny barvy jsou zapnuté, tedy FF-FF-FF. Černá: všechny barvy jsou vypnuté 00-00-00. Jednoduché prográmky najdete na např. www.stahuj.cz, já osobně používám Barvomíchač.
4) program na úpravu grafiky - Malování (MS Paint) je velmi užitečný nástroj, ale časem bude možná potřeba něco lepšího. Hlavně pro tvorbu průhledných gifů a možná nějaké to obarvování. Mezi Freeware se určitě něco najde.
5) čas a spoustu trpělivosti
Nejjednodušší způsob, jak vytvořit vlastní skin, je stáhnout již existující skin a následně ho upravit. Na adrese http://foxtrick.px.cz/skins najdete seznam skinů, ze kterých můžete vybírat. Pokud není na výběr preview, musíte skin instalovat a poté si ho prohlédnout. Instalace se provádí tak, že kliknete pravý tlačítkem na jméno skinu a úplně dole zvolíte Instaluj Hattrick.org skin. Nezapomeňte po instalaci restartovat Firefox!!
Na výběru výchozí skinu záleží opravdu hodně. Není důležité, jak skin vypadá a jaké barvy používá, ale co všechno a jak je změněno!! Některé skiny mění jen hlavní logo, jiné barvu textu, obrázky nebo všechno dohromady. Na druhou stanu lze doplňovat části zdrojových kódů i z jiných skinů. V podstatě je to nezbytné, protože Hattrick přešel na nový design. Tím pádem u starých skinů některé věci fungují špatně nebo vůbec.
Pokud máte ten správný skin stáhnutý, musíte vědět, kde se fyzicky nachází, abyste ho mohli editovat. Je to přibližně tady:
X:Documents and SettingsX1Data aplikacíMozillaFirefoxProfilesX2.defaultfoxtrickskins
X - označení disku, na kterém je operační systém
X1 - jméno profilu ve Windows
X2 - indivudální číslo
adresář Data aplikací má vlastnost skrytý, takže se v základní nabídce nezobrazuje!!
Úplný skin obsahuje adresář images, kde jsou uloženy obrázky, soubory bindings.css a .xml, userContent.css a info.properties. Nejprve vyplňte soubor info.properties (jméno skinu, verze, atd.). Jako první je nejoptimálnější vyrobit horní logo. Rozměry by měly odpovídat původnímu obrázku, jako podklad je vhodné použít výřez z jiné fotogtrafie, nejlépe ve vysokém rozlišení. Jednolitá jednobarevná plocha taky jde, ale vyvarujte se pastelových barev, ze kterých bolí oči. Obsah loga pak záleží na každém zvlášť. Lze použít znak klubu, text psaný ozdobným písmem, fotografie hráče/hráčů nebo třeba neutrální motiv (květiny, auto, míč apod.) Čím víc toho logo bude obsahovat, tím líp.
Následuje úprava souboru userContent.css, který je rozdělen na několik částí. Dá se měnit barva pozadí, velikost písma, šířka infobaru atd. Různé skiny upravují text různými způsoby, takže si najděte takový, který vám nejvíc vyhovuje. Klidně můžete použít jen tu vybranou část skinu, ale pozor, aby vám to nerozhodilo zbytek.
Zbývají obrázky. V souboru bindings.css je seznam obrázků, které mají být změněny. Nejprve je napsána cesta k původnímu obrázku, za ním je uvedeno, jak bude nahrazen. Soubor bindings.xml ukazuje, čím bude nahrazen. Příklad: změna obrázku na hlavní stránce. V soboru bindings.css bude řádek img[src*="images/hattrickcrest4a.gif"]
{ -moz-binding: url("bindings.xml#dres") !important; }. images/hattrickcrest4a.gif je cesta k původnímu souboru,
bindings.xml#dres ho nahradí. V bindings.xml bude
this.src="jar:foxtrick://skins/jménoskinu.zip!/images/dres.gif";
A v adresáři images bude soubor dres.gif. Takto postupujeme u všech obrázků. Nejdále v tomto směru zašel boogster, který ve svém skinu kompletně přetvořil všechny obrázky. Samozřejmě můžete ponechat i originály.
Pokud chcete, můžete svůj výtvor uveřejnit tím, že ho zabalený pošlete kolmisovi na adresu kolmis@gmail.com. Za čas ho možná najdete v seznamu skinů.
Do začátku budete potřebovat:
1) prohlížeč Mozilla Firefox - naprostá nutnost, bez něj můžete rovnou přestat číst. Nejnovější verzi browseru najdete tady, bohužel musím zdůraznit, že ne všechny verze Firefoxu skiny podporují. Starší verze Firefoxu najdete tady, eventuelně si pročtěte fórum a zkuste chybu opravit sami.
2) Firefox extension - rozšíření Firefoxu nabízí spoustu přídavných funkcí. Instalace je jednoduchá: zajdeme na http://foxtrick.px.cz/install/, po kliknutí na stáhnutí povolíme instalaci rozšíření (musíte mít nainstalovaný příslušný modul). Po uplynutí pěti vteřin klikněte na Instalovat nyní a už to jede. Po úspěšném nainstalování je ještě třeba restartovat Firefox (vypnout všechna okna).
3) program na kódování barev - každá barva je určná třemi hodnotami: intenzitou modré, zelené a červené. Například bílá: všechny barvy jsou zapnuté, tedy FF-FF-FF. Černá: všechny barvy jsou vypnuté 00-00-00. Jednoduché prográmky najdete na např. www.stahuj.cz, já osobně používám Barvomíchač.
4) program na úpravu grafiky - Malování (MS Paint) je velmi užitečný nástroj, ale časem bude možná potřeba něco lepšího. Hlavně pro tvorbu průhledných gifů a možná nějaké to obarvování. Mezi Freeware se určitě něco najde.
5) čas a spoustu trpělivosti
Nejjednodušší způsob, jak vytvořit vlastní skin, je stáhnout již existující skin a následně ho upravit. Na adrese http://foxtrick.px.cz/skins najdete seznam skinů, ze kterých můžete vybírat. Pokud není na výběr preview, musíte skin instalovat a poté si ho prohlédnout. Instalace se provádí tak, že kliknete pravý tlačítkem na jméno skinu a úplně dole zvolíte Instaluj Hattrick.org skin. Nezapomeňte po instalaci restartovat Firefox!!
Na výběru výchozí skinu záleží opravdu hodně. Není důležité, jak skin vypadá a jaké barvy používá, ale co všechno a jak je změněno!! Některé skiny mění jen hlavní logo, jiné barvu textu, obrázky nebo všechno dohromady. Na druhou stanu lze doplňovat části zdrojových kódů i z jiných skinů. V podstatě je to nezbytné, protože Hattrick přešel na nový design. Tím pádem u starých skinů některé věci fungují špatně nebo vůbec.
Pokud máte ten správný skin stáhnutý, musíte vědět, kde se fyzicky nachází, abyste ho mohli editovat. Je to přibližně tady:
X:Documents and SettingsX1Data aplikacíMozillaFirefoxProfilesX2.defaultfoxtrickskins
X - označení disku, na kterém je operační systém
X1 - jméno profilu ve Windows
X2 - indivudální číslo
adresář Data aplikací má vlastnost skrytý, takže se v základní nabídce nezobrazuje!!
Úplný skin obsahuje adresář images, kde jsou uloženy obrázky, soubory bindings.css a .xml, userContent.css a info.properties. Nejprve vyplňte soubor info.properties (jméno skinu, verze, atd.). Jako první je nejoptimálnější vyrobit horní logo. Rozměry by měly odpovídat původnímu obrázku, jako podklad je vhodné použít výřez z jiné fotogtrafie, nejlépe ve vysokém rozlišení. Jednolitá jednobarevná plocha taky jde, ale vyvarujte se pastelových barev, ze kterých bolí oči. Obsah loga pak záleží na každém zvlášť. Lze použít znak klubu, text psaný ozdobným písmem, fotografie hráče/hráčů nebo třeba neutrální motiv (květiny, auto, míč apod.) Čím víc toho logo bude obsahovat, tím líp.
Následuje úprava souboru userContent.css, který je rozdělen na několik částí. Dá se měnit barva pozadí, velikost písma, šířka infobaru atd. Různé skiny upravují text různými způsoby, takže si najděte takový, který vám nejvíc vyhovuje. Klidně můžete použít jen tu vybranou část skinu, ale pozor, aby vám to nerozhodilo zbytek.
Zbývají obrázky. V souboru bindings.css je seznam obrázků, které mají být změněny. Nejprve je napsána cesta k původnímu obrázku, za ním je uvedeno, jak bude nahrazen. Soubor bindings.xml ukazuje, čím bude nahrazen. Příklad: změna obrázku na hlavní stránce. V soboru bindings.css bude řádek img[src*="images/hattrickcrest4a.gif"]
{ -moz-binding: url("bindings.xml#dres") !important; }. images/hattrickcrest4a.gif je cesta k původnímu souboru,
bindings.xml#dres ho nahradí. V bindings.xml bude
A v adresáři images bude soubor dres.gif. Takto postupujeme u všech obrázků. Nejdále v tomto směru zašel boogster, který ve svém skinu kompletně přetvořil všechny obrázky. Samozřejmě můžete ponechat i originály.
Pokud chcete, můžete svůj výtvor uveřejnit tím, že ho zabalený pošlete kolmisovi na adresu kolmis@gmail.com. Za čas ho možná najdete v seznamu skinů.
K tomuto článku nikdo nediskutoval.