Modyfikacja domyślnego motywu

Wystąpiły błędy skryptów na tej stronie. Mimo, że są one kierowane do redaktorów serwisu, można je częściowo przeglądać poniżej.

{{ Aktualizuj }} Artykuł ten opisuje w jaki sposób zmodyfikować motyw okna.

Motyw podstawowy

Motyw jest ustawiona jako styl kaskadowy, obrazek i zachowanie, który jest stosowany w pliku XUL. Stosujemy różne motywy, jeśli chcemy zmienić widok okna bez zmiany funkcjonalności Mozilla dostarcza dwa podstawowe motywy, Klasyczny i Nowoczesny, inne motywy należy pobrać. XUL dla obu motywów jest taki sam, tak jak jednakże, używamy arkuszy stylów i obrazków to dla każdego z osobna.

Dla prostej personalizacji okna wyglądu Mozilla, wykonaj prostą zmianę arkusza stylów łącząc je. Większa zmiana potrafi wykonać w całości nowy motyw. Okno właściwości Mozilli posiada panel do zmiany motywu.

Motyw opisujemy używając CSS, pozwalając na definiowanie kolorów, obramowania i obrazków użytych do stworzenia elementów. Plik classic.jar i modern.jar stanowią i definiują motywy. Katalog globalny zawierający wewnątrz archiwa głównego stylu definiującego jak wyświetlić urozmaicony element XUL. Zmieniając te pliki, możesz zmienić wygląd aplikacji XUL.

Dostosujmy userChrome.css

Jeśli położysz plik nazywający się 'userChrome.css' w katalogu o nazwie 'chrome' będący wewnątrz katalogu profilu użytkownika, możesz nadużywać ustawień bez zmieniany własnych archiwum. Katalog powinien zostać utworzony w momencie tworzenia przez Ciebie profilu i umieszczeniu w nim przykładu. Plik 'userContent.css' został dostosowany do stron internetowych, podczas gdy 'userChrome.css' zostanie dostosowany do pliku chrome.

Na przykład, dodawanie pozwolenia na końcu pliku, możesz zmienić wszystkie elementy menubar posiadające czerwone tło.

menubar {
  background-color: red;
}

Jeśli otworzysz jakieś okno Mozilli po modyfikacji, to menu bars będzie czerwone. Ponieważ te zmiany zrobione zostały dla użytkownika arkusza stylów, to afekty dla wszystkich okien. Znaczy to tyle, że pasek narzędzi przeglądarki, pasek narzędzi zakładek i nawet pasek menu Znajdź pliki będzie czerwony.

Mając zmienione afekty tylko jednego okna, zmień arkusz stylów łacząc z plikiem XUL. Na przykład, dodanie czerwonego obramowania box wokół komend oknie adresu, dodając następny plik addressbook.css do archiwów modern.jar lub classic.jar.

menuitem {
  border: 1px solid red;
}

Jeśli spojrzymy w jeden motyw w archiwum, zwróć uwagę, że każda posiada numer arkusza stylu i numer obrazka. Arkusze stylów odnoszą się do obrazków. Powinieneś unikać położenia odnośników do obrazków bezpośrednio w plikach XUL, jeśli chcesz aby twoja zawartość miała zdolności motywu. Jest tak, ponieważ szczególne projekty motywów mogą nie używać obrazków i będą potrzebowały więcej na kompleksowy projekt. Kierując do obrazków z pliku CSS, są one w prosty sposób usuwane. Także usuwane są uzależnienia ze specyficznych nazw plików obrazka.

If you look in one of the skin archives, you will notice that each contain a number of style sheets and a number of images. The style sheets refer to the images. You should avoid putting references to images directly in XUL files if you want your content to be skinnable. This is because a particular skin's design might not use images and it may need some more complex design. By referring to the images with CSS, they are easy to remove. It also removes the reliance on specific image filenames.

Możesz przydzielać obrazki do przycisków, pól wyboru i innych elementów używając własności list-style-image jak następujące:

checkbox {
  list-style-image: url("chrome://findfile/skin/images/check-off.jpg");
}

checkbox[checked="true"] {
  list-style-image: url("chrome://findfile/skin/images/check-on.jpg");
}

Kod ten zmienia obrazki łącząc je z polami wyboru. Pierwszy styl ustawia obrazki dla normalnych pól wyboru, a drugi arkusz stylów ustawia obrazek na zaznaczone pole wyboru. Modyfikator 'checked=true' tworzy styl mający zastosowanie tylko do elementów, które mają ustawiony swój atrybut checked na true.

var el = env.locale; Zobacz także : Tworzenie skórek dla Firefoksa i CSS getting started

W następnym artykule, zobaczymy jak stworzyć nowy motywy.

Autorzy i etykiety dokumentu

Autorzy tej strony: Minh Nguyen, Ptak82, Mgjbot
Ostatnia aktualizacja: Mgjbot,