Artykuł opisuje jak utworzyć prosty motyw. Dla prostoty, tylko zastosujemy to do okna dialogowego Znajdź pliki.
Proste motywy
Obrazek poniżej ukazuje aktualne okno dialogowe <tt>Znajdź pliki</tt>. Utworzymy motyw, który będziemy mogli dodać do niego. Normalnie, motyw znalazłaby zastosowanie do całej aplikacji, ale my się tylko skupimy na oknie dialogowym <tt>Znajdź pliki</tt>, aby nasza praca stała się łatwiejsza. Z tego powodu, zmienimy tylko plik <tt>findfile.css</code> a nie cały plik <tt>global.css</tt>. Rozdział ten zaczynamy posiadając klasyczny motyw. Powinieneś wykonać kopię zapasową plików użytych w oknie dialogowym <tt>Znajdź pliki</tt>, zanim zaczniesz je edytować.
Będziesz potrzebować do utworzenia motywu pliku <tt>findfile.css</tt> z ustawionymi danymi motywu podstawowego. Możesz tymczasowo umieścić te wartości w katalogu i zdefiniować go używając dyrektywy w pliku stylów kaskadowych. Możesz modyfikować istniejący plik <tt>findfile.css</tt> i natychmiast zobaczyć jak wygląda on zmieniony, lub możesz utworzyć zwykły motyw i podać ścieżkę do niego. Aby utworzyć motyw, musisz wykonać:
- Utworzyć katalog, gdzie kolwiek będziesz chciał umieścić pliki motywu.
- Skopiuj listę plików (condents.rdf) z klasycznej lub nowoczesnego motywu do nowego katalogu.
- Zmodyfikuj wzmianki w pliku listy, ze zwykłego motywu do twojego motywu. Na przykład, zmień wzmiankę 'classic/1.0' na 'blueswayedshoes/1.0'.
- Dodaj linię do pliku 'chrom/installed-chrom.txt z następującymi zmianami:
skin,install,url,file:///stuff/blueswayedshoes/
gdzie ostatnia para wskazuje do twojego nowo utworzonego katalogu. Upewnij się czy dodałeś slash na końcu ścieżki.
Skopiuj oryginalny plik <tt>findfile.css</tt> do nowego katalogu. Użyjemy go jako bazy dla nowego motywu. Potem możemy kierować do niego używając URL 'chrome://findfile/skin/findfile.css'. Po pierwsze, zdecydujmy, jaki rodzaj zmian chcemy wprowadzić. My zrobimy prostą zmianę kolorów, zmodyfikujemy style przycisków, i zmodyfikujemy trochę rozmieszczenie. Zacznijmy od menu, paska narzędzi i powłoki tabulacji.
Następne reguły stylu dodawane do pliku <tt>findfile.css</tt> będą powodować zmiany w wyświetlaniu załączonego obrazu.
window > box {
background-color: #0088CC;
}
menubar,menupopup,toolbar,tabpanels {
background-color: lightblue;
border-top: 1px solid white;
border-bottom: 1px solid #666666;
border-left: 1px solid white;
border-right: 1px solid #666666;
}
caption {
background-color: lightblue;
}
Wewnętrzne okno pudełka, (który aktualnie otacza całą zawartość okna) zostało zmienione na kolor średnio-niebieski. Możesz zobaczyć ten niebieski, pomiędzy pasem kart i u samego dołu okna. Cztery elementy menubarmenupopuptoolbartabpanelscaption
Pierwsza reguła powyżej (dla 'window > box') określa, że potomek-dziecko box, okna posiada inny kolor. Prawdopodobnie nie jest to dobre rozwiązanie w tym przypadku. Powinniśmy naprawdę zmienić użyte tutaj klasy stylu. Zróbmy to. Idąc tą drogą, możemy zmodyfikować XUL bez potrzeby trzymania pudełka jako pierwszego potomka okna.
.findfilesbox {
background-color: #0088CC;
}
XUL:
<vbox class="findfilesbox" orient="vertical" flex="100%">
<toolbox>
Następnie, zmodyfikujmy karty. Zrobimy zaznaczone kartę, pogrubimy i zmienimy zaokrąglenia na nich.
tab:first-child {
-moz-border-radius: 4px 0px 0px 0px;
}
tab:last-child {
-moz-border-radius: 0px 4px 0px 0px;
}
tab[selected="true"] {
color: #000066;
font-weight: bold;
text-decoration: underline;
}
Druga reguła zmienia wygląd normalnej karty, pierwsze ustawienia zaokrąglenia pierwszej karty i ustawienia drugiej zaokrągla, gdyż jest to ostatnia karta. Użyte tutaj są specjalne reguły stylów Mozilli, -moz-border-radius, które tworzą zaokrąglone obramowanie rogów. Górne lewe obramowanie pierwszej karty i górne prawe obramowanie drugiej karty, są zaokrąglone czterema pikselami i pozostałe rogi mają również wartość równą zero pikseli, które są równoważne nie zaokrąglaniu. Powiększenie wartości tutaj powodują większe zaokrąglenie i zmniejszają widok ich jako prostokątnych.
Ostatnia reguła nakłada tylko kartę, że posiadają atrybut selectedtrue. To stwarza tekst w zaznaczonej karcie jako pogrubiony, podkreślony i koloru ciemno niebieskiego. Uwaga, w obrazku w tym przykładzie styl ten został zastosowany tylko do pierwszej karty, ponieważ jest zaznaczony jako jedyny.
Przyciski paska narzędzi z menu commands poniekąd są trudne do wyróżnienia. Dodamy kilka ikon do przycisków robiąc je bardziej przejrzystymi. Mozilla Compresor dostarcza ikony przycisków Otwórz i Zapisz, które będą użyte tutaj do zapisania czasu. Potrafimy ustawić obrazek dla przycisku poprzez właściwość CSS list-style-image.
#opensearch {
list-style-image: url("chrome://editor/skin/icons/btn1.gif");
-moz-image-region: rect(48px 16px 64px 0);
-moz-box-orient: vertical;
}
#savesearch {
list-style-image: url("chrome://editor/skin/icons/btn1.gif");
-moz-image-region: rect(80px 16px 96px 0);
-moz-box-orient: vertical;
}
Mozilla dostarcza własności zwykłych stylów -moz-image-region, które potrafi zostać użyte do zrobienia części elementu obrazka. Możesz myśleć o tym , jako, że jest to spięty region obrazka. Ustawiasz właściwości pozycji i rozmiaru obrazka i przycisk będzie wyświetli tylko ten kawałek obrazka. Uznane to zostaje jako ten sam obrazek dla wielokrotnego przycisków i ustawia inne regiony dla każdego. Kiedy masz kilka przycisków, ze statusem najechany, aktywny i wyłączony, to zachowuje miejsce, które normalnie jest okupowane przez wielokrotne obrazki. W kodzie powyżej, używamy tego samego obrazka dla każdego przycisku, ale ustawiamy inne regiony dla każdego jednego. Jeśli widzisz ten obrazek (btn1.gif), powinieneś spostrzec, że stanowi to kratkę z małymi obrazkami, każdy jeden o wymiarach 16 na 16 pikseli.
Własność -moz-box-orient jest użyta do orientacji pionowej przycisku, więc obrazek ten stanowi powyższą etykietę. Ta cecha ma te same znaczenie jako atrybut orient
Następnie, zrobimy kilka zmian dotyczących przycisków znajdujących się wzdłuż dołu, ponownie użyjemy kilku ikon z Mozilli do zapisania w czasie. Jeśli tworzysz swój własny motyw, będziesz potrzebować nowych ikon lub skopiuj ikony nowych plików. Jeśli pójdziemy za przykładem w tym rozdziale, to tylko kopia plików do Twojej nowego motywu i odpowiednia zmiana URL-a.
#find-button {
list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg");
font-weight: bold;
}
#cancel-button {
list-style-image: url("chrome://global/skin/icons/images/close-button.jpg");
}
button:hover {
color: #000066;
}
Dodamy obrazki do przycisków i zrobimy przycisk Znajdź, który będzie posiadał pogrubiony tekst wskazujący, że jest to przycisk domyślny. Ostatnia zasada nakłada na przycisk zasadę, że jeśli kursor myszy ma się zmieniać nad przyciskiem. Ustawiamy kolor tekstu na ciemny niebieski w tym przypadku. Na koniec, kilka mniejszych zmian w rozmieszczeniu w oknie znajdujących się tam rzeczy, poprzez ustawienie marginesów:
tabbox {
margin: 4px;
}
toolbarbutton {
margin-left: 3px;
margin-right: 3px;
}
Po tych zmianach, okno dialogowe <tt>Znajdź pliki</tt> będzie wyglądało w następujący sposób.
Jak możesz zauważyć, proste zmiany w regułach stylu dały rezultat całkiem innego wyglądu okna dialogowego <tt>Znajdź pliki</tt>. Możemy kontynuować poprzez zmianę menu, chwytając pasek narzędzi i położenie elementu pola wyboru.
Tworzenie globalnego motywu
Stworzony motyw powyżej, jest prosty i tylko zastosowanie do okna dialogowego <tt>Znajdź pliki</tt>. Niektóre zmiany zrobione dla motywu, powinny być umieszczone w pliku globalnych arkuszach stylów (w globalnym katalogu skórek) dla zastosowania we wszystkich aplikacjach. Na przykład, posiadanie innych obrazków dla sprawdzenia pudełka w oknie dialogowym <tt>Znajdź pliki</tt>, jako inny wygląd okna to trochę dziwaczne. Ta zmiana powinna naprawdę zostać przeniesiona do arkusza stylów globalnych.
Spróbuj przenieść style CSS z pliku <tt>findfile.css</tt> do pliku <tt>global.css</tt> i następnie spójrz na niektóre okna dialogowe w Mozilli (Widok cookie jest dobrym przykładem). Zostaniesz powiadomiony, że posiada adoptowane reguły te, co dodałeś. Niektóre reguły popadają w konflikt miedzy sobą w plikach stylów. Na przykład, reguły już zdefiniowane dla przycisków, kart i inne zdefiniowane dodatkowe reguły dla nich. Kiedy zmieniasz skórę global, możesz potrzebować scalenia zmian do istniejących reguł.
Do najlepszych zdolności skórki, to jest deklaracja wyglądu bliskich zasad stylów w katalogu globalnym, raczej niż w indywidualnym pliku stylów. Zawiera on kolory, czcionki i rozmiary wyglądu. Jeśli zmienisz kolor lub coś w lokalnym pliku skóry (takim jak <tt>findfile.css</tt>), okno dialogowe może wyglądać dziwacznie jeśli użytkownik zmieni swoją skórę globalną. Nie wyklucza to użytkownikowi używania jednej domyślnej.
Przykład <tt>Znajdź pliki</tt> wraz z motywem : Źródła Podgląd Arkusz stylów
Zobacz także: Rozszerzenia CSS Mozilli i Dokumentacja CSS
W następnym temacie przedstawiamy dyskusje, jak zrobić lokalizację aplikacji XUL.