oprettelse af dit første komplette Moodle-tema

så lad os knække på…

oprettelse af et nyt tema

at finde et basistema til at oprette dit Moodle-tema på er den første ting, du skal gøre.Der er dog forskellige måder at gøre dette på; du kan lave en kopi af standardtemaet og omdøbe det som du gjorde i en del af denne artikel, eller du kan bruge et overordnet tema, der også er baseret på standardtemaet.

det vigtige punkt her er, at standardtemaet, der følger med Moodle, er hjørnestenen i Moodle-temaprocessen. Hvert andet Moodle-tema skal være baseret på dette tema og vil normalt beskrive forskellene fra standardtemaet. Selvom denne metode fungerer og er en enkel måde at komme i gang med Moodle-temaer, forårsager den problemer, da nye funktioner kan tilføjes til Moodle, der kan få dit tema til at vise eller fungere forkert. Standardtemaet opdateres altid, før en ny udgivelse af Moodle lanceres. Så hvis du vælger at lave en kopi af standardtemaet og ændre dets stilarter, ville det være bedst at sikre dig, at du også bruger et overordnet tema. På denne måde vil det overordnede tema være dit basistema sammen med de ændringer, du foretager i din kopi af standardtemaet.

der er dog en anden måde at oprette dit første tema på, og det er at oprette en kopi af et tema, der er meget tæt på standardtemaet, såsom standardhvid, og brug dette som dit tema. Moodle bruger derefter standardtemaet som basistema og anvender eventuelle ændringer, du foretager i standardhvidtemaet øverst (overordnet). Alt, hvad vi gør, er at beskrive forskellene mellem standard og standardhvide temaer. Dette er bedre, fordi Moodle-udviklere undertiden foretager ændringer i standardtemaet for at være opdaterede med nye Moodle-funktioner. Det betyder, at på hver Moodle opdatering, din standard tema, mappe vil blive opdateret automatisk, og dermed undgå eventuelle grimme display problemer bliver forårsaget af Moodle opdateringer.

den måde, hvorpå du konfigurerer Moodle-temaer, er helt op til dig. Hvis du ser et tema, der er næsten det, du ønsker, og der ikke rigtig er behov for mange ændringer, er det fornuftigt at bruge et overordnet tema, da de fleste af de stilarter, du har brug for, allerede er skrevet. Men hvis du vil oprette et tema, der er helt anderledes end ethvert andet tema eller virkelig ønsker at komme ind i Moodle-temaet, ville det være bedst at bruge en kopi af et af standardarkene.

så lad os komme videre og se, hvad forskellene er, når du bruger forskellige temaopsætninger, og se, hvilken effekt disse forskellige metoder har på temaprocessen.

• gå til din temamappe i C:Program FilesApache program FoundationApache 2.2 htdocstheme.
• Kopier standardtemaet ved at højreklikke på temaets mappe og vælge Kopi.
• indsæt det kopierede tema i temamappen (det samme bibliotek, som du er i øjeblikket).
• Omdøb kopien af standardmappen til blackandblue eller ethvert andet navn, du ønsker at vælge (husk ikke at bruge store bogstaver eller mellemrum).
• Åbn dit Moodle-sted, og naviger til Site Administration Udseende | Temaer | Temavælger|, og vælg det blackandblue-tema, du lige har oprettet.

du har måske bemærket, at temaet vist i det foregående skærmbillede har en overskrift, der siger sort og blåt tema. Dette skyldes, at jeg har tilføjet dette til det fulde sidenavn på forsiden indstillinger side.

tid til handling – indstilling af et overordnet tema

1. åbn din hjemmeside og naviger til dit Moodle-sted og log ind som administrator.
2. gå til Site Administration | Udseende | Temaer | Temavælger og vælg dit blackandblue tema, hvis det ikke allerede er valgt.
3. gå til roden af din blackandblue mappe, højreklik på config.php-fil, og vælg Åbn med.

4. du skal foretage fire ændringer i denne fil, så du kan bruge dette tema og et overordnet tema, mens du sikrer, at du stadig bruger standardstandardtemaet som din base. Her er ændringerne:

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

   lad os se på hver af disse udsagn, til gengæld.

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

   dette indeholder navnene på alle de stilarkfiler, du vil medtage i dette til dit blackandblue-tema, nemlig user_styles.

   $THEME-> standardsheets = true;

   denne parameter bruges til at inkludere standardtemaets stilark. Hvis den er indstillet til sand, vil den bruge alle stilarkene i standardtemaet. Alternativt kan det indstilles som et array for at indlæse individuelle stilark i hvilken rækkefølge der kræves. Vi har indstillet dette til sandt, så vi bruger alle stilarkene i standardtemaet.

   $THEME-> parent = 'efterår';

   denne variabel kan indstilles til at bruge et tema som overordnet tema, som er inkluderet før det aktuelle tema. Dette gør det lettere at foretage ændringer i et andet tema uden at skulle ændre de faktiske filer.

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

   denne variabel kan bruges til at vælge enten alle overordnede temas stylesheets eller individuelle filer. Det er indstillet til at omfatte stilarter.css-fil fra overordnet tema, nemlig efterår. Da der kun er et stilark i efterårstemaet, kan du indstille denne variabel til sand. På den ene eller anden måde, du får det samme resultat.

5. Gem themeblackandblueconfig.php, og opdater dit vindue. Du skal se noget, der ligner følgende skærmbillede. Bemærk, at dine blokke kan være forskellige fra dem nedenfor, men du kan ignorere dette.

Hvad skete der lige?

Okay, så nu har du en kopi af standardtemaet, der bruger efterårstemaet (af Patrick Malley) som forælder. Du har måske bemærket, at overskriften ikke er korrekt, og at den rigtige Efterårstemaoverskrift ikke vises. Nå, det skyldes, at du i det væsentlige bruger kopien af standardtemaet, og at overskriften fra dette tema er den, du ser ovenfor. Det er kun CSS-filerne, der er inkluderet i dette hierarki, så eventuelle HTML-ændringer ses ikke, før du redigerer dit standardtemas overskrift.html-fil.

har en go hero-Vælg en anden forælder tema

gå tilbage og få et kig gennem nogle af temaerne på Moodle.org og hente en, som du kan lide. Tilføj dette tema som en forælder tema til din blackandblue tema config.php-fil, men denne gang vælge, hvilke stylesheets du vil bruge fra dette tema. Temaet tilbage til skolen er godt til denne øvelse, da dens stilark er tydeligt mærket. Så du

kopiering af sidehoved-og sidefodsfilerne

for at vise, at du bruger Efterårstemaets CSS-filer og STANDARDTEMAETS HTML-filer, kan du bare gå og kopiere overskriften.html og sidefod.html-filer fra Patrick Malley efterår tema og indsætte dem i din blackandblue tema mappe. Må ikke bekymre dig om at overskrive din header og sidefod filer, som du altid bare kan kopiere dem igen fra AC tual standard tema mappe.

tid til handling – kopiering af overskriften.html og sidefod.html-filer

1. gå til Efterårstemaets mappe og fremhæv både overskriften.html og sidefod.html-filer ved at holde Ctrl-tasten nede og klikke på dem begge. Højreklik på de valgte filer, og vælg Kopier.
2. gå til din blackandblue tema mappe og højreklik og vælg Indsæt.
3. gå tilbage til vinduet og tryk på knappen F5 for at opdatere siden. Du vil nu se det fulde efterårstema.

Hvad skete der lige?

du har kopieret efterårstemaets overskrift.html og sidefod.html-filer i din blackandblue tema, så du kan se den fulde efterår tema arbejder. Du vil sandsynligvis ikke bruge overskriften.html og sidefod.html-filer, som du lige har kopieret, da dette kun var et eksempel på, hvordan Moodle-temaprocessen fungerer.

så du har nu en umodificeret kopi af standardtemaet kaldet blackandblue, som bruger efterårstemaet som dets overordnede tema. Alt du skal gøre nu for at foretage ændringer i dette tema er at redigere din CSS-fil i blackandblue-temamappen.

temamappe husarbejde

der er dog et par ting, du skal gøre først, da du har en nøjagtig kopi af standardtemaet bortset fra overskriften.html og sidefod.html-filer. Denne kopierede mappe Har filer, som du ikke har brug for, da den eneste fil, du har indstillet til dit tema at bruge, var user_styles.css-fil i config.php-fil tidligere. Dette var den første ændring, du lavede:

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

user_style.css-fil findes ikke i din blackandblue tema mappe, så du bliver nødt til at oprette det. Du skal også slette andre CSS-filer, der er til stede, da dit nye blackandblue-tema kun bruger et stilark, nemlig user_styles.css-fil, som du vil oprette i de følgende afsnit.

tid til handling – oprettelse af vores stilark

1. Højreklik hvor som helst i din blackandblue-mappe, og vælg nyt tekstdokument|.
2. Omdøb dette tekstdokument til user_styles.css ved at højreklikke igen og vælge Omdøb.

tid til handling – sletning af CSS-filer, som vi ikke har brug for

1. Slet følgende CSS-filer ved at vælge dem og derefter højreklikke på de valgte filer og vælge Slet.
   • styles_color.css
   • styles_ie6.css
   • styles_ie6.css
   • styles_ie7.css
   • styles_layout.css
   • styles_moser.css

   {baggrund: #000000;}

   

hvad skete der lige?

i de sidste to opgaver oprettede du en tom CSS-fil kaldet user_style.css i din blackandblue tema mappe. Du slettede derefter alle CSS-filer i din blackandblue-temas mappe, da du ikke længere har brug for dem. Husk, at dette kun er kopier af CSS-filerne i mappen standard tema, og du har indstillet dit tema til at bruge standardtemaet som base i blackandblue-temaets konfiguration.php-fil.

lad os foretage nogle ændringer

nu har du oprettet dit tema, som du vil have det, det vil sige, du bruger dit eget blackandblue-tema ved at bruge standardtemaet som base og efterårstemaet som forælder. Gå videre og foretage et par ændringer til din user_style.css-fil, så du kan se, hvilken effekt det har på dit tema, og kontrollere, at alle dine config.php-filens indstillinger er korrekte. Husk, at alle de nuværende stilarter arves fra efterårstemaet.

tid til handling – kontrol af vores opsætning

1. Åbn dit Moodle-sted med det aktuelle tema (som skal være blackandblue, men ligner efterårstemaet).
2. Naviger til din blackandblue tema mappe, højreklik på user_style.css-fil, og vælg Åbn. Denne fil skal være helt tom.

3. Indtast følgende linje af CSS for kropselementet, og gem derefter fi le:

    krop {
   baggrund: #000000;
   }

   

4. Opdater nu dit bro.ser-vindue. Du vil se, at baggrunden nu er sort.

   

Bemærk: Når du bruger Firebug til at identificere typografier, der bruges, er det måske ikke altid indlysende, hvor de er, eller hvilken typografi der styrer dette element på siden. Et eksempel på dette er kroppen {baggrund: #000000;}kode, som vi lige har indsat i vores user_style.css-fil. Hvis vi havde brugt Firebug til at identificere den stil, ville vi ikke have fundet den. I stedet tog jeg bare et kig på CSS-filen fra efterårstemaet. Det, jeg prøver at sige her, er, at der altid vil være et element i at stikke rundt og prøve og fejl.

Hvad skete der lige?

alle synes fint der, ikke? Du har tilføjet en stil erklæring til din tomme user_style.css fil til at ændre baggrundsfarven, og har kontrolleret ændringerne i din bro.ser. Du ved nu, hvordan de overordnede temaer fungerer, og ved, at du kun behøver at kopiere stilarterne fra Firebug til din user_style.CSS fil og redigere stil erklæringer, der skal ændres.