uw eerste complete Moodle-thema aanmaken

dus laten we verder gaan…

een nieuw thema aanmaken

een basisthema vinden om uw Moodle-thema op aan te maken is het eerste wat u moet doen.Er zijn echter verschillende manieren om dit te doen; u kunt een kopie maken van het standaardthema en het hernoemen zoals u deed in een deel van dit artikel, of u kunt een ouderthema gebruiken dat ook is gebaseerd op het standaardthema.

het belangrijke punt is dat het standaardthema dat bij Moodle hoort de hoeksteen is van het Moodle-themaproces. Elk ander Moodle-thema moet gebaseerd zijn op dit thema en zou normaal gesproken de verschillen met het standaardthema beschrijven. Hoewel deze methode werkt en een eenvoudige manier is om aan de slag te gaan met Moodle-thema ‘ s, veroorzaakt het problemen omdat nieuwe functies aan Moodle kunnen worden toegevoegd die ervoor kunnen zorgen dat uw thema onjuist wordt weergegeven of functioneert. Het standaardthema zal altijd worden bijgewerkt voordat een nieuwe versie van Moodle wordt gelanceerd. Dus als je ervoor kiest om een kopie van de standaard thema te maken en de stijlen te veranderen, zou het het beste zijn om ervoor te zorgen dat u een ouder thema ook gebruiken. Op deze manier, de ouder thema zal uw basis thema samen met de wijzigingen die u aan uw exemplaar van de standaard thema.

er is echter een andere manier om uw eerste thema te maken, en dat is om een kopie te maken van een thema dat heel dicht bij het standaardthema ligt, zoals standaardwhite, en dit als uw thema te gebruiken. Moodle gebruikt dan het standaardthema als basisthema en past alle wijzigingen toe die u aanbrengt in het standaardwitthema bovenaan (ouder). Het enige wat we doen is het beschrijven van de verschillen tussen de standaard en de standaard wit thema ‘ s. Dit is beter omdat Moodle-ontwikkelaars soms wijzigingen aanbrengen in het standaardthema om up-to-date te zijn met nieuwe Moodle-functies. Dit betekent dat bij elke Moodle-update uw standaardthema-map automatisch wordt bijgewerkt, waardoor vervelende weergaveproblemen worden vermeden die worden veroorzaakt door Moodle-updates.

de manier waarop u Moodle-thema ‘ s configureert is geheel aan u. Als u een thema dat is bijna wat je wilt en er zijn niet echt veel veranderingen nodig, dan is het gebruik van een ouder thema zinvol, als de meeste van de stijlen die u nodig hebt zijn al geschreven. Als u echter een thema wilt maken dat volledig verschilt van elk ander thema of echt in Moodle-thema wilt komen, dan is het het beste om een kopie van een van de standaardbladen te gebruiken.

dus laten we verder gaan en zien wat de verschillen zijn bij het gebruik van verschillende thema setups, en zien welk effect deze verschillende methoden hebben op het thema proces.

• blader naar uw themamap in C: programma FilesApache software FoundationApache 2.2 htdocstheme.
• kopieer het standaard thema door met de rechtermuisknop op de map van het thema te klikken en te kopiëren.
• plak het gekopieerde thema in de themamap (dezelfde map waarin u zich momenteel bevindt).
• hernoem de kopie van de standaardmap naar blackandblue of een andere naam die u wilt kiezen (vergeet geen hoofdletters of spaties te gebruiken).
• Open uw Moodle site en navigeer naar Site Administration Appearance / Themes / Theme Selector|, en kies het blackandblue thema dat u zojuist hebt aangemaakt.

u hebt misschien gemerkt dat het thema in de vorige schermafbeelding een header heeft met zwart en blauw thema. Dit komt omdat ik dit heb toegevoegd aan de volledige naam van de site in de voorpagina instellingen pagina.

tijd voor actie-een hoofdthema instellen

1. Open uw webbrowser en navigeer naar uw Moodle-site en log in als beheerder.
2. Ga naar Site Administration / Appearance / Themes / Theme Selector en kies uw blackandblue thema als het nog niet is geselecteerd.
3. blader naar de root van uw blackandblue map, klik met de rechtermuisknop op de configuratie.php-bestand, en kies Openen met / WordPad.

4. u dient vier wijzigingen aan te brengen in dit bestand, zodat u dit thema en een bovenliggende thema kunt gebruiken terwijl u ervoor zorgt dat u nog steeds het standaard standaardthema als basis gebruikt. Hier zijn de wijzigingen:

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

   laten we op hun beurt elk van deze statements bekijken.

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

   dit bevat de namen van alle stylesheet-bestanden die u wilt opnemen voor uw blackandblue-thema, namelijk user_styles.

   $THEME - >standardsheets = true;

   deze parameter wordt gebruikt om de stylesheets van het standaardthema op te nemen. Als het is ingesteld op True, zal het gebruik van alle stylesheets in de standaard thema. Als alternatief kan het worden ingesteld als een array om individuele stylesheets in elke gewenste volgorde te laden. We hebben dit op True gezet, dus we zullen alle stylesheets van het standaardthema gebruiken.

    $ THEME- >parent = 'autumn';

   deze variabele kan worden ingesteld om een thema te gebruiken als het bovenliggende thema, dat Voor het huidige thema is opgenomen. Dit zal het gemakkelijker maken om wijzigingen aan te brengen aan een ander thema zonder dat de werkelijke bestanden te veranderen.

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

   deze variabele kan worden gebruikt om alle stijlbladen van het bovenliggende thema of individuele bestanden te kiezen. Het is ingesteld om de stijlen bevatten.css-bestand van het bovenliggende thema, namelijk herfst. Omdat er slechts één stylesheet in het herfstthema is, kunt u deze variabele op True instellen. Hoe dan ook, je zult hetzelfde resultaat hebben.

5. sla het zwart-en blauwconfig op.php, en vernieuw uw webbrowser venster. U moet iets dergelijks zien als de volgende screenshot. Merk op dat uw blokken kunnen verschillen van de onderstaande, maar u kunt negeren.

Wat is er zojuist gebeurd?

Oké, dus nu heb je een kopie van het standaard thema dat het herfstthema (door Patrick Malley) als ouder gebruikt. Je zou kunnen hebben gemerkt dat de header is niet correct en dat de juiste herfst thema header niet wordt weergegeven. Goed, dit komt omdat je in wezen met behulp van de kopie van de standaard thema en dat de koptekst van dit thema is degene die je hierboven ziet. Het zijn alleen de CSS-bestanden die in deze hiërarchie zijn opgenomen, dus alle HTML-wijzigingen zullen niet worden gezien totdat u de koptekst van uw standaardthema bewerkt.html-bestand.

Go hero-kies een ander hoofdthema

Ga terug en Bekijk enkele van de thema ‘ s op Moodle.org en download er een die je leuk vindt. Voeg dit thema als een ouder thema om uw blackandblue thema config.php-bestand, maar deze keer kiezen welke stylesheets u wilt gebruiken van dat thema. Het thema terug naar School is een goed thema voor deze oefening, omdat de stylesheets duidelijk zijn gelabeld. Dus u

kopieert de kop-en voettekstbestanden

om aan te tonen dat u de CSS-bestanden van het herfstthema en de HTML-bestanden van het standaardthema gebruikt, kunt u gewoon de koptekst kopiëren.html en voettekst.html-bestanden van Patrick Malley ’s herfst thema en plak ze in de map van uw blackandblue thema’ s. Maak je geen zorgen over het overschrijven van uw kop-en voettekst bestanden, zoals je kunt altijd gewoon kopiëren ze weer uit de ac tual standaard thema map.

tijd voor actie-kopiëren van de header.html en voettekst.html-bestanden

1. blader naar de map van het herfstthema en markeer beide Headers.html en voettekst.html-bestanden door de Ctrl-toets ingedrukt te houden en op beide te klikken. Klik met de rechtermuisknop op de geselecteerde bestanden en kies Kopiëren.
2. blader naar de map van uw blackandblue thema en klik met de rechtermuisknop en kies Plakken.
3. Ga terug naar uw browservenster en druk op de knop F5 om de pagina te verversen. U ziet nu het volledige herfstthema.

Wat is er zojuist gebeurd?

u hebt de header van het herfstthema gekopieerd.html en voettekst.html-bestanden in uw blackandblue thema, zodat u kunt zien de volledige herfst thema werken. U zult waarschijnlijk niet echt gebruik maken van de header.html en voettekst.html-bestanden die je net gekopieerd, want dit was slechts een voorbeeld van hoe de Moodle theming proces werkt.

u hebt dus nu een ongewijzigde kopie van het standaardthema blackandblue, dat het herfstthema als ouderthema gebruikt. Het enige wat u nu hoeft te doen om wijzigingen aan te brengen in dit thema is om uw CSS-bestand te bewerken in de map blackandblue thema.

themamap huishoudelijk werk

er zijn echter een paar dingen die u eerst moet doen, omdat u een exacte kopie van het standaardthema heeft, afgezien van de header.html en voettekst.html-bestanden. Deze gekopieerde map heeft bestanden die u niet nodig hebt, als het enige bestand dat u voor uw thema te gebruiken was de user_styles.css-bestand in de configuratie.php-bestand eerder. Dit was de eerste wijziging die u maakte:

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

de user_style.css-bestand bestaat niet in de map van uw blackandblue thema ‘ s, dus je nodig hebt om het te maken. U moet ook andere CSS-bestanden die aanwezig zijn verwijderen, als uw nieuwe blackandblue thema zal slechts één stylesheet gebruiken, namelijk de user_styles.css-bestand dat u zal maken in de volgende secties.

tijd voor actie-maken van ons stylesheet

1. Klik met de rechtermuisknop ergens in uw blackandblue map en kies nieuw tekstdocument|.
2. hernoem dit tekstdocument naar user_styles.css door nogmaals met de rechtermuisknop te klikken en hernoemen te kiezen.

tijd voor actie-verwijderen van CSS-bestanden die we niet nodig hebben

1. verwijder de volgende CSS-bestanden door ze te selecteren en vervolgens met de rechtermuisknop op de geselecteerde bestanden te klikken en te kiezen voor verwijderen.
   • styles_color.css
   • styles_ie6.css
   • styles_ie6.css
   • styles_ie7.css
   • styles_layout.css
   • styles_moz.css

   {achtergrond: #000000;}

   

Wat is er net gebeurd?

in de laatste twee taken hebt u een leeg CSS-bestand aangemaakt met de naam user_style.css in de map van uw blackandblue thema. Vervolgens verwijderde u alle CSS-bestanden in de map van uw blackandblue thema ‘ s, als je ze niet meer nodig hebt. Vergeet niet, dit zijn slechts kopieën van de CSS-bestanden in de standaard thema map en u hebt uw thema ingesteld om het standaard thema te gebruiken als basis in de blackandblue thema ‘ s config.php bestand.

laten we wat wijzigingen aanbrengen

nu hebt u uw thema ingesteld zoals u het wilt, dat wil zeggen, u gebruikt uw eigen blackandblue thema door het standaardthema als basis te gebruiken en het herfstthema als ouder. Ga verder en maak een paar wijzigingen in je user_style.css-bestand, zodat u kunt zien welk effect dit heeft op uw thema, en controleer dat al uw config.de instellingen van het php-bestand zijn correct. Vergeet niet dat alle van de huidige stijlen worden geërfd van de herfst thema.

tijd voor actie-controleren van onze Instellingen

1. Open uw Moodle-site met het huidige thema (dat Zwart en blauw zou moeten zijn, maar lijkt op het herfstthema).
2. Navigeer naar de map van uw blackandblue thema, Klik met de rechtermuisknop op de user_style.css-bestand, en kies Openen. Dit bestand moet helemaal leeg zijn.

3. Typ de volgende regel van CSS Voor het body-element en sla vervolgens de fi le op:

   body {
   achtergrond: # 000000;
   }

   

4. vernieuw nu uw browservenster. Je zult zien dat de achtergrond nu zwart is.

   

Opmerking: Wanneer Firebug wordt gebruikt om stijlen te identificeren die worden gebruikt, is het misschien niet altijd duidelijk waar ze zijn of welke stijl dat element van de pagina controleert. Een voorbeeld hiervan is de body {background: #000000;}code die we net geplakt hebben in onze user_style.css-bestand. Als we Firebug hadden gebruikt om die stijl te identificeren, hadden we het niet gevonden. In plaats daarvan, Ik nam een kijkje op de CSS-bestand van de herfst thema. Wat ik hier probeer te zeggen is dat er altijd een element van rondneuzen en vallen en opstaan zal zijn.

Wat is er zojuist gebeurd?

alles lijkt in orde daar, nietwaar? U hebt een stijl declaratie toegevoegd aan uw lege user_style.css-bestand om de achtergrondkleur te wijzigen, en hebben de wijzigingen in uw browser gecontroleerd. Je weet nu hoe de bovenliggende thema ‘ s werken en weet dat je alleen de stijlen van Firebug naar je user_style hoeft te kopiëren.CSS-bestand en bewerken van de stijl declaraties die moeten worden gewijzigd.