Jak zmienić wygląd Moodle – cz. 1
Kompozycja, skórka, theme jest dla moodle’a tym co definiuje jak silnik Moodle wyświetla poszczególne strony. Kompozycje tworzy się stosunkowo łatwo i nie wymaga to szczególnej wiedzy programistycznej, a pozwoli na przygotowanie spersonalizowanego wyglądu platformy, który ograniczony jest tylko i wyłącznie inwencją projektanta.
Kompozycje oparte są o Kaskadowe arkusze stylów[1,2] (CSS) i pliki graficzne. Najłatwiej zacząć tę przygodę od stworzenia swojej własnej kompozycji lub modyfikowania istniejącej. Postaram się w kilku kolejnych postach przybliżyć temat tworzenia skórek – kompozycji dla moodle.
Wymagania
Aby rozpocząć pracę nad tworzeniem Twojej pierwszej własnej kompozycji dla moodle musisz spełnić podstawowe wymagania:
1. Posiadać platformę moodle, lub dostęp administracyjny do takiej platformy (w tym również dostęp do serwera, na którym moodle jest zainstalowany) – na początek polecam zainstalować moodle lokalnie na własnym komputerze, unikniemy punktu2.
2. Posiadać edytor tekstowy, w którym będziemy edytowali pliki CSS
3. Posiadać przeglądarkę internetową.
Wymienione powyżej podstawowe wymagania chciałbym jednak rozbudować o kilka programów i praktyk, które znacznie ułatwią nam tworzenie skórki moodle, które generalnie sprowadzi się do edycji plików css.
Proponowany pakiet to :
1. Przeglądarka internetowa Firefox, którą w polskiej wersji językowej można pobrać tutaj, którą wyposażymy w kilka ciekawych rozszerzeń, które znacznie ułatwią nam życie, a będą to :
1.1. ColorZilla, która pozwoli nam na dobieranie i definiowanie kolorów podczas edycji CSS-a
1.2. WebDeveloperToolbar, dzięki któremu będziemy mogli edytować CSS-a „na żywca” obserwując w czasie rzeczywistym zachodzące zmiany.
2. Edytor tekstu z kolorowaniem składni CSS-a (PSPad)
3. Moodle
Na rysunku 1 widać jak powinna wyglądać przeglądarka z zainstalowanymi rozszerzeniami. W tej chwili nie radziłbym skupiać się na przeglądaniu wszystkich dostępnych opcji obydwu narzędzi, gdyż wymagane funkcje zostaną omówione później. Zakładam również, że posiadasz podstawową wiedzę na temat kaskadowych arkuszy stylów, struktury plików w moodle oraz, że posiadasz zainstalowaną platformę moodle.
Od czego zacząć
Po pierwsze należałoby zalogować się do platformy moodle i zobaczyć jakie są aktualnie dostępne kompozycje, jak je włączać i wyłączać i jak się one zachowują.
W tym celu w menu „Administracja serwisu” wybieramy:
Wygląd > Tematy > Wybór kompozycji
W tym momencie możemy się przełączać pomiędzy różnymi gotowymi kompozycjami. Dla nas jednak najbardziej interesująca jest kompozycja o nazwie standard, gdyż na niej będziemy bazować tworząc naszą własną kompozycję.
Ponieważ będziemy bazować na standardowej kompozycji włączmy ją
Pierwszy kontakt z CSS-em
W celu sprawdzenia jakie pliki css podpięte są do konkretnej strony moodle możemy sprawdzić źródło strony używając skrótu Ctrl+U (w Firefox), lub używając dodatku WebDeveloperToolbar i włączając tryb edycji plików CSS (Ctrl+Shift+E) .
W obydwu przypadkach widzimy odwołanie do pliku :
/theme/standard/styles.php
odpowiadającego kompozycji (Standard), którą wybraliśmy w panelu administracyjnym.
Zasoby dodatkowe
1.Kaskadowe arkusze stylów
2. Kurs CSS
W następnej części:
– Edycja istniejącej kompozycji
– Tworzenie nowej kompozycji
– Zmiana czcionek, logo i kolorów
oraz wiele więcej
Urodziłem się w małym mieście na Podkarpaciu, tam po raz pierwszy zmuszono mnie tego, żeby zdobyć formalne wykształcenie, chociaż wolałem social learning, zbieranie puszek po napojach i przesiadywanie godzinami przed komputerem w poszukiwaniu szybszej metody na wczytanie gry z kasety do swojego Commodore 64.