Tworzenie skórek dla Firefoksa:Zaczynamy
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
Spis treści |
[edytuj] Instalacja
Pobierz ostatnią wersję Firefoksa, a następnie ją zainstaluj. Upewnij się, że zainstalowane zostało rozszerzenie Inspektor DOM.
[edytuj] Rozpakowywanie motywu
O ile hipotetycznie możesz rozpocząć budowę własnego motywu od jakiegokolwiek już zaprojektowanego na Firefoxa, zważając na spójność omówimy tylko przypadek edycji Winstripe'a (domyślnego motywu Firefoxa). Jest on zlokalizowany w pliku classic.jar w ścieżce instalacyjnej Firefoxa. Pliki o rozszerzeniu .jar mają w rzeczywistości taką samą strukturę jak pliki zip, więc możesz je otwierać za pomocą tego samego programu, którego używasz do otwierania plików zip. Jeśli masz problemy z otwarciem pliku classic.jar tym programem, spróbuj zmienić nazwę pliku na classic.zip.
[edytuj] Lokalizacja classic.jar
Linux: /usr/lib/MozillaFirefox/chrome/classic.jar
Windows: \Program Files\Mozilla Firefox\chrome\classic.jar
Dla Mac OS X:
- Wejdź do folderu applications
- Trzymając wciśnięty klawisz Command, kliknij ikonę Firefoxa, następnie wybierz Show Package Contents
- Wejdź do contents/MacOS/Chrome/classic.jar
Skopiuj classic.jar do innego łatwo dostępnego folderu -- zalecany jest Classic -- wypakuj zawartość tego folderu, upewniając się, że struktura folderów jest zachowana.
Uwaga: Możesz zmienić plik .jar na .jar.zip, wtedy go wypakować, by otrzymać plik w folderze.
[edytuj] Katalogi
Wewnątrz classic.jar widnieje jedna ścieżka, skin, jak również preview.png i icon.png.
- skin
- Zwyczajnie zawiera koleją ścieżkę, classic, w której znajdują się wszystkie najciekawsze rzeczy.
- classic
- Zawiera następujące elementy:
- browser
- Zawiera wszystkie ikony pasków narzędzi, ikony menedżera zakładek i okna opcji.
- global
- Zawiera prawie wszystkie ważne pliki CSS, definiujące wygląd przeglądarki. Jest to najistotniejszy element motywu.
- mozapps
- Zawiera wszystkie style i ikony dla podrzędnych aplikacji przeglądarki, takich jak menedżer rozszerzeń lub dialog aktualizacji oprogramowania.
- help
- Zawiera wszystkie pliki potrzebne do nadania wyglądu oknie pomocy.
- communicator
- Nic specjalnego, w sumie można o nim natychmiast zapomnieć.
[edytuj] Instalacja nowego motywu
Przed możliwością zobaczenia zmian dokonanych w motywie Firefoxa (odkąd edycja na żywo jest niezmiernie trudna do wykonania) najpierw należy nauczyć się przepakowywać motyw, by uczynić go instalowalnym. Dla celów dalszej dyskusji nazwiemy nasz motyw "Mój_motyw", ale możesz go nazwać jak chcesz.
[edytuj] Kopiowanie potrzebnych plików
Pierwszym krokiem jest przeniesienie wszystkich plików do odpowiednich katalogów. Stwórz wiec nowy katalog Mój_motyw. Wewnątrz katalogu umieść katalogi browser, global, communicator, help i mozapps oraz pliki icon.png i preview.png. (Tak, to oznacza, ze struktura twojego nowego katalogu i classic.jar będą odrobinę inne).
[edytuj] Tworzenie plików instalacji
[edytuj] Contents.rdf
Skopiuj contents.rdf i umieść go w katalogu \Mój_motyw, a następnie otwórz w edytorze tekstowym. Ten plik to mała baza danych XML używana do opisu skórki.
W kodzie poszukaj wszystkie wystąpienia "Mój_motyw" i zamień go nazwa swojego motywu.
Sekcja paczek zawiera komponenty przeglądarki, które modyfikujesz. Jeślibyśmy posiadali skórki do Chatzilli powinniśmy dodać linię podobną do innych i zmienić ją tak, by wskazywała na Chatzille. Jednakże ta lista zawiera wszystko co uległo zmianie, tak wiec zmodyfikuj tylko niebieski tekst tak, by pasował nazwą/wersją do tego czego używałeś w tej sekcji poprzednio.
<RDF:li resource="urn:mozilla:skin:Mój_motyw:communicator"/> <RDF:li resource="urn:mozilla:skin:Mój_motyw:editor"/> <RDF:li resource="urn:mozilla:skin:Mój_motyw:global"/> <RDF:li resource="urn:mozilla:skin:Mój_motyw:messenger"/> <RDF:li resource="urn:mozilla:skin:Mój_motyw:navigator"/>
Zapisz plik i wyjdź z edytora.
[edytuj] Install.rdf
Skopiuj install.rdf i umieść go w katalogu \Mój_motyw, a następnie otwórz w edytorze tekstowym. Ten plik to mała baza danych XML używana do opisu skórki.
<Description about="urn:mozilla:install-manifest">
<em:id>{Themes_UUID}</em:id>
<em:version>Themes_Version</em:version>
Pierwsza sekcja wymaga byś stworzył UUID dla swojego motywu oraz nadał mu numer wersji. Po dokonaniu tego wpisz informacje jak pokazano powyżej i przewin w dół.
Musisz również zaktualizować w następującej sekcji maksymalną i minimalną wersję kompatybilną z aplikacją docelową (Firefox):
<em:targetApplication>
<Description>
<!-- Firefox's UUID -->
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>Min_FF_Version</em:minVersion>
<em:maxVersion>Max_FF_Version</em:maxVersion>
</Description>
</em:targetApplication>
Określenie obydwu pozwala na unikniecie konfliktów z wersją Firefoxa, dla której motyw nie jest przeznaczony, lub na której nie był testowany.
[edytuj] Pliki CSS
Pliki CSS w tych katalogach informują przeglądarkę w jaki sposób wyświetlać przyciski i inne kontrolki, gdzie umieścić obrazki, jaki typ obramowań powinien być na około obrazków itd.
Dla przykładu zmieńmy standardowy przycisk.
Idź do głównego katalogu global i otwórz button.css w edytorze tekstu. Przewiń do button {. Ta sekcja opisuje standardowy przycisk i jego stan (nie ma nad nim myszy, nie został wyłączony i nie został wybrany).
Zmień background-color: na DarkBlue oraz color: na White, zapisz plik.
Więcej jak skończę testować
[edytuj] Ponowne pakowanie JAR
Teraz wszystko co jest potrzebne to przepakowanie plik JAR z następującą strukturą katalogów, by stworzyć archiwum zip:
/browser/* /communicator/* /global/* /help/* /mozapps/* /contents.rdf /install.rdf /icon.png /preview.png
Upewnij się, że nie archiwizujesz katalogu nadrzędnego dla Mój_motyw, gdyż spowoduje to błąd instalacji metodą "przenieś i opuść" opisaną w następnej sekcji bez pokazania wiadomości o błędzie.
[edytuj] Wymuszanie instalacji z sieci
Aby zainstalować pliki JAR motywu bezpośrednio z sieci należy wykonać kod JavaScriptu.
<a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, "mójmotyw.jar", "Mój_motyw")'>Instaluj motyw</a>
Jeśli posiadasz pliki JAR na dysku twardym i chciałbyś je zainstalować wtedy ściągnij/użyj tego formularza(formularz nie działa).
Można również po prostu otworzyć panel motywów w Mozilli, przeciągnąć i upuścić w nim plik .jar.
Jak zamienić twoje katalogi w plik .jar? To bardzo proste! Po archiwizacji katalogów do pliku .zip należy zmienić rozszerzenie pliku z .zip na .jar.