Opprette Din Første Komplette Moodle Theme

Så la oss knekke på…

Opprette et nytt tema

Finne en base tema for å lage Din Moodle tema på er det første du trenger å gjøre.Du kan lage en kopi av standardtemaet og endre navn på det som du gjorde i en del av denne artikkelen, eller du kan bruke et overordnet tema som også er basert på standardtemaet.

det viktige poenget her er at standardtemaet Som følger Med Moodle, er hjørnesteinen I Moodle theming-prosessen. Alle Andre Moodle tema bør være basert på dette temaet, og vil normalt beskrive forskjellene fra standard tema. Selv om denne metoden virker og er en enkel måte Å komme i gang Med Moodle theming, forårsaker det problemer da nye funksjoner kan bli lagt Til Moodle som kan føre til at temaet ditt vises eller fungerer feil. Standardtemaet vil alltid bli oppdatert før En Ny utgave Av Moodle lanseres. Så hvis du velger å lage en kopi av standardtemaet og endre stilene, ville det være best å sørge for at du også bruker et overordnet tema. På denne måten vil det overordnede temaet være ditt basetema sammen med endringene du gjør i din kopi av standardtemaet.

det Er imidlertid en annen måte å lage ditt første tema på, og det er å lage en kopi av et tema som er svært nær standardtemaet, for eksempel standardwhite, og bruk dette som tema. Moodle vil da bruke standardtemaet som grunntema og bruke eventuelle endringer du gjør i standardwhite-temaet øverst (overordnet). Alt vi gjør er å beskrive forskjellene mellom standard og standardhvite temaer. Dette er bedre fordi moodle-utviklere noen ganger vil gjøre endringer i standardtemaet for å være oppdatert med nye Moodle-funksjoner. Dette betyr at på Hver Moodle oppdatering, standard tema, mappen vil bli oppdatert automatisk, og dermed unngå eventuelle ekle visningsproblemer blir forårsaket Av Moodle oppdateringer.

Måten du konfigurerer Moodle-temaer på, er helt opp til deg. Hvis du ser et tema som er nesten det du vil ha, og det ikke er mange endringer som trengs, er det fornuftig å bruke et overordnet tema, da de fleste stilene du trenger allerede er skrevet. Men hvis du vil lage et tema som er helt forskjellig fra noe annet tema eller ønsker å virkelig komme Inn I Moodle theming, vil det være best å bruke en kopi av et av standardarkene.

så la oss gå videre og se hva forskjellene er når du bruker forskjellige temaoppsett, og se hvilken effekt disse forskjellige metodene har på temaprosessen.

• Bla til temamappen Din I C: Program FilesApache Software FoundationApache 2.2 htdocstheme.
• Kopier standardtemaet ved å høyreklikke på temaets mappe og velge Kopier.
• Lim inn det kopierte temaet i temakatalogen(samme katalog som du er i).
• Gi nytt navn til kopien av standardmappen til blackandblue eller et annet navn du ønsker å velge (husk å ikke bruke store bokstaver eller mellomrom).
• Åpne Moodle-nettstedet ditt og naviger Til Nettstedadministrasjonsutseende | Temaer / Temavelger|, og velg blackandblue-temaet du nettopp har opprettet.

du har kanskje lagt merke til at temaet som vises i forrige skjermbilde, har En overskrift som sier Svart Og Blått tema. Dette er fordi jeg har lagt dette Til Hele nettstedet navnet På forsiden innstillingssiden.

tid for handling-angi et overordnet tema

1. åpne nettleseren og naviger Til Moodle-siden din og logg inn som administrator.
2. Gå Til Site Administration / Appearance | Themes / Theme Selector og velg blackandblue tema hvis det ikke allerede er valgt.
3. Bla til roten til blackandblue-mappen, høyreklikk på config.php-fil, og velg Åpne med / WordPad.

4. du må gjøre fire endringer i denne filen slik at du kan bruke dette temaet og et overordnet tema samtidig som du sikrer at du fortsatt bruker standard standard tema som base. Her er endringene:

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

   La oss se på hver av disse uttalelsene, i sin tur.

   $TEMA->ark = array ('user_styles');

   dette inneholder navnene på alle stilarkfilene du vil inkludere i dette for blackandblue-temaet, nemlig user_styles.

    $THEME - > standardsheets = true; 

   denne parameteren brukes til å inkludere standardtemaets stilark. Hvis Den er satt Til True, vil den bruke alle stilarkene i standardtemaet. Alternativt kan det settes som en matrise for å laste individuelle stilark i hvilken rekkefølge er nødvendig. Vi har satt Dette Til Sant, så vi vil bruke alle stilarkene i standardtemaet.

   $TEMA-> foreldre = 'høst';

   denne variabelen kan settes til å bruke et tema som overordnet tema, som er inkludert før gjeldende tema. Dette vil gjøre det enklere å gjøre endringer i et annet tema uten å måtte endre de faktiske filene.

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

   denne variabelen kan brukes til å velge enten alle overordnede temaets stilark eller individuelle filer. Det har blitt satt til å inkludere stiler.css-fil fra overordnet tema, nemlig høst. Fordi Det bare er ett stilark I Høsttemaet, kan du sette denne variabelen Til True. Uansett vil du få samme resultat.

5. Lagre themeblackandblueconfig.php, og oppdater nettleservinduet. Du bør se noe som ligner på følgende skjermbilde. Merk at blokkene dine kan være forskjellige fra de nedenfor, men du kan ignorere dette.

Hva skjedde?

Ok, så nå har du en kopi av standardtemaet som bruker Høsttemaet (Av Patrick Malley) som forelder. Du har kanskje lagt merke til at overskriften ikke er riktig, og at riktig Høsttema header ikke vises. Vel, dette er fordi du i hovedsak bruker kopien av standardtemaet, og at overskriften fra dette temaet er den du ser ovenfor. DET er BARE CSS-filene som er inkludert i dette hierarkiet, så EVENTUELLE HTML-endringer vil ikke bli sett før du redigerer standardtemaets overskrift.html-fil.

Ha en go hero – velg et annet overordnet tema

Gå tilbake og se gjennom noen av temaene på Moodle.org og last ned en som du liker. Legg dette temaet som en overordnet tema til blackandblue tema config.php-fil, men denne gangen velger du hvilke stilark du vil bruke fra det temaet. Tilbake Til Skolen tema er en god en for denne øvelsen, som sin stilark er tydelig merket. Så du

Kopierer topp-og bunntekstfilene

for å vise at Du bruker HØSTTEMAETS CSS-filer og standardtemaets HTML-filer, kan du bare gå og kopiere overskriften.html og bunntekst.html-filer Fra Patrick Malley Høst tema og lime dem inn i din blackandblue tema mappe. Ikke bekymre deg for å overskrive topp-og bunntekstfiler, da du alltid kan kopiere dem igjen fra ac tual standard theme-mappen.

tid for handling-kopiering av overskriften.html og bunntekst.html-filer

1. Bla Til Høsttemaets mappe og marker begge toppteksten.html og bunntekst.html-filer ved å holde Nede Ctrl-tasten og klikke på dem begge. Høyreklikk på de valgte filene og velg Kopier.
2. Bla til mappen til blackandblue-temaet, høyreklikk Og velg Lim inn.
3. Gå tilbake til nettleservinduet og trykk På F5-knappen for å oppdatere siden. Du vil nå se Hele Høsttemaet.

Hva skjedde?

du har kopiert høsttemaets overskrift.html og bunntekst.html-filer i blackandblue tema, slik at du kan se hele høsten tema arbeider. Du vil sannsynligvis ikke faktisk bruke header.html og bunntekst.html-filer som du nettopp kopierte, da dette bare var et eksempel på Hvordan Moodle theming-prosessen fungerer.

så du har nå en umodifisert kopi av standardtemaet kalt blackandblue, som bruker høsttemaet som overordnet tema. Alt du trenger å gjøre nå for å gjøre endringer i dette temaet er å redigere CSS-filen i blackandblue theme-mappen.

Temamappe husarbeid

det Er imidlertid et par ting du må gjøre først, da du har en eksakt kopi av standardtemaet bortsett fra overskriften.html og bunntekst.html-filer. Denne kopierte mappen har filer som du ikke trenger, som den eneste filen du angir for temaet å bruke var user_styles.css-fil i config.php-fil tidligere. Dette var den første endringen du gjorde:

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

user_style.css-filen finnes ikke i blackandblue tema mappe, så du må opprette den. Du må også slette andre CSS-filer som er til stede, da ditt nye blackandblue-tema bare bruker ett stilark, nemlig user_styles.css-fil som du skal opprette i de følgende avsnittene.

tid for handling-lag vårt stilark

1. Høyreklikk hvor som helst i blackandblue-mappen og velg Nytt Tekstdokument|.
2. Gi Nytt navn til dette tekstdokumentet til user_styles.css ved å høyreklikke igjen og velge Gi Nytt Navn.

Tid for handling-slette CSS-filer som vi ikke trenger

1. Slett FØLGENDE CSS-filer ved å velge dem og deretter høyreklikke på de valgte filene og velge Slett.
   • styles_color.css
   • styles_ie6.css
   • styles_ie6.css
   • styles_ie7.css
   • styles_layout.css
   • styles_oz.css

   {bakgrunn: #000000;}

   

Hva skjedde?

i de to siste oppgavene opprettet du en tom CSS-fil kalt user_style.css i mappen blackandblue tema. Du deretter slettet ALLE CSS-filer i blackandblue tema mappe, som du ikke lenger trenger dem. Husk at disse er bare kopier AV CSS-filer i standard tema-mappen, og du har satt ditt tema å bruke standard tema som sin base i blackandblue tema config.php-fil.

La oss gjøre noen endringer

nå har du satt opp temaet slik du vil ha det, det vil si at du bruker ditt eget blackandblue-tema ved å bruke standardtemaet som base og Høsttemaet som forelder. Gå videre og gjøre noen endringer i din user_style.css-filen slik at du kan se hvilken effekt dette har pa temaet ditt, og sjekk at alle dine config.php-filens innstillinger er riktige. Husk at alle de nåværende stilene blir arvet Fra Høsttemaet.

tid for handling – sjekke oppsettet vårt

1. Åpne Moodle-siden din med det aktuelle temaet(som skal være svart og blått, men Ser Ut Som Høsttemaet).
2. Naviger til blackandblue-temaets mappe, høyreklikk på user_style.css-fil, og velg Åpne. Denne filen skal være helt tom.

3. Skriv INN FØLGENDE LINJE MED CSS for kroppselementet, og lagre deretter fi le:

    body {
   bakgrunn: #000000;
   }

   

4. nå oppdatere nettleservinduet. Du vil se at bakgrunnen nå er svart.

   

Merk: Når Du bruker Firebug til å identifisere stiler som brukes, kan det ikke alltid være åpenbart hvor de er eller hvilken stil som styrer det elementet på siden. Et eksempel på dette er kroppen {bakgrunn: #000000;} kode som vi bare limte inn i vår user_style.css-fil. Hvis Vi hadde brukt Firebug til å identifisere den stilen, ville vi ikke ha funnet den. I stedet tok jeg bare en titt PÅ CSS-filen fra høsttemaet. Det jeg prøver å si her er at det alltid vil være et element av poking rundt og prøving og feiling.

Hva skjedde?

alt virker fint der, ikke sant? Du har lagt til en stilerklæring til din tomme user_style.css-fil for å endre bakgrunnsfargen, og har sjekket endringene i nettleseren din. Du vet nå hvordan de overordnede temaene fungerer og vet at du bare trenger å kopiere stilene Fra Firebug til user_style.css fil og redigere stil erklæringer som må endres.