Jak zmienić wygląd Moodle – cz. 2

W poprzedniej części opisywałem w jaki sposób przygotować się do zmieniania wyglądu platformy moodle, co musimy umieć i jakie oprogramowanie posiadać. W tej części skupimy się na tym w jaki sposób skórka jest zorganizowana i jak „dobrać się” do jej poszczególnych elementów.

Pierwszą czynnością jest wybranie kompozycji (skórki), która będzie podstawą do dalszych prac. Pomimo tego, że w internecie jest mnóstwo różnych kompozycji, które można pobrać bez ponoszenia opłat sugeruję rozpocząć od najprostszej – dostarczanej z każdą instalacją moodle.

Identyfikacja elementów
Kompozycja ta pozwoli zapoznać się z podstawowymi elementami strukturalnymi kompozycji moodle. Wróćmy więc do strony głównej i zobaczmy jak wygląda, z czego się składa i dlaczego wygląda akurat w ten sposób.
Korzystając z Firefoxa i webdeveloper toolbar wybieramy z menu górnego Information > Display Element Information , albo szybciej wsiskamy Ctrl + Shift + F. Na ekranie pojawi się żółte pływające okienko i dodatkowy pasek nawigacyjny. Klikając teraz na poszczególne elementy strony będziemy widzieli jakie elementy strukturalne (XHTML-a) klasy i identyfikatory im odpowiadają.

Domyślna struktura
Struktura wszystkich kompozycji jest dość prosta, opiera się o warstwy i przypisane do nich identyfikatory.
Głównym elementem jest warstwa o id : #page, w obrębie której znajdziemy:
#header-home – zwierający wszystkie elementy nagłówka
#content – w którym pojawia się cała treść, 3 kolumny(#left-column, #middle-column, #right-column) dodatkowo zawinięte w div o id: #layout-table,
#footer odpowiedzialny za stopkę

Drugim sposobem na zlokalizowanie elementów jest wyświetlenie wszystkich identyfikatorów i klas powiązanych z elementami strukturalnymi, nie mniej jednak nie polecam tej opcji z jednej prostej przyczyny, powoduje ona „rozjechanie się” layoutu. [zobacz klasy i id-ki].

Niezależność wyglądu od danych
Wiesz już w jaki sposób rozpoznawać poszczególne elementy strukturalne wyglądu moodle. W tej chwili zastanówmy się nad tym dlaczego dzieje się akurat tak, że pojawia się mnóstwo identyfikatorów, klas i elementów.
Przyczyną tego jest założenie, że treść publikowana w internecie powinna być niezależna od sposobu jej prezentacji z wielu przyczyn o których pisało już wielu [1 , 2, 3, 4].
Realizowane jest to tak, że kod odpowiedzialny za wyświetlanie treści jest niezależny od warstwy prezentacji (czyli CSS-ów), a dopiero kaskadowe arkusze stylów wpływają bezpośrednio na wygląd.
Czy tak jest rzeczywiście? Otóż tak, zmieniając wygląd moodle poprzez wybieranie kompozycji nijak nie wpływamy na opublikowane treści. Żeby sprawdzić, czy tak faktycznie jest po raz kolejny użyjemy narzędzi webdeveloper toolbar, tym razem z menu CSS > Disable Styles > All Styles, lub szybciej wciskając Ctrl + Shift + S. W tej sposób wyłączamy i włączamy CSS-y.

W tym momencie polecam na chwilkę zostawić moodle i w nowej zakładce otworzyć sobie kilka stron (szczególnie polecam te z cssmania.com) i zobaczyć jak wyglądają z i bez CSS-ów.

W celu przygotowania się do następnej części polecam zaznajomić się dokładniej z XHTML-em i CSS-ami.

—
Wielkie podziękowania dla Romana, za możliwość powyżywania się na jego platformie.

—
Kiedy i jak będą pojawiały się kolejne części? Otóż dzisiaj zmotywował mnie komentarz

„Szkoda, że jeszcze nie ma następnej części.”

więc jeśli będzie popyt będzie i podaż 🙂