Zmiany wyglądu
W programach Mozilli można dokonywać daleko idących zmian wyglądu na kilka sposobów, ten artykuł jest próbą możliwie pełnego ich omówienia, nie będą jednak omawiane wszystkie możliwe warianty wprowadzania danej zmiany a jedynie najprostszy do przeprowadzenia sposób.
Spis treści |
Motywy
Najłatwiej zmieniać wygląd aplikacji poprzez motywy, wystarczy wybrać z menu Narzędzia → Motywy odpowiedni motyw. Aby pobrać nowy motyw należy wybrać odnośnik Pobierz więcej motywów który skieruje do strony z dostępnymi motywami.
- W Thunderbirdzie nie istnieje obecnie możliwość instalacji motywów i rozszerzeń bezpośrednio ze strony internetowej. Aby zainstalować motyw należy zapisać go na dysk a następnie (poprzez opcję Zapisz element docelowy jako... z menu kontekstowego wywoływanego prawym przyciskiem myszy przy wybieraniu odnośnika) z menedżera motywów (Narzędzia → Motywy) wybrać Instaluj i wskazać pobrany plik motywu.
- W Seamonkey menedżer motywów można znaleźć poprzez wybór z menu Edycja → Preferencje → Wygląd → Motywy, motywy mogą być instalowane bezpośrednio ze stron internetowych i przeważnie są przeznaczone dla wszystkich komponentów aplikacji (Nawigator, Kurier Poczty, CzatZilla, itd.).
Rozszerzenia
Również rozszerzenia często wpływają na wygląd aplikacji np. poprzez dodanie do pasków narzędziowych nowych przycisków, nowych pasków narzędziowych, wzbogacania panelu bocznego, itd. Aby zmodyfikować układ pasków narzędziowych (nie wszystkie rozszerzenia domyślnie po zainstalowaniu “wpychają się” na wierzch) należy wybrać z menu Widok → Pasek narzędzi → Dostosuj i następnie przeciągnąć interesujące nas ikony w wybrane miejsca.
- W Seamonkey obecnie utrudnione jest zarządzanie wyglądem podstawowych pasków narzędziowych (ustawienia znajdują się w opcjach każdego komponentu np: Edycja → Preferencje → Kompozytor Stron → Paski narzędziowe), z tego powodu większość rozszerzeń korzysta z paska stanu, panelu bocznego, tworzy nowe paski lub dodaje opcje menu narzędziowym lub kontekstowym (zachowania te często można korygować poprzez opcje samych rozszerzeń).
Więcej: Jak zainstalować rozszerzenie.
Edycja plików konfiguracyjnych
- Po przydługim wstępie, to co tygryski lubią najbardziej, czyli sposób na maksymalne wykorzystanie istniejących możliwości programu.
Z racji swej budowy wygląd aplikacji Mozilli można praktycznie dowolnie dostosowywać do swoich upodobań bez konieczności tworzenia całego motywu lub innych równie absurdalnych pomysłów w celu wprowadzenia jednej drobnej zmiany. Interfejs aplikacji jest budowany przy pomocy XUL a wygląd opisywany jest za pomocą rozszerzonych reguł CSS (jeżeli nie znasz możesz się zapoznać z kursem, jednak do wprowadzenia prostych zmian informacje w nim zwarte są wręcz nadmiarowe).
Ustawienia zmian wyglądu należy zapisywać w pliku userChrome.css, można to robić ręcznie (do tego celu wystarczy edytor tekstu, np. Notatnik) jednak większości osób zapewne bardziej przypadnie do gustu sposób z rozszerzeniem ChromEdit. Nazwy elementów które mają zostać zmienione (opisane przez nowe reguły CSS) najłatwiej odszukać przy pomocy Inspektora DOM (oczywiście zawsze można skorzystać z gotowych przykładów jednak nie ma gwarancji że będą one zawsze działały i doskonale odpowiadały zamierzeniom).
Przykład 1
Przykład modyfikacji szerokości paska wyszukiwarki przy pomocy inspektora DOM oraz rozszerzenia ChromEdit w programie Firefox.
- Uruchamiamy program oraz inspektora DOM (Narzędzia → Inspektor DOM)
Poszukiwania id elementu GUI
- Z menu inspektora należy wybrać:
- Plik → Zbadaj okno → tytuł_strony Mozilla Firefox
- Szukaj → Wybierz elementy poprzez kliknięcie (ew. odpowiedni przycisk na pasku narzędziowym)
- Wskazujemy element interfejsu programu którego wygląd ma zostać zmieniony, w tym przypadku będzie to wyszukiwarka a właściwie element ją obejmujący.
- Wskazany element powinien zostać wyróżniony czerwonym obramowaniem a w oknie inspektora DOM powinno zostać rozwinięte drzewo DOM i przeniesione zaznaczenie węzeł wybranego przez nas elementu (tak jak na zrzucie obok).
- Otwieramy rozszerzenie ChromEdit (Narzędzia → ChromEdit → ChromEdit) i w karcie userChrome.css dodajemy regułkę:#searchbar { width: 300px !important; }
- Restartujemy program i możemy podziwiać efekt końcowy.
Podsumowanie
Celowo zostały dobrane proste przykłady, zasadniczo w celu pokazania metody wprowadzania zmian:
- odszukanie identyfikatora elementu (zmiany wg. klasy są niezalecane – mogą powodować dużo nieprzewidzianych efektów ubocznych)
- nadanie mu upragnionych cech
- ponowne uruchomienie programu
Metoda ta jest w miarę uniwersalna, niezależna od stopnia komplikacji i innych. Bardziej skomplikowane zmiany będą wymagały jedynie dokładniejszego zapoznania się z regułami opisującymi zmieniany element (ew. także jego potomków i rodzica) poprzez inspektora wymuszając przez to skomplikowany opis zmian (może przydać się dobra znajomość CSSa). Ponadto istnieje już wiele przykładów publikowanych przez użytkowników, które można wprowadzić “od reki” (ew. dostosować do własnych pomysłów), takie przykłady można znaleźć np. w wątku na naszym forum.
Przydatne odnośniki
- Kurs CSS: CSS:Na początek - MDC
- Wątek na forum z przykładami reguł dla userCrome.css
- Theme development - MKB
- Spis specyficznych rozszerzeń CSS używanych w programach Mozilli