skapa ditt första kompletta Moodle-tema

så låt oss knäcka på…

skapa ett nytt tema

att hitta ett bastema för att skapa ditt Moodle-tema på är det första du behöver göra.Det finns dock olika sätt att göra detta; Du kan göra en kopia av standardtematoch byta namn på det som du gjorde i en del av den här artikeln, eller du kan använda ett överordnat tema som ärockså baserat på standardtemat.

den viktiga punkten här är att standardtemat som följer med Moodle är hörnstenen i Moodle-temaprocessen. Varje annat Moodle-tema bör baseras på detta tema och skulle normalt beskriva skillnaderna från standardtemat. Även om den här metoden fungerar och är ett enkelt sätt att komma igång med Moodle theming, orsakar det problem eftersom nya funktioner kan läggas till i Moodle som kan få ditt tema att visas eller fungera felaktigt. Standardtemat kommer alltid att uppdateras innan en ny version av Moodle lanseras. Så om du väljer att göra en kopia av standardtemat och ändra dess stilar, skulle det vara bäst att se till att du använder ett överordnat tema också. På detta sätt kommer det överordnade temat att vara ditt bastema tillsammans med de ändringar du gör i din kopia av standardtemat.

det finns dock ett annat sätt att skapa ditt första tema, och det är att skapa en kopia av ett tema som ligger mycket nära standardtemat, till exempel standardwhite, och använd detta som ditt tema. Moodle använder sedan standardtemat som bastema och tillämpar eventuella ändringar som du gör i standardwhite-temat högst upp (förälder). Allt vi gör är att beskriva skillnaderna mellan standard och standardwhite teman. Detta är bättre eftersom Moodle-Utvecklare ibland kommer att göra ändringar i standardtemat för att vara uppdaterade med nya Moodle-funktioner. Detta innebär att på varje Moodle Uppdatering, din standard tema, mapp kommer att uppdateras automatiskt, vilket undviker några otäcka visningsproblem orsakas av Moodle uppdateringar.

det sätt på vilket du konfigurerar Moodle-teman är helt upp till dig. Om du ser ett tema som är nästan vad du vill och det finns egentligen inte många förändringar som behövs, sedan använda en förälder tema vettigt, eftersom de flesta av de stilar som du behöver har redan skrivits. Men om du vill skapa ett tema som är helt annorlunda än något annat tema eller vill verkligen komma in i Moodle theming, skulle det vara bäst att använda en kopia av ett av standardarken.

så låt oss gå vidare och se vad skillnaderna är när du använder olika temainställningar och se vilken effekt dessa olika metoder har på temaprocessen.

• Bläddra till din temamapp i C: Program FilesApache Software FoundationApache 2.2 htdocstheme.
• kopiera standardtemat genom att högerklicka på temats mapp och välja Kopiera.
• klistra in det kopierade temat i temakatalogen (samma katalog som du är närvarande i).
• Byt namn på kopian av standardmappen till blackandblue eller något annat namn som du vill välja (Kom ihåg att inte använda versaler eller mellanslag).
• öppna din Moodle-webbplats och navigera till Webbplatsadministration Utseende / Teman| temaväljare / och välj det blackandblue-tema som du just har skapat.

Y ou kanske har märkt att temat som visas i föregående skärmdump har en rubrik som säger svart och blått tema. Detta beror på att jag har lagt till detta i hela webbplatsens namn på sidan för inställningar på framsidan.

tid för åtgärd-ställa in ett överordnat tema

1. öppna din webbläsare och navigera till din Moodle-webbplats och logga in som administratör.
2. gå till Webbplatsadministration | Utseende | Teman / temaväljare och välj ditt blackandblue-tema om det inte redan är valt.
3. Bläddra till roten till din blackandblue-mapp, högerklicka på konfigurationen.php-fil och välj Öppna med / WordPad.

4. du måste göra fyra ändringar i den här filen så att du kan använda detta tema och ett överordnat tema samtidigt som du ser till att du fortfarande använder standard standardtema som bas. Här är ändringarna:

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

   Låt oss titta på var och en av dessa uttalanden, i sin tur.

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

   detta innehåller namnen på alla formatmallar filer som du vill inkludera i detta för din blackandblue tema, nämligen user_styles.

   $THEME-> standardsheets = true;

   denna parameter används för att inkludera standardtemats formatmallar. Om den är inställd på True kommer den att använda alla formatmallar i standardtemat. Alternativt kan den ställas in som en array för att ladda enskilda formatmallar i vilken ordning som krävs. Vi har satt detta till Sant, så vi kommer att använda alla stilmallar i standardtemat.

    $ tema - > förälder = 'höst';

   denna variabel kan ställas in för att använda ett tema som överordnat tema, som ingår före det aktuella temat. Detta gör det lättare att göra ändringar i ett annat tema utan att behöva ändra de faktiska filerna.

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

   den här variabeln kan användas för att välja antingen alla överordnade temas formatmallar eller enskilda filer. Det har ställts in för att inkludera stilar.css-fil från modertemat, nämligen höst. Eftersom det bara finns en formatmall i hösttemat kan du ställa in den här variabeln till True. Hur som helst kommer du att få samma resultat.

5. spara themeblackandblueconfig.php, och uppdatera ditt webbläsarfönster. Du bör se något som liknar följande skärmdump. Observera att dina block kan skilja sig från de nedan, men du kan ignorera detta.

vad hände just?

Okej, så nu har du en kopia av standardtemat som använder hösttemat (av Patrick Malley) som förälder. Du kanske har märkt att rubriken inte är korrekt och att rätt hösttema-rubrik inte visas. Tja, det beror på att du i huvudsak använder kopian av standardtemat och att rubriken från detta tema är den som du ser ovan. Det är bara CSS-filerna som ingår i den här hierarkin, så alla HTML-ändringar kommer inte att ses förrän du redigerar ditt vanliga temas rubrik.html-fil.

ha en go hero-välj ett annat överordnat tema

gå tillbaka och titta igenom några av teman på Moodle.org och ladda ner en som du gillar. Lägg till detta tema som ett överordnat tema till din blackandblue tema config.php-fil, men den här gången väljer du vilka formatmallar du vill använda från det temat. Temat tillbaka till skolan är bra för denna övning, eftersom dess stilmallar är tydligt märkta. Så du

kopiera sidhuvud och sidfot filer

för att visa att du använder höst tema CSS-filer och standard tema HTML-filer, kan du bara gå och kopiera rubriken.html och sidfot.html-filer från Patrick Malleys hösttema och klistra in dem i ditt blackandblue-temas mapp. Oroa dig inte för att skriva över dina sidhuvud-och sidfotfiler, eftersom du alltid bara kan kopiera dem igen från mappen ac tual standard theme.

tid för åtgärd-kopiera rubriken.html och sidfot.html-filer

1. Bläddra till Hösttemats mapp och markera båda rubriken.html och sidfot.html-filer genom att hålla ner Ctrl-tangenten och klicka på dem båda. Högerklicka på de valda filerna och välj Kopiera.
2. Bläddra till din blackandblue tema mapp och högerklicka och välj Klistra in.
3. gå tillbaka till ditt webbläsarfönster och tryck på F5-knappen för att uppdatera sidan. Du kommer nu att se hela hösttemat.

vad hände just?

du har kopierat höstens tema header.html och sidfot.html-filer i ditt blackandblue-tema, så att du kan se hela hösttemat som fungerar. Du kommer förmodligen inte att använda rubriken.html och sidfot.html-filer som du just kopierade, eftersom detta bara var ett exempel på hur Moodle theming-processen fungerar.

så du har nu en omodifierad kopia av standardtemat som heter blackandblue, som använder hösttemat som huvudtema. Allt du behöver göra nu för att göra ändringar i detta tema är att redigera din CSS-fil i blackandblue tema mapp.

temamapp hushållsarbete

det finns dock ett par saker du behöver göra först, eftersom du har en exakt kopia av standardtemat bortsett från rubriken.html och sidfot.html-filer. Den här kopierade mappen har filer som du inte behöver, eftersom den enda filen som du angav för ditt tema att använda var user_styles.css-fil i config.php-fil tidigare. Detta var den första ändringen du gjorde:

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

user_style.css-filen finns inte i mappen för ditt blackandblue-tema, så du måste skapa den. Du måste också ta bort alla andra CSS-filer som finns, eftersom ditt nya blackandblue-tema bara använder ett stilark, nämligen user_styles.css-fil som du kommer att skapa i följande avsnitt.

Time for action-skapa vårt formatmall

1. högerklicka var som helst i din blackandblue-mapp och välj nytt textdokument|.
2. Byt namn på detta textdokument till user_styles.css genom att högerklicka igen och välja Byt namn.

tid för åtgärd-ta bort CSS-filer som vi inte behöver

1. ta bort följande CSS-filer genom att välja dem och sedan högerklicka på de valda filerna och välja Ta bort.
   • styles_color.css
   • styles_ie6.css
   • styles_ie6.css
   • styles_ie7.css
   • styles_layout.css
   • styles_moz.css

   {bakgrund: #000000;}

   

vad hände nyss?

under de två senaste uppgifterna skapade du en tom CSS-fil som heter user_style.css i din blackandblue tema mapp. Du raderade sedan alla CSS-filer i mappen blackandblue-temat, eftersom du inte längre behöver dem. Kom ihåg att det här bara är kopior av CSS-filerna i standardtema-mappen och du har ställt in ditt tema för att använda standardtemat som bas i blackandblue-temats config.php-fil.

Låt oss göra några ändringar

nu har du ställt in ditt tema så som du vill ha det, det vill säga du använder ditt eget blackandblue-tema genom att använda standardtemat som bas och hösttemat som förälder. Gå vidare och gör några ändringar i din user_style.css-fil så att du kan se vilken effekt detta har på ditt tema, och kontrollera att alla dina config.php-filens inställningar är korrekta. Kom ihåg att alla nuvarande stilar ärvs från hösttemat.

Time for action-kontrollera vår inställning

1. öppna din Moodle-webbplats med det aktuella temat (som ska vara blackandblue men ser ut som hösttemat).
2. navigera till din blackandblue tema mapp, högerklicka på user_style.css-fil och välj Öppna. Den här filen ska vara helt tom.

3. skriv in följande rad CSS för kroppselementet och spara sedan Fi len:

   kropp {
    bakgrund: # 000000;
   }

   

4. Uppdatera nu ditt webbläsarfönster. Du kommer att se att bakgrunden nu är svart.

   

Obs!: När du använder Firebug för att identifiera stilar som används kanske det inte alltid är uppenbart var de är eller vilken stil som styr det elementet på sidan. Ett exempel på detta är body {background: #000000;}kod som vi bara klistrade in i vår user_style.css-fil. Om vi hade använt Firebug för att identifiera den stilen skulle vi inte ha hittat den. Istället tittade jag bara på CSS-filen från hösttemat. Vad jag försöker säga här är att det alltid kommer att finnas ett element av poking runt och försök och fel.

vad hände just?

allt verkar bra där, eller hur? Du har lagt till en stildeklaration i din tomma user_style.css-fil för att ändra bakgrundsfärgen och har kontrollerat ändringarna i din webbläsare. Du vet nu hur de överordnade teman fungerar och vet att du bara behöver kopiera stilar från Firebug till din user_style.css-fil och redigera stildeklarationer som behöver ändras.