Questo articolo è disponibile anche in:
Con i piani Corporate e Enterprise Owl è possibile modificare i CSS dei contenuti didattici.

Potreste voler cambiare i font, i colori, le forme dei pulsanti e lo sfondo dei vostri test e dei corsi creati con Easy LMS. Un modo per farlo è regolare le impostazioni nella scheda Styling, ma potreste voler apportare ancora più modifiche di quelle direttamente disponibili.

L'accesso ai CSS consente di modificare il modo in cui vengono presentati i contenuti online, come i colori, i font, le dimensioni dei caratteri, le forme dei pulsanti, ecc. Per avere accesso a questa funzione, è necessario disporre di un piano Corporate o Enterprise Owl plan.

A seconda delle vostre abilità CSS, ci sono molte modifiche che potete apportare all'interfaccia dei vostri test. Abbiamo avuto clienti che hanno cambiato l'aspetto della barra del timer, aggiunto transizioni animate appariscenti e altre cose fantastiche attraverso CSS personalizzati.

Quiz, valutazioni e corsi

Se vuoi personalizzare il CSS per il tuo Quiz , la Valutazione o il Corso, inviaci un messaggio. Se la modifica è semplice (come ad esempio la modifica della dimensione del carattere), possiamo farla subito.

Se avete bisogno di ulteriori modifiche, vi invieremo un file 📂 per la personalizzazione in modo che possiate rispedircelo, e poi applicheremo le modifiche al vostro conto. Si prega di inviare la richiesta attraverso la chat.

Le modifiche ai CSS possono essere applicate, in particolare a un quiz , alla valutazione, o al corso, o a tutto il tuo account (se vuoi usare le stesse impostazioni per ogni contenuto creato). I CSS possono essere salvati come elenco in un documento di notepad e inviati a noi. Lo implementeremo poi nel tuo account.

Esami

Puoi modificare i CSS del tuo esame direttamente dal tuo account. Vai al tuo esame su > Crea > Styling > CSS personalizzati:



Nella scheda File manager, potete anche caricare i vostri font e le vostre immagini per l'uso sul foglio di stile CSS (consultate questo articolo per saperne di più):



Tanto per fare un esempio, questo è il link ad un esame che è stato disegnato con le impostazioni disponibili nel Dashboard:
https://www.onlineexambuilder.com/general-knowledge-exam-no-css/exam-319288

E questo è lo stesso esame, ma ora con uno stile CSS personalizzato:
https://www.onlineexambuilder.com/general-knowledge-exam-css/exam-276765

Tutte le modifiche apportate alla scheda Styling saranno applicate al vostro esame da quel momento in poi, anche se si tratta di un esame esistente o se è incorporato in un sito web.

Foglio di trucco CSS personalizzato

I nostri amati designer hanno condiviso alcuni frammenti di codice che potete usare per creare il vostro foglio CSS. Controllateli qui sotto.

1. 1. Esame, quiz e valutazione

Cambiare la famiglia di caratteri

Tutti i font di Google sono ora disponibili per gli Esami.
Se volete cambiare il tipo di carattere del vostro Assessment and Quiz, consultate l'elenco di Web Safe Fonts, oppure consultate Google Fonts. Non dimenticate di importare il font nel File manager (in Exams > Styling) e poi copiate e incollate il percorso del font nel vostro foglio CSS.

Voci

Questo include le domande.

h1, h2, h3, h4, h5, h6, didascalia, *[class*=heading_h], .examquestion>strong { font-family: Georgia, serif;}

Testo del corpo

Questo include le risposte.

corpo { font-famiglia: Arial, Helvetica, sans-serif;}

Pulsanti

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

Tutto (lo stesso font)

body, h1, h2, h3, h4, h5, h6, didascalia, *[class*=heading_h], .examquestion>strong,.container .button, .container input[type=submit], .container input[type=button], .container button, .container.gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

Modifica della dimensione dei caratteri

Rubriche

h1 { dimensione del carattere: 28px;}h2, didascalia, .heading_h2, .examquestion>strong { dimensione del carattere: 21px;}h3, .heading_h3 { dimensione del carattere: 16.8px;}h4 { dimensione del carattere: 15.4px;}h5 { dimensione del carattere: 14px;}h6 { dimensione del carattere: 11.2px;}}.

Testo del corpo

corpo { dimensioni del carattere: 13px;}

Pulsanti

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font size: 13px;}

Domande

#questioncontenitore h1 { dimensione del carattere: 28px;}

Risposte

.answers label, .answers label span, .answerinput * { font size: 13px;}

Aggiunta di un'immagine di sfondo

Per gli Esami, è possibile farlo direttamente attraverso il cruscotto in Styling > Tema > Sfondo fotografico scuro.

Tuttavia, per Valutazioni e Quiz sono necessarie le seguenti righe di codice:

html { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_have_uploaded]') no-repeat center fix; background-size: cover;}html body { background: none rgba(59,59,59,59,0.7);}

Per aggiungere un'immagine di sfondo, è necessario prima caricare questa immagine sui nostri server. Potete farlo aggiungendole al File Manager in uno dei vostri Esami. Dopo averle caricate lì, verrà generato un percorso CSS nella scheda Styling > Custom CSS. Potete poi copiare-incollare questo percorso di immagine/font nel vostro foglio CSS.


2. 2. Corsi

Cambiare la famiglia di caratteri

Se volete cambiare il tipo di carattere del vostro corso, consultate l'elenco di Web Safe Fonts, oppure consultate Google Fonts. Non dimenticate di importare il font nel file manager (in Exams > Styling) e poi copiate e incollate il percorso del font nel vostro foglio CSS.

Voci

h1, h2, h3, h4, h5, h6, didascalia, *[class*=heading_h], .examquestion>strong { font-family: "Droid Serif", serif;}

Testo del corpo

corpo { font-famiglia: "Open Sans", sans-serif;}

Pulsanti

button, .button { font-famiglia: "Open Sans", sans-serif;}

Tutto (lo stesso font)

corpo, h1, h2, h3, h4, h5, h6, didascalia, *[class*=heading_h], .examquestion>strong, button, .button { font-family: "Open Sans", sans-serif;}

Modifica della dimensione dei caratteri

Voci

Le dimensioni delle intestazioni sono diverse tra le diverse dimensioni dello schermo.

Tablet e Desktop

@schermo solo multimediale e (larghezza minima: 40.0625em) { h1 { dimensione del carattere: 2.55556rem; } h2 { dimensione del carattere: 2.11111rem; } h3 { dimensione del carattere: 1.66667rem; } h4 { dimensione del carattere: 1.11111rem; } h5 { dimensione del carattere: 1rem; } h6 { dimensione del carattere: 1rem; }}} h6 { dimensione del carattere: 1rem; }}}.

Mobile

h1 { dimensione del carattere: 1.88889rem;}h2 { dimensione del carattere: 1.55556rem;}h3 { dimensione del carattere: 1.22222rem;}h4 { dimensione del carattere: .77778rem;}h5 { dimensione del carattere: 1rem;}h6 { dimensione del carattere: 1rem;}h6 { dimensione del carattere: 1rem;}

Tutte le dimensioni dello schermo

h1 { dimensione del carattere: 1.88889rem;}h2 { dimensione del carattere: 1.55556rem;}h3 { dimensione del carattere: 1.22222rem;}h4 { dimensione del carattere: .77778rem;}h5 { dimensione del carattere: 1rem;}h6 { dimensione del carattere: 1rem;}@schermo solo multimediale e (larghezza minima: 40.0625em) { h1 { dimensione del carattere: 2.55556rem; } h2 { dimensione del carattere: 2.11111rem; } h3 { dimensione del carattere: 1.66667rem; } h4 { dimensione del carattere: 1.11111rem; } h5 { dimensione del carattere: 1rem; } h6 { dimensione del carattere: 1rem; }}}}.

Testo del corpo

p, li, th, td, td, label, input, select, textarea, .qtype, .errorMessage, .assessboard p, .assessboard li, .contentcontainer .col12 .singleaxisscorecard p, .contentcontainer .col12 .singleaxisscorecard li {font-size: 1rem;}

Pulsanti

pulsante, .button { dimensione del carattere: .88889rem;}

Domande

#questioncontenitore h1 { dimensione del carattere: 28px;}

Risposte

.answers label>span, .answers label { dimensione del carattere: .8rem;}

Aggiunta di uno sfondo

corpo { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_have_uploaded]') no-repeat center fix; background-size: cover;}

Per aggiungere un'immagine di sfondo, è necessario prima caricare questa immagine sui nostri server. Potete farlo aggiungendole al File Manager in uno dei vostri Esami. Dopo averle caricate lì, verrà generato un percorso CSS nella scheda Styling > Custom CSS. Potete quindi copiare-incollare questo percorso di immagine/font nel vostro foglio CSS.

Per una migliore leggibilità, è possibile aggiungere un colore di sovrapposizione tra l'immagine di sfondo e il contenuto. Cambiare l'ultimo numero per l'opacità; 0,5 sta per il 50% di trasparenza).

Per una sovrapposizione nera:

.off-canvas-wrap { sfondo: rgba(0, 0, 0, 0, 0.5);}

Per una copertura bianca:

.off-canvas-wrap { sfondo: rgba(255, 255, 255, 255, 0.5);}



Ridimensionare l'immagine

Per utilizzare un logo in un corso, probabilmente sarà necessario ridimensionarlo. Quindi, si prega di utilizzare questo strumento per ridimensionare il logo prima di caricarlo su Amazon: Online Image Resizer.

Carica l'immagine. È possibile ritagliarla se necessario, ma se questo non è necessario, andare direttamente al punto 4. Mettete il numero "108" nell'ultima casella, e tenete selezionata la casella di controllo, in questo modo:



Ora scarica il logo. PNG è la vostra migliore scommessa.

Carica il logo

Per utilizzare il logo, è necessario caricare questa immagine sui nostri server. Si prega di aggiungerle a un esame > Styling > File manager e di copiare e incollare il percorso CSS in fondo alla sottotab CSS personalizzato per utilizzarlo nel vostro corso.

Calcolo della giusta larghezza

Nei CSS, dovrete specificare l'altezza e la larghezza del logo che state aggiungendo. Dovete rispettare il rapporto d'aspetto del logo, quindi avete bisogno di una calcolatrice per farlo: Easy Aspect Ratio Calculator. Ecco come si usa:

1. Trovare prima le dimensioni attuali della vostra immagine. 2. Vai al logo appena caricato nel tuo Explorer, clicca con il tasto destro del mouse su di esso e clicca su Proprietà. 2. Selezionare la scheda Dettagli. In alto vedrete le vostre dimensioni elencate:
2. Andate alla calcolatrice online. 3. Inserisci la larghezza e l'altezza dell'immagine (quella delle proprietà), seleziona Nuova altezza e inserisci la nuova altezza (vedi sotto dopo la dimensione dello sfondo, il secondo valore è l'altezza che vuoi).
La calcolatrice dirà qualcosa del tipo: "Ecco! La nuova larghezza", e il vostro numero è lì! Arrotondare questo numero al più vicino (non esistono mezzi pixel).

Logo sul lato sinistro (accanto al pulsante del menu)

Si prega di notare che l'immagine sottostante è stata disegnata direttamente dal pulsante del menu, e il colore di sfondo solido è stato aggiunto al logo con imbottitura all'interno. Se avete bisogno che questo sia diverso, dovete armeggiare con il background-size e il background-position (vedi l'esempio sotto).

.tab-bar::dopo { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_ha_uploaded]')'); background-repeat: no-repeat; background-position: right top; background-size: 156px 51px; content: ''; display: blocco; posizione: relativa; float: sinistra; larghezza: 156px; altezza: 51px;}@schermo solo media e (larghezza minima: 64.063em) { .tab-bar::dopo { background-size: 165px 54px; larghezza: 165px; altezza: 54px; }}@schermo solo media e (larghezza massima: 40em) { .tab-bar::dopo { larghezza: 138px; altezza: 45px; background-size: 138px 45px; }}}}.

Logo sul lato destro

Si prega di notare che l'immagine qui sotto è stata progettata in modo da avere una leggera imbottitura laterale e superiore. Se non lo si desidera, si può impostare l'altezza dell'immagine a 54px per il desktop e 45px per il mobile e impostare invece la posizione background-position su in alto a destra (vedi l'esempio sopra). L'immagine prenderà l'intera altezza della barra superiore e si attaccherà ai bordi della finestra.

.tab-bar { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_uploaded]'); posizione dello sfondo: in alto a destra 10px 10px; background-repeat: no-repeat; dimensione dello sfondo: 117px 40px;}@schermo solo multimediale e (larghezza massima: 40em) { .tab-bar { posizione dello sfondo: destra 10px centro; dimensione dello sfondo: 102px 35px; }}}.

Logo in basso a sinistra o a destra

Regolare la larghezza, altezza e dimensione in base alle dimensioni dell'immagine.

Nell'esempio seguente, il logo è allineato a destra. Per allinearlo a sinistra, cambiare destra: 0 a sinistra: 0.

Se avete bisogno che il logo sia un po' lontano dal bordo, scrivete cose come right: 10px e bottom: 10px.

.sezione principale .ui-page::dopo { contenuto: ''; display: blocco; larghezza: 102px; altezza: 35px; background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); dimensione dello sfondo: 102px 35px; background-repeat: no-repeat; background-position: centro; posizione: assoluta; destra: 0; in basso: 0; indice z: 99;}
È stato utile questo articolo?
Annulla
Grazie!