Creare il tuo primo tema Moodle completo

Quindi cerchiamo di crack su

Creare un nuovo tema

Trovare un tema di base per creare il vostro tema Moodle è la prima cosa che devi fare.Ci sono, tuttavia, vari modi per fare questo; Lei può fare una copia del themeand standard rinominarlo come Lei fece in parte di questo articolo, o Lei può usare un tema genitore che isalso basato sul tema standard.

Il punto importante qui è che il tema standard che viene fornito con Moodle è la pietra angolare del processo di tematizzazione Moodle. Ogni altro tema Moodle dovrebbe essere basato su questo tema e normalmente descriverebbe le differenze rispetto al tema standard. Anche se questo metodo funziona ed è un modo semplice per iniziare con Moodle tematizzazione, lo fa causare problemi come nuove funzionalità potrebbero ottenere aggiunto a Moodle che potrebbe causare il vostro tema per visualizzare o funzionare in modo non corretto. Il tema standard verrà sempre aggiornato prima che venga lanciata una nuova versione di Moodle. Quindi, se si sceglie di fare una copia del tema standard e cambiare i suoi stili, sarebbe meglio fare in modo che si utilizza un tema genitore pure. In questo modo, il tema genitore sarà il tema di base insieme alle modifiche apportate alla copia del tema standard.

Tuttavia, c’è un altro modo di creare il tuo primo tema, e cioè creare una copia di un tema molto vicino al tema standard, come standardwhite, e usarlo come tema. Moodle utilizzerà quindi il tema standard come tema di base e applicherà tutte le modifiche apportate al tema standardwhite in alto (genitore). Tutto quello che stiamo facendo è descrivere le differenze tra i temi standard e standardwhite. Questo è meglio perché gli sviluppatori di Moodle a volte apportare modifiche al tema standard per essere up-to-date con le nuove funzionalità di Moodle. Ciò significa che su ogni aggiornamento di Moodle, il tema standard, la cartella verrà aggiornata automaticamente, evitando così eventuali problemi di visualizzazione sgradevoli causati dagli aggiornamenti di Moodle.

Il modo in cui si configurano i temi Moodle è completamente a voi. Se vedi un tema che è quasi quello che vuoi e non ci sono molte modifiche necessarie, l’utilizzo di un tema genitore ha senso, poiché la maggior parte degli stili richiesti sono già stati scritti. Tuttavia, se si desidera creare un tema che è completamente diverso da qualsiasi altro tema o desidera entrare davvero in tema Moodle, quindi utilizzando una copia di uno dei fogli standard sarebbe meglio.

Quindi andiamo avanti e vediamo quali sono le differenze quando si utilizzano diverse configurazioni di temi e vediamo quale effetto hanno questi diversi metodi sul processo di tematizzazione.

• Vai alla cartella del tema in C:Programma FilesApache Software FoundationApache 2.2 htdocstheme.
• Copiare il tema standard facendo clic destro sulla cartella del tema e scegliendo Copia.
• Incolla il tema copiato nella directory del tema (la stessa directory in cui si sta attualmente).
• Rinomina la copia della cartella standard in blackandblue o qualsiasi altro nome che desideri scegliere (ricorda di non usare maiuscolo o spazi).
• Apri il tuo sito Moodle e vai a Aspetto amministrazione sito / Temi / Selettore tema/, e scegli il tema blackandblue che hai appena creato.

Potresti aver notato che il tema mostrato nello screenshot precedente ha un’intestazione che dice Tema nero e blu. Questo perché ho aggiunto questo al nome completo del sito nella pagina delle impostazioni della prima pagina.

Tempo di azione – impostazione di un tema principale

1. Apri il browser Web e vai al tuo sito Moodle e accedi come amministratore.
2. Vai a Site Administration | Appearance | Themes / Theme Selector e scegli il tuo tema blackandblue se non è già selezionato.
3. Individuare la radice della cartella blackandblue, fare clic destro sul config.file php, e scegliere Apri con / WordPad.

4. È necessario apportare quattro modifiche a questo file in modo da poter utilizzare questo tema e un tema principale, garantendo nel contempo di utilizzare il tema standard predefinito come base. Ecco le modifiche:

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

   Diamo un’occhiata a ciascuna di queste istruzioni, a turno.

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

   Contiene i nomi di tutti i file di fogli di stile che si desidera includere in questo per il tema blackandblue, ovvero user_styles.

   THEME THEME-> standardsheets = true;

   Questo parametro viene utilizzato per includere i fogli di stile del tema standard. Se è impostato su True, utilizzerà tutti i fogli di stile nel tema standard. In alternativa, può essere impostato come un array per caricare singoli fogli di stile in qualsiasi ordine sia richiesto. Abbiamo impostato questo su True, quindi useremo tutti i fogli di stile del tema standard.

   THEME THEME- > parent = 'autumn';

   Questa variabile può essere impostata per utilizzare un tema come tema principale, che viene incluso prima del tema corrente. Ciò renderà più facile apportare modifiche a un altro tema senza dover modificare i file effettivi.

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

   Questa variabile può essere utilizzata per scegliere tutti i fogli di stile del tema genitore o singoli file. È stato impostato per includere gli stili.file css dal tema principale, vale a dire autunno. Poiché nel tema autunno è presente un solo foglio di stile, è possibile impostare questa variabile su True. In entrambi i casi, si avrà lo stesso risultato.

5. Salva themeblackandblueconfig.php, e aggiornare la finestra del browser web. Si dovrebbe vedere qualcosa di simile al seguente screenshot. Nota che i tuoi blocchi potrebbero essere diversi da quelli qui sotto, ma puoi ignorarlo.

Cosa è appena successo?

Ok, quindi ora hai una copia del tema standard che utilizza il tema autunnale (di Patrick Malley) come genitore. Potresti aver notato che l’intestazione non è corretta e che l’intestazione del tema autunnale corretta non viene visualizzata. Bene, questo è perché stai essenzialmente usando la copia del tema standard e che l’intestazione di questo tema è quella che vedi sopra. Sono solo i file CSS inclusi in questa gerarchia, quindi eventuali modifiche HTML non verranno visualizzate fino a quando non si modifica l’intestazione del tema standard.file html.

Have a go hero-scegli un altro tema genitore

Torna indietro e dai un’occhiata ad alcuni dei temi su Moodle.org e scaricare uno che ti piace. Aggiungi questo tema come tema principale alla configurazione del tuo tema blackandblue.file php, ma questa volta scegli quali fogli di stile vuoi usare da quel tema. Il Back to School tema è una buona per questo esercizio, come i suoi fogli di stile sono chiaramente etichettati. Quindi

Copia i file di intestazione e piè di pagina

Per mostrare che stai usando i file CSS del tema autunnale e i file HTML del tema standard, puoi semplicemente andare a copiare l’intestazione.html e piè di pagina.file html dal tema autunno di Patrick Malley e incollarli nella cartella del tema blackandblue. Non preoccuparti di sovrascrivere i file di intestazione e piè di pagina, poiché puoi sempre copiarli di nuovo dalla cartella del tema standard corrente.

Tempo di azione-copia dell’intestazione.html e piè di pagina.file html

1. Passare alla cartella del tema autunno ed evidenziare sia l’intestazione.html e piè di pagina.file html tenendo premuto il tasto Ctrl e facendo clic su entrambi. Fare clic con il pulsante destro del mouse sui file selezionati e scegliere Copia.
2. Vai alla cartella del tema blackandblue e fai clic con il pulsante destro del mouse e scegli Incolla.
3. Torna alla finestra del browser e premi il pulsante F5 per aggiornare la pagina. Ora vedrai il tema completo dell’autunno.

Cosa è appena successo?

Hai copiato l’intestazione del tema autunnale.html e piè di pagina.file html nel vostro tema blackandblue, in modo da poter vedere il pieno autunno tema di lavoro. Probabilmente non sarà effettivamente utilizzare l’intestazione.html e piè di pagina.file html che hai appena copiato, in quanto questo era solo un esempio di come funziona il processo di tematizzazione Moodle.

Quindi ora hai una copia non modificata del tema standard chiamato blackandblue, che utilizza il tema autunnale come tema principale. Tutto quello che dovete fare ora per apportare modifiche a questo tema è quello di modificare il file CSS nella cartella tema blackandblue.

Cartella tema lavori domestici

Tuttavia, ci sono un paio di cose che devi fare prima, dato che hai una copia esatta del tema standard a parte l’intestazione.html e piè di pagina.file html. Questa cartella copiata contiene file che non ti servono, poiché l’unico file impostato per il tema da utilizzare è user_styles.file css nella configurazione.file php in precedenza. Questa è stata la prima modifica che hai apportato:

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

Lo user_style.il file css non esiste nella cartella del tuo tema blackandblue, quindi dovrai crearlo. Dovrai anche eliminare tutti gli altri file CSS presenti, poiché il tuo nuovo tema blackandblue utilizzerà solo un foglio di stile, ovvero user_styles.file css che verrà creato nelle sezioni seguenti.

Tempo di azione – creazione del nostro foglio di stile

1. Fai clic con il pulsante destro del mouse in qualsiasi punto della cartella blackandblue e scegli Nuovo documento di testo|.
2. Rinominare questo documento di testo in user_styles.css facendo nuovamente clic destro e scegliendo Rinomina.

Tempo di azione-eliminazione dei file CSS di cui non abbiamo bisogno

1. Elimina i seguenti file CSS selezionandoli e facendo clic con il pulsante destro del mouse sui file selezionati e scegliendo Elimina.
   • styles_color.css
   • styles_ie6.css
   • styles_ie6.css
   • styles_ie7.css
   • styles_layout.css
   • styles_moz.css

   {contesto: #000000;}

   

Cos’e ‘ successo?

Nelle ultime due attività, è stato creato un file CSS vuoto chiamato user_style.css nella cartella del tema blackandblue. Hai quindi eliminato tutti i file CSS nella cartella del tuo tema blackandblue, poiché non ne avrai più bisogno. Ricorda, queste sono solo copie dei file CSS nella cartella tema standard e hai impostato il tema per utilizzare il tema standard come base nella configurazione del tema blackandblue.file php.

Facciamo alcune modifiche

Ora hai impostato il tuo tema nel modo desiderato, cioè stai usando il tuo tema blackandblue usando il tema standard come base e il tema autunnale come genitore. Vai avanti e apporta alcune modifiche al tuo user_style.file css in modo che tu possa vedere quale effetto ha sul tuo tema e controllare che tutta la tua configurazione.le impostazioni del file php sono corrette. Ricorda che tutti gli stili attuali vengono ereditati dal tema autunnale.

Tempo di azione – verifica della nostra configurazione

1. Apri il tuo sito Moodle con il tema corrente (che dovrebbe essere blackandblue ma sembra il tema autunnale).
2. Vai alla cartella del tuo tema blackandblue, fai clic con il pulsante destro del mouse su user_style.file css, e scegliere Apri. Questo file dovrebbe essere completamente vuoto.

3. Digitare la seguente riga di CSS per l’elemento body, quindi salvare il le fi:

   body {
    background: #000000;
   }

   

4. Ora aggiorna la finestra del browser. Vedrete che lo sfondo è ora nero.

   

Nota: quando si utilizza Firebug per identificare gli stili che vengono utilizzati, potrebbe non essere sempre ovvio dove si trovano o quale stile controlla quell’elemento della pagina. Un esempio di questo è il codice body {background: #000000;} che abbiamo appena incollato nel nostro user_style.file css. Se avessimo usato Firebug per identificare quello stile, non l’avremmo trovato. Invece, ho appena dato un’occhiata al file CSS dal tema autunnale. Quello che sto cercando di dire qui è che ci sarà sempre un elemento di frugare e tentativi ed errori.

Cosa è appena successo?

Tutto sembra a posto lì, vero? Hai aggiunto una dichiarazione di stile al tuo user_style vuoto.file css per cambiare il colore di sfondo, e hanno controllato le modifiche nel browser. Ora sai come funzionano i temi principali e sai che devi solo copiare gli stili da Firebug nel tuo user_style.css e modificare le dichiarazioni di stile che devono essere modificati.