Zaczynamy

przez 5 współtwórców

Instalacja

Pobierz ostatnią wersję Firefoksa, a następnie ją zainstaluj. Upewnij się, że zainstalowane zostało rozszerzenie Inspektor DOM.

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 <tt>classic.jar</tt> 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 <tt>classic.jar</tt> tym programem, spróbuj zmienić nazwę pliku na <tt>classic.zip</tt>.

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 <tt>classic.jar</tt> do innego łatwo dostępnego folderu -- zalecany jest <tt>Classic</tt> -- wypakuj zawartość tego folderu, upewniając się, że struktura folderów jest zachowana.

Uwaga: Możesz zmienić plik <tt>.jar</tt> na <tt>.jar.zip</tt>, wtedy go wypakować, by otrzymać plik w folderze.

Katalogi

Wewnątrz <tt>classic.jar</tt> widnieje jedna ścieżka, <tt>skin</tt>, jak również <tt>preview.png</tt> i <tt>icon.png</tt>.

<tt>skin</tt>
Zwyczajnie zawiera koleją ścieżkę, <tt>classic</tt>, w której znajdują się wszystkie najciekawsze rzeczy.
<tt>classic</tt>
Zawiera następujące elementy:
<tt>browser</tt>
Zawiera wszystkie ikony pasków narzędzi, ikony menedżera zakładek i okna opcji.
<tt>global</tt>
Zawiera prawie wszystkie ważne pliki CSS, definiujące wygląd przeglądarki. Jest to najistotniejszy element motywu.
<tt>mozapps</tt>
Zawiera wszystkie style i ikony dla podrzędnych aplikacji przeglądarki, takich jak menedżer rozszerzeń lub dialog aktualizacji oprogramowania.
<tt>help</tt>
Zawiera wszystkie pliki potrzebne do nadania wyglądu oknie pomocy.
<tt>communicator</tt>
Nic specjalnego, w sumie można o nim natychmiast zapomnieć.

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.

Kopiowanie potrzebnych plików

Pierwszym krokiem jest przeniesienie wszystkich plików do odpowiednich katalogów. Stwórz wiec nowy katalog <tt>Mój_motyw</tt>. Wewnątrz katalogu umieść katalogi <tt>browser</tt>, <tt>global</tt>, <tt>communicator</tt>, <tt>help</tt> i <tt>mozapps</tt> oraz pliki <tt>icon.png</tt> i <tt>preview.png</tt>. (Tak, to oznacza, ze struktura twojego nowego katalogu i <tt>classic.jar</tt> będą odrobinę inne).

Tworzenie plików instalacji
Contents.rdf

Skopiuj contents.rdf i umieść go w katalogu <tt>\Mój_motyw</tt>, 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.

Install.rdf

Skopiuj install.rdf i umieść go w katalogu <tt>\Mój_motyw</tt>, 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.

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 <tt>global</tt> i otwórz <tt>button.css</tt> 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ć

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 <tt>Mój_motyw</tt>, gdyż spowoduje to błąd instalacji metodą "przenieś i opuść" opisaną w następnej sekcji bez pokazania wiadomości o błędzie.

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.


Autorzy i etykiety dokumentu

Contributors to this page: Mgjbot, Tomekz, Bedi, Vedymin, Ptak82
Ostatnia aktualizacja: Mgjbot,