Tworzenie pierwszego kompletnego motywu Moodle

więc pęknijmy…

Tworzenie nowego motywu

znalezienie motywu podstawowego do utworzenia motywu Moodle jest pierwszą rzeczą, którą musisz zrobić.Istnieją jednak różne sposoby, aby to zrobić; możesz zrobić kopię standardowego motywu i zmienić jego nazwę tak, jak w części tego artykułu, lub możesz użyć motywu nadrzędnego, który jest również oparty na standardowym motywie.

ważne jest to, że standardowy motyw dołączony do Moodle jest podstawą procesu tworzenia motywów Moodle. Każdy inny motyw Moodle powinien być oparty na tym motywie i zwykle opisywałby różnice w stosunku do standardowego motywu. Chociaż ta metoda działa i jest prostym sposobem na rozpoczęcie pracy z tematyką Moodle, powoduje problemy, ponieważ nowe funkcje mogą zostać dodane do Moodle, co może spowodować nieprawidłowe wyświetlanie lub działanie motywu. Standardowy motyw będzie zawsze aktualizowany przed wprowadzeniem nowej wersji Moodle. Jeśli więc zdecydujesz się zrobić kopię standardowego motywu i zmienić jego style, najlepiej będzie upewnić się, że używasz również motywu nadrzędnego. W ten sposób motyw nadrzędny będzie twoim motywem bazowym wraz ze zmianami wprowadzonymi do kopii motywu standardowego.

istnieje jednak inny sposób tworzenia pierwszego motywu, a mianowicie utworzenie kopii motywu, który jest bardzo zbliżony do standardowego motywu, takiego jak standardwhite, i użycie go jako motywu. Moodle użyje motywu standardowego jako motywu podstawowego i zastosuje wszelkie zmiany wprowadzone do motywu standardwhite na górze (rodzic). Wszystko, co robimy, to opisanie różnic między standardem a standardembiałe motywy. Jest to lepsze, ponieważ programiści Moodle czasami wprowadzają zmiany w standardowym motywie, aby być na bieżąco z nowymi funkcjami Moodle. Oznacza to, że przy każdej aktualizacji Moodle, twój standardowy motyw, folder będzie aktualizowany automatycznie, unikając w ten sposób nieprzyjemnych problemów z wyświetlaniem spowodowanych przez aktualizacje Moodle.

sposób konfigurowania motywów Moodle zależy wyłącznie od Ciebie. Jeśli widzisz motyw, który jest prawie tym, czego chcesz i nie ma zbyt wielu potrzebnych zmian, użycie motywu nadrzędnego ma sens, ponieważ większość potrzebnych stylów została już napisana. Jeśli jednak chcesz stworzyć motyw, który jest zupełnie inny od każdego innego motywu lub chcesz naprawdę wejść w tematykę Moodle, najlepiej byłoby użyć kopii jednego ze standardowych arkuszy.

więc przejdźmy do tego i zobaczmy, jakie są różnice przy użyciu różnych ustawień motywów i zobaczmy, jaki wpływ te różne metody mają na proces tworzenia motywów.

• przejdź do folderu motywów w C:Program FilesApache Software FoundationApache 2.2 htdocstheme.
• skopiuj standardowy motyw, klikając prawym przyciskiem myszy folder motywu i wybierając Kopiuj.
• wklej skopiowany motyw do katalogu motywu (tego samego katalogu, w którym aktualnie się znajdujesz).
• Zmień nazwę kopii folderu standard na blackandblue lub dowolną inną nazwę, którą chcesz wybrać (pamiętaj, aby nie używać wielkich i spacji).
• Otwórz witrynę Moodle i przejdź do strony Administracja Wygląd | Motywy | Selektor motywów| i wybierz motyw blackandblue, który właśnie utworzyłeś.

być może zauważyłeś, że motyw pokazany na poprzednim zrzucie ekranu ma nagłówek z motywem czarno-niebieskim. Dzieje się tak dlatego, że dodałem to do pełnej nazwy witryny na stronie ustawień strony głównej.

czas na działanie-ustawienie motywu nadrzędnego

1. Otwórz przeglądarkę internetową i przejdź do witryny Moodle i zaloguj się jako administrator.
2. przejdź do menu Administracja | Wygląd | Motywy | Selektor motywów i wybierz motyw blackandblue, jeśli nie został jeszcze wybrany.
3. przejdź do katalogu głównego folderu blackandblue, kliknij prawym przyciskiem myszy konfigurację.plik php i wybierz Otwórz za pomocą | WordPad.

4. musisz wprowadzić cztery zmiany w tym pliku, aby móc używać tego motywu i motywu nadrzędnego, jednocześnie upewniając się, że nadal używasz domyślnego motywu standardowego jako bazy. Oto zmiany:

   $THEME->sheets = array('user_styles');
   $THEME->standardsheets = true;
   $THEME->parentsheets = 'autumn';
   $THEME->parentsheets = array('styles');

   przyjrzyjmy się każdemu z nich z kolei Oświadczenia.

   $THEME- >sheets = array('user_styles');

   zawiera nazwy wszystkich plików arkusza stylów, które chcesz dołączyć do motywu blackandblue, a mianowicie user_styles.

   $THEME->standardsheets = true;

   ten parametr jest używany do dołączania arkuszy stylów standardowego motywu. Jeśli jest ustawiony na True, użyje wszystkich arkuszy stylów w standardowym motywie. Alternatywnie, może być ustawiony jako tablica w celu załadowania poszczególnych arkuszy stylów w dowolnej kolejności. Ustawiliśmy to na True, więc użyjemy wszystkich arkuszy stylów standardowego motywu.

    $THEME - > parent = 'autumn';

   zmienna ta może być ustawiona tak, aby używała motywu jako motywu nadrzędnego, który jest dołączany przed bieżącym motywem. Ułatwi to wprowadzanie zmian do innego motywu bez konieczności zmiany rzeczywistych plików.

   $THEME-> parentsheets = array('style'); 

   ta zmienna może być użyta do wybrania wszystkich arkuszy stylów motywu nadrzędnego lub pojedynczych plików. Został on ustawiony, aby uwzględnić style.plik css z motywu nadrzędnego, czyli jesień. Ponieważ motyw jesienny zawiera tylko jeden arkusz stylów, możesz ustawić tę zmienną na True. Tak czy inaczej, będziesz miał ten sam wynik.

5. Zapisz themeblackandblueconfig.php i odświeżyć okno przeglądarki internetowej. Powinieneś zobaczyć coś podobnego do poniższego zrzutu ekranu. Pamiętaj, że Twoje bloki mogą się różnić od poniższych, ale możesz to zignorować.

co się właśnie stało?

Ok, więc teraz masz kopię standardowego motywu, który używa motywu jesiennego (autorstwa Patricka Malleya) jako swojego rodzica. Być może zauważyłeś, że nagłówek nie jest poprawny i że nie wyświetla się właściwy nagłówek motywu jesiennego. Cóż, dzieje się tak dlatego, że zasadniczo używasz kopii standardowego motywu i że nagłówek z tego motywu jest Tym, który widzisz powyżej. Tylko pliki CSS są zawarte w tej hierarchii, więc wszelkie zmiany HTML nie będą widoczne, dopóki nie zmodyfikujesz nagłówka standardowego motywu.plik html.

masz bohatera – wybierz inny motyw rodzica

wróć i przejrzyj niektóre motywy na Moodle.org i pobierz jeden, który Ci się podoba. Dodaj ten motyw jako motyw nadrzędny do konfiguracji motywu blackandblue.plik php, ale tym razem wybierz arkusze stylów, których chcesz użyć z tego motywu. Temat powrót do szkoły jest dobry do tego ćwiczenia, ponieważ jego arkusze stylów są wyraźnie oznaczone. Więc

kopiując pliki nagłówka i stopki

aby pokazać, że używasz plików CSS motywu jesiennego i plików HTML motywu standardowego, możesz po prostu skopiować nagłówek.html i stopka.pliki html z motywu jesiennego Patricka Malleya i wklej je do folderu motywu blackandblue. Nie martw się o nadpisanie plików nagłówka i stopki, ponieważ zawsze możesz je ponownie skopiować ze standardowego folderu motywu AC tual.

czas na akcję-kopiowanie nagłówka.html i stopka.pliki html

1. przejrzyj do folderu motywu jesiennego i podświetl oba nagłówki.html i stopka.pliki html, przytrzymując klawisz Ctrl i klikając na nich oba. Kliknij prawym przyciskiem myszy wybrane pliki i wybierz Kopiuj.
2. przejdź do folderu motywu blackandblue, kliknij prawym przyciskiem myszy i wybierz Wklej.
3. wróć do okna przeglądarki i naciśnij przycisk F5, aby odświeżyć stronę. Teraz zobaczysz pełny motyw jesieni.

co się właśnie stało?

skopiowałeś nagłówek motywu jesiennego.html i stopka.pliki html do motywu blackandblue, dzięki czemu można zobaczyć pełny motyw jesieni działa. Prawdopodobnie nie użyjesz nagłówka.html i stopka.pliki html, które właśnie skopiowałeś, ponieważ był to tylko przykład tego, jak działa proces tworzenia motywów Moodle.

więc masz teraz niezmodyfikowaną kopię standardowego motywu o nazwie blackandblue, który używa motywu jesiennego jako motywu nadrzędnego. Wszystko, co musisz teraz zrobić, aby wprowadzić zmiany w tym motywie, to edytować plik CSS w folderze motywów blackandblue.

folder tematyczny prace domowe

jednak istnieje kilka rzeczy, które musisz zrobić najpierw, ponieważ masz dokładną kopię standardowego motywu oprócz nagłówka.html i stopka.pliki html. Ten skopiowany folder zawiera pliki, których nie potrzebujesz, ponieważ jedynym plikiem, który ustawiłeś dla swojego motywu, był styl użytkownika.plik css w konfiguracji.plik PHP wcześniej. To była pierwsza zmiana, którą wprowadziłeś:

 $THEME - > sheets = array('user_styles');

user_style.plik css nie istnieje w folderze motywu blackandblue, więc musisz go utworzyć. Będziesz również musiał usunąć wszystkie inne pliki CSS, które są obecne, ponieważ nowy motyw blackandblue będzie używał tylko jednego arkusza stylów, a mianowicie stylów użytkownika.plik css, który będziesz tworzyć w następujących sekcjach.

czas na działanie-tworzenie naszego arkusza stylów

1. kliknij prawym przyciskiem myszy gdziekolwiek w folderze blackandblue i wybierz nowy dokument tekstowy|.
2. Zmień nazwę tego dokumentu tekstowego na user_styles.css klikając ponownie prawym przyciskiem myszy i wybierając Zmień nazwę.

czas na działanie-usuwanie plików CSS, których nie potrzebujemy

1. usuń następujące pliki CSS, zaznaczając je, a następnie klikając prawym przyciskiem myszy wybrane pliki i wybierając Usuń.
   • styles_color.css
   • styles_ie6.css
   • styles_ie6.css
   • styles_ie7.css
   • styles_layout.css
   • styles_moz.css

   {Informacje ogólne: #000000;}

   

co się stało?

w dwóch ostatnich zadaniach utworzyłeś pusty plik CSS o nazwie user_style.css w folderze motywu blackandblue. Następnie usunąłeś wszystkie pliki CSS w folderze motywu blackandblue, ponieważ nie będziesz ich już potrzebował. Pamiętaj, że są to tylko kopie plików CSS w standardowym folderze motywu i ustawiłeś motyw, aby używał standardowego motywu jako podstawy w konfiguracji motywu blackandblue.plik php.

zróbmy kilka zmian

teraz skonfigurowałeś swój motyw tak, jak chcesz, to znaczy używasz własnego motywu blackandblue, używając standardowego motywu jako bazy i motywu jesiennego jako rodzica. Przejdź dalej i wprowadź kilka zmian w swoim user_style.plik css, abyś mógł zobaczyć, jaki to ma wpływ na Twój motyw i sprawdzić, czy cała Twoja konfiguracja.ustawienia pliku php są poprawne. Pamiętaj, że wszystkie obecne style są odziedziczone po jesiennym motywie.

czas na działanie-sprawdzając naszą konfigurację

1. otwórz swoją stronę Moodle z aktualnym motywem (który powinien być blackandblue, ale wygląda jak motyw jesienny).
2. przejdź do folderu motywu blackandblue, kliknij prawym przyciskiem myszy styl użytkownika.plik css i wybierz Otwórz. Ten plik powinien być całkowicie pusty.

3. wpisz następujący wiersz CSS dla elementu body, a następnie zapisz plik:

   body {
   background: #000000;
   }

   

4. teraz odśwież okno przeglądarki. Zobaczysz, że tło jest teraz czarne.

   

Uwaga: Podczas używania Firebug do identyfikacji używanych stylów, nie zawsze może być oczywiste, gdzie one są lub który styl kontroluje ten element strony. Przykładem tego jest kod body {background: #000000;}, który właśnie wkleiliśmy w nasz styl użytkownika.plik css. Gdybyśmy użyli Firebug do określenia tego stylu, nie znaleźlibyśmy go. Zamiast tego rzuciłem okiem na plik CSS z motywu jesień. Próbuję tu powiedzieć, że zawsze będzie element grzebania i prób i błędów.

co się właśnie stało?

wszystko wydaje się w porządku, prawda? Dodałeś jedną deklarację stylu do pustego user_style.plik css, aby zmienić kolor tła, i sprawdzili zmiany w przeglądarce. Teraz wiesz, jak działają motywy nadrzędne i wiesz, że wystarczy skopiować Style Z Firebug do swojego user_style.plik css i edytować deklaracje stylów, które należy zmienić.