Questo articolo è disponibile anche in:
Questo articolo è tradotto usando un traduttore automatico. Potrebbe contenere alcuni errori o traduzioni che suonano strane. Pensiamo lo stesso che possa esserti utile leggere questo articolo nella tua lingua madre. Facci sapere se ti è stato di aiuto, o facci avere il tuo feedback, in fondo all'articolo.

Con i piani Corporate e Enterprise Owl, è possibile modificare il CSS del tuo contenuto di apprendimento.

Potresti voler cambiare i caratteri, i colori, le forme dei pulsanti e lo sfondo dei tuoi test e corsi creati con Easy LMS. Un modo per farlo è regolare le impostazioni nella sezione Styling ma potresti voler fare ancora più modifiche di quelle direttamente disponibili.

L'accesso al CSS ti permette di cambiare il modo in cui vengono presentati i contenuti online, come i colori, i caratteri, le dimensioni dei caratteri, le forme dei pulsanti, ecc. Per avere accesso a questa funzione, devi avere un piano Corporate o Enterprise Owl.

A seconda delle tue competenze CSS, ci sono un sacco di modifiche che puoi fare all'interfaccia dei tuoi test. Abbiamo avuto clienti che hanno cambiato l'aspetto della barra del timer, aggiunto vistose transizioni animate e altre cose fantastiche attraverso CSS personalizzati.
Quiz, Valutazioni, e Corsi

Se volete personalizzare il CSS per il vostro Quiz, Valutazione, o Corsomandaci un messaggio. Se il cambiamento è semplice (come modificare la dimensione del carattere), possiamo farlo subito.

Se hai bisogno di più modifiche, ti invieremo un file 📂 per la personalizzazione in modo che tu possa rimandarcelo, e noi applicheremo le modifiche al tuo account. Invia la tua richiesta attraverso la chat.

Le modifiche nel CSS possono essere applicate, in particolare a Quiz, Valutazione, o Corso, o a tutto il tuo account (se vuoi usare le stesse impostazioni per ogni pezzo di contenuto che crei). Il CSS può essere salvato come lista in un documento notepad e inviato a noi. Lo implementeremo poi nel tuo account.

Esami

Puoi modificare il CSS del tuo Esame direttamente dal tuo account. Vai al tuo Esame > Crea > Styling > CSS personalizzato:



Nel File manager puoi anche caricare i tuoi font e le tue immagini da usare nel foglio di stile CSS (controlla questo articolo per saperne di più):



Solo per darvi un esempio, questo è il link ad un Esame che è stato stilizzato con le impostazioni disponibili nel Dashboard:
https://www.onlineexambuilder.com/ocean-sailor-exam/exam-70792



E questo è lo stesso Esame, ma ora con uno stile CSS personalizzato
https://www.onlineexambuilder.com/ocean-sailor-exam-css/exam-93757



Tutte le modifiche fatte nella scheda Styling saranno applicate al tuo Esame da quel momento in poi, anche se è un esistente o se è incorporato in un sito web.

Foglio riassuntivo dei CSS personalizzati

I nostri amati designer hanno condiviso alcuni frammenti di codice che puoi usare per creare il tuo foglio CSS. Controllali qui sotto.
1. Esame , Quiz, e Valutazione
Cambiare la famiglia di caratteri

Tutti i font di Google sono ora disponibili per Esami.
Se vuoi cambiare il tipo di font del tuo Valutazione e Quizsi prega di consultare una lista di Web Safe Fonts, o vedere Google Fonts. Non dimenticare di importare il font nel Gestore di file (in Esami > Styling) poi copia-incolla il percorso del font nel tuo foglio CSS.

Titoli

Questo include le domande.

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

Testo del corpo

Questo include le risposte.

body { font-family: 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 carattere)

body, h1, h2, h3, h4, h5, h6, caption, [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;}```
Cambiare la dimensione del carattere

Titoli

h1 { font-size: 28px;}h2, caption, .heading_h2, .examquestion>strong { font-size: 21px;}h3, .heading_h3 { font-size: 16.8px;}h4 { font-size: 15.4px;}h5 { font-size: 14px;}h6 { font-size: 11.2px;}

Testo del corpo

body { font-size: 13px;}

Pulsanti

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

Domande

#questioncontainer h1 { font-size: 28px;}

Risposte

.answers label, .answers label span, .answerinput * { font-size: 13px;}
Aggiungere un'immagine di sfondo

Per Esami, puoi farlo direttamente attraverso il dashboard in Styling > Theme > Dark photo background.

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_you_have_uploaded]') no-repeat center center fixed; background-size: cover;}html body { background: none rgba(59,59,59,0.7);}

Per aggiungere un'immagine di sfondo, devi prima caricare questa immagine sui nostri server. Puoi farlo aggiungendole al File Manager in uno dei tuoi Esami. Dopo averle caricate lì, verrà generato un percorso CSS nella sezione Styling > CSS personalizzato scheda. Puoi quindi copiare-incollare questo percorso immagine/font nel tuo foglio CSS.

2. Corsi
Cambiare la famiglia di caratteri

Se vuoi cambiare il tipo di carattere del tuo Corso, vedi una lista di Web Safe Fonts, o vedi Google Fonts. Non dimenticare di importare il font nel Gestore di file (in Esami > Styling) poi copia-incolla il percorso del font nel tuo foglio CSS.

Titoli

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

Testo del corpo

body { font-family: "Open Sans", sans-serif;}

Pulsanti

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

Tutto (lo stesso carattere)

body, h1, h2, h3, h4, h5, h6, caption, [class=heading_h], .examquestion>strong, button, .button { font-family: "Open Sans", sans-serif;}```
Cambiare la dimensione del carattere

Titoli

Le dimensioni dei titoli sono diverse a seconda delle dimensioni dello schermo

Tablet e Desktop

@media only screen and (min-width: 40.0625em) { h1 { font-size: 2.55556rem; } h2 { font-size: 2.11111rem; } h3 { font-size: 1.66667rem; } h4 { font-size: 1.11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}

Mobile

h1 { font-size: 1.88889rem;}h2 { font-size: 1.55556rem;}h3 { font-size: 1.22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}

Tutte le dimensioni dello schermo

h1 { font-size: 1.88889rem;}h2 { font-size: 1.55556rem;}h3 { font-size: 1.22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}@media only screen and (min-width: 40.0625em) { h1 { font-size: 2.55556rem; } h2 { font-size: 2.11111rem; } h3 { font-size: 1.66667rem; } h4 { font-size: 1.11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}

Testo del corpo

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

Pulsanti

button, .button { font-size: .88889rem;}

Domande

#questioncontainer h1 { font-size: 28px;}

Risposte

.answers label>span, .answers label { font-size: .8rem;}
Aggiungere uno sfondo

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

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

Per una migliore leggibilità, puoi aggiungere un colore di sovrapposizione tra l'immagine di sfondo e il contenuto. Cambia l'ultimo numero per l'opacità; 0.5 sta per il 50% di trasparenza).

Per una sovrapposizione nera:

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

Per una sovrapposizione bianca:

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


Ridimensionare l'immagine

Per usare un logo in un Corso, avrete probabilmente bisogno di ridimensionarlo. Quindi, si prega di utilizzare questo strumento per ridimensionare il logo prima di caricarlo su Amazon: Online Image Resizer.

Carica l'immagine. Puoi ritagliarla se necessario, ma se questo non è necessario, vai direttamente al passo 4. Metti il numero "108" nell'ultima casella, e tieni la casella selezionata, così:



Ora scarica il logo. PNG è la scelta migliore.

Carica il logo

Per utilizzare il logo, è necessario caricare questa immagine sui nostri server. Per favore, aggiungile a un Esame > Styling > File manager e copia-incolla il percorso CSS in fondo alla sottotabella Custom CSS per usarlo nel tuo Corso.

Calcolo della giusta larghezza

Nei CSS, dovrai specificare l'altezza e la larghezza del logo che stai aggiungendo. Devi rispettare le proporzioni del logo, quindi hai bisogno di un calcolatore per farlo: Easy Aspect Ratio Calculator. Ecco come si usa:

Trova prima le dimensioni attuali della tua immagine. Vai al logo che hai appena caricato nel tuo Explorer, fai clic destro su di esso e clicca su Proprietà. Seleziona la scheda Dettagli. Vedrai le tue dimensioni elencate in alto
Vai alla calcolatrice online. Inserisci la larghezza e l'altezza dell'immagine (quella nelle proprietà), seleziona Nuova altezza, e inserisci la nuova altezza (vedi sotto dopo background-size, il secondo valore è l'altezza che vuoi).
La calcolatrice dirà qualcosa come: "Behold! La nuova larghezza", e il tuo numero è lì! Arrotondate questo numero all'unità più vicina (non esistono i mezzi pixel).
Logo sul lato sinistro (accanto al pulsante del menu)

Nota che l'immagine qui sotto è stata stilizzata direttamente dal pulsante del menu, e il colore di sfondo solido è stato aggiunto al logo con il padding all'interno. Se hai bisogno che questo sia diverso, devi giocare con la background-size e la background-position (vedi l'esempio qui sotto).

.tab-bar::after { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-repeat: no-repeat; background-position: right top; background-size: 156px 51px; content: ''; display: block; position: relative; float: left; width: 156px; height: 51px;}@media only screen and (min-width: 64.063em) { .tab-bar::after { background-size: 165px 54px; width: 165px; height: 54px; }}@media only screen and (max-width: 40em) { .tab-bar::after { width: 138px; height: 45px; background-size: 138px 45px; }}
Logo sul lato destro

Per favore nota che l'immagine qui sotto è stata stilizzata per avere un leggero padding laterale e superiore. Se non lo vuoi, puoi impostare l'altezza dell'immagine a 54px per desktop e 45px per mobile e impostare invece la background-position a top right (vedi l'esempio sopra). L'immagine prenderà tutta l'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_have_uploaded]'); background-position: top 10px right 10px; background-repeat: no-repeat; background-size: 117px 40px;}@media only screen and (max-width: 40em) { .tab-bar { background-position: right 10px center; background-size: 102px 35px; }}
Logo in basso a sinistra o a destra

Regola la larghezza, l'_altezza_ e la dimensione dello sfondo secondo le dimensioni della tua immagine

Nell'esempio qui sotto, il logo è allineato a destra. Per allinearlo a sinistra, cambia right: 0 in left: 0

Se hai bisogno che il logo sia un po' più lontano dal bordo, scrivi cose come right: 10px e bottom: 10px.

.main-section .ui-page::after { content: ''; display: block; width: 102px; height: 35px; background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-size: 102px 35px; background-repeat: no-repeat; background-position: center; position: absolute; right: 0; bottom: 0; z-index: 99;}
È stato utile questo articolo?
Annulla
Grazie!