Puoi personalizzare facilmente l’aspetto del centro assistenza usando i fogli di stile a cascata (CSS). Questo ricettario è stato ideato per aiutarti a dare al centro assistenza l’aspetto che desideri.
Per accedere e modificare il codice CSS in Guide, consulta Personalizzazione di CSS o JavaScript.
Se non conosci i CSS o se sei un po' arrugginito, dai un'occhiata ai seguenti tutorial per tenerti al corrente:
-
Introduzione ai CSS è il tutorial CSS più completo rivolto ai principianti assoluti. Ti guida attraverso le funzioni di base della lingua con esempi pratici che puoi provare personalmente.
-
Il tutorial CSS per principianti offre quanto basta per iniziare.
Puoi anche personalizzare l’aspetto del centro assistenza usando il linguaggio dei modelli del Centro assistenza o JavaScript:
Sommario
Il ricettario è organizzato in sezioni che trattano gli elementi di un centro assistenza. Ogni sezione include codice CSS che puoi incollare direttamente nel foglio di stile del tuo tema. Usa il codice così com’è o modificalo per personalizzarlo.
Il ricettario non è esauriente. Modificando i modelli HTML e il foglio di stile CSS, il numero di cose che puoi fare è limitato solo dalla tua immaginazione.
Intestazione e piè di pagina
- Cambia il colore di sfondo dell’intestazione o del piè di pagina
- Cambia l’altezza dell’intestazione o del piè di pagina
- Cambia lo spazio sopra o sotto l’intestazione o il piè di pagina
- Cambia l’aspetto della lingua selezionata
- Cambia l’aspetto del link Invia una richiesta
- Nascondi il link Invia una richiesta
- Cambia l’aspetto del link di accesso
- Cambia le dimensioni del logo
Ricerca
- Modifica la larghezza o l’altezza del campo di ricerca
- Cambia il colore di sfondo del campo di ricerca
- Cambia l’aspetto del testo di ricerca
- Cambia l’aspetto dell’intestazione della pagina dei risultati
- Cambia l’aspetto dell’evidenziazione delle parole chiave nei risultati di ricerca
- Cambia l’aspetto delle intestazioni della Knowledge base e della community
- Cambia la spaziatura tra i risultati
- Cambia l’aspetto del testo del risultato
- Cambia il colore dei link dei risultati
Breadcrumb
Elenchi di articoli
Articoli della Knowledge base
- Cambia l’aspetto dei titoli degli articoli
- Cambia l’aspetto del testo dell’articolo
- Cambia il colore dei link agli articoli
- Cambia l’aspetto del nome dell’autore
- Cambia l’aspetto dell’ultima stringa aggiornata
- Cambia l’aspetto di “Questo articolo è stato utile?”
- Cambia l’aspetto del contatore dei voti
- Cambia l’aspetto di “Hai altre domande? Invia una richiesta"
- Cambia l’aspetto del titolo dei commenti
- Cambia l’aspetto del testo del commento
Domande e risposte della community
- Cambia l’aspetto dei titoli delle domande
- Cambia l’aspetto del testo della domanda
- Cambia il colore dei link alle domande
- Cambia l’aspetto del nome dell’autore della domanda
- Cambia l’aspetto del tempo trascorso dalla pubblicazione della domanda
- Cambia l’aspetto del link di condivisione della domanda
- Cambia l’aspetto dell’intestazione delle risposte
- Cambia l’aspetto del testo della risposta
- Cambia l’aspetto del nome dell’autore della risposta
- Cambia l’aspetto del tempo trascorso dalla pubblicazione della risposta
- Cambia l’aspetto del link di condivisione della risposta
Intestazione e piè di pagina
L’intestazione visualizza un logo e altri componenti a seconda del tema e dei ruoli degli utenti. Puoi usare il piè di pagina per visualizzare link correlati, informazioni sulla tua azienda o note legali.
Torna al sommario.
Cambia il colore di sfondo dell’intestazione o del piè di pagina
Modifica o aggiungi la proprietà background-color nei seguenti selettori.
Intestazione:
.header {
background-color: #666;
}
Piè di pagina:
.footer {
background-color: #333;
}
Cambia l’altezza dell’intestazione o del piè di pagina
Modifica o aggiungi la proprietà height nei seguenti selettori.
Intestazione:
.header {
height: 70px;
}
Piè di pagina:
.footer {
height: 20px;
}
Cambia lo spazio sopra o sotto l’intestazione o il piè di pagina
Modifica o aggiungi le proprietà margin-bottom e margin-top nei seguenti selettori.
Intestazione:
.header {
margin-bottom: 20px;
}
Piè di pagina:
.footer {
margin-top: 10px;
}
Cambia l’aspetto della lingua selezionata
Aggiungi il selettore e la proprietà seguenti:
.language-selector .dropdown-toggle {
color: green;
}
Cambia l’aspetto del link Invia una richiesta
Aggiungi il seguente selettore e aggiungi o modifica le proprietà di testo:
.submit-a-request {
font-size: 14px;
color: green;
}
Nascondi il link Invia una richiesta
Modifica il seguente selettore:
.submit-a-request {
display:none;
}
Cambia l’aspetto del link di accesso
Aggiungi o modifica le proprietà di testo nel seguente selettore:
.login {
font-size: 14px;
color: green;
}
Cambia le dimensioni del logo
Sebbene le dimensioni consigliate per l’immagine del logo siano 200 x 50 pixel, puoi sovrascrivere questa impostazione predefinita, se necessario.
Per cambiare le dimensioni del logo
- In Guide, fai clic sul pulsante Personalizza aspetta () nella barra laterale.
- Fai clic su Modifica tema.
- Fai clic su CSS per aprire il foglio di stile CSS, quindi cerca la regola seguente:
.logo img { max-height: 37px; }
Per cercare, fai clic all’interno dell’editor di codice e premi CTRL+F (Windows) o Cmd+F (Mac).
- Modifica la proprietà height nel selettore “.logo img” in modo che corrisponda all’altezza dell’immagine.
- Fai clic su Salva.
Ricerca
La casella di ricerca cerca i contenuti sia nella Knowledge base che nella community e visualizza i link in una pagina dei risultati. Se vuoi, puoi rimuovere la casella di ricerca. Per maggiori informazioni, consulta l’ helper per la ricerca nella guida ai modelli del Centro assistenza.
Torna al sommario.
Modifica la larghezza o l’altezza del campo di ricerca
Cambia i valori di larghezza o altezza nei seguenti selettori.
Casella di ricerca grande:
.search input[type=search] {
height: 50px;
width: 90%;
}
Casella di ricerca piccola:
.search-small input[type=search] {
height: 50px;
width: 320px;
}
Cambia il colore di sfondo del campo di ricerca
Cambia la proprietà dello sfondo nei seguenti selettori.
Casella di ricerca grande:
.search input[type=search] {
background: #999;
}
Casella di ricerca piccola:
.search-small input[type=search] {
background: #999;
}
Cambia l’aspetto del testo di ricerca
Modifica o aggiungi le proprietà di testo nei seguenti selettori.
Casella di ricerca grande:
.search {
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}
Casella di ricerca piccola:
.search-small {
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}
Cambia l’aspetto dell’intestazione della pagina dei risultati
L’intestazione nella pagina dei risultati della ricerca è costituita dal numero di risultati restituiti per il termine di ricerca. Esempio: 9 risultati per "numero di serie".
Aggiungi il seguente selettore, se non è già nel foglio di stile, e modifica o aggiungi le proprietà del testo:
.search-results-heading {
font-size: 36px;
font-family: Tahoma, Arial, sans-serif;
}
Cambia l’aspetto dell’evidenziazione delle parole chiave nei risultati di ricerca
I termini evidenziati nei risultati di ricerca sono inclusi nell’elemento incorporato <em> nel contenitore .search-result-description. Per visualizzare le alte luci in grassetto su sfondo giallo, procedi come segue:
.search-result-description em {
font-weight: bold;
background-color: #FFF3CA;
padding: 0px 3px 2px;
border-radius: 3px;
}
Cambia l’aspetto delle intestazioni della Knowledge base e della community
Aggiungi o modifica le proprietà di testo nel seguente selettore:
.search-results-subheading {
font-size: 24px;
font-family: Tahoma, Arial, sans-serif;
}
Cambia la spaziatura tra i risultati
Aggiungi una proprietà margin-bottom nel selettore seguente:
.search-result {
margin-bottom: 20px;
}
Cambia l’aspetto del testo del risultato
Modifica o aggiungi le proprietà di testo nel seguente selettore:
.search-result {
font-size: 105%;
font-family: Arial, Helvetica, sans-serif;
}
Cambia il colore dei link dei risultati
Aggiungi o modifica la proprietà del colore nel seguente selettore:
.search-result a {
color: #484;
}
Breadcrumb
I breadcrumb aiutano gli utenti a navigare tra i contenuti del centro assistenza. Se vuoi, puoi rimuovere i breadcrumb. Per maggiori informazioni, consulta l’ helper breadcrumb nella guida ai modelli del Centro assistenza.
Torna al sommario.
Cambia lo spazio sopra e sotto i breadcrumb
Aggiungi o modifica le proprietà di spaziatura interna nel seguente selettore:
.breadcrumbs {
padding-top; 20px;
padding-bottom: 16px;
}
Cambia l’aspetto del testo breadcrumb
Modifica o aggiungi le proprietà di testo nel seguente selettore:
.breadcrumbs li {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
Cambia il colore dei link breadcrumb
Aggiungi il selettore e la proprietà seguenti:
.breadcrumbs li a {
color: #484;
}
Cambia il carattere del puntatore (>) nei breadcrumb
Cambia le proprietà del colore e del contenuto nel seguente selettore:
.breadcrumbs li + li:before {
color: #158EC2;
content: ">>";
}
Elenchi di articoli
A seconda del tema, gli elenchi di articoli vengono usati nella home page, nelle pagine di destinazione delle categorie e nelle pagine di destinazione delle sezioni.
Torna al sommario.
Cambia lo spazio intorno all’elenco di articoli
Aggiungi o modifica i seguenti selettori e le proprietà di spaziatura interna :
.article-list {
padding-left: 16px;
padding-right; 20px;
}
Cambia la spaziatura tra gli articoli
Modifica la proprietà margin-bottom nel seguente selettore:
.article-list > li {
margin-bottom: 10px;
}
Cambia l’aspetto dei link agli articoli
Modifica o aggiungi le proprietà di testo nel seguente selettore:
.article-list > li {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
Cambia il colore dei link agli articoli
Aggiungi il selettore e la proprietà seguenti:
.article-list li a {
color: #FFF;
}
Articoli della Knowledge base
Puoi cambiare l’aspetto degli articoli nella Knowledge base.
Torna al sommario.
Cambia l’aspetto dei titoli degli articoli
Aggiungi o modifica il selettore e le proprietà seguenti:
.article-header h1 {
color: #993;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
}
Cambia l’aspetto del testo dell’articolo
Aggiungi o modifica il selettore e le proprietà seguenti:
.article-body {
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
Cambia il colore dei link agli articoli
Aggiungi o modifica il selettore e la proprietà seguenti:
.article-body a {
color: #930;
}
Cambia l’aspetto del nome dell’autore
Aggiungi o modifica il selettore e le proprietà seguenti:
.article-author a {
color: #669;
font-family: Georgia, Times New Roman, serif;
font-size: 16px;
}
Cambia l’aspetto dell’ultima stringa aggiornata
Aggiungi o modifica il selettore e le proprietà seguenti:
.article-updated {
color: #CCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
}
Cambia l’aspetto di “Questo articolo è stato utile?”
Aggiungi o modifica il selettore e le proprietà seguenti:
.article-votes-question {
color: #763;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
Cambia l’aspetto del contatore dei voti
Esempio: "6 su 8 l'hanno trovato utile". Aggiungi o modifica il selettore e le proprietà seguenti:
.article-vote-label {
font-family: Georgia, Times New Roman, serif;
font-size: 10px;
}
Cambia l’aspetto di “Hai altre domande? Invia una richiesta"
Aggiungi o modifica il selettore e le proprietà seguenti:
.article-more-questions {
font-family: Arial, Helvetica, sans-serif;
font-size: 105%;
}
Cambia l’aspetto del titolo dei commenti
Aggiungi o modifica il selettore e le proprietà seguenti:
.article-comments h2 {
color: #666;
font-family: Georgia, Times New Roman, serif;
font-size: 130%;
}
Cambia l’aspetto del testo del commento
Aggiungi o modifica il selettore e le proprietà seguenti:
.comment-body {
color: #666;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
Domande e risposte della community
Puoi cambiare l’aspetto dei contenuti della community.
Torna al sommario.
Cambia l’aspetto dei titoli delle domande
Aggiungi o modifica il selettore e le proprietà seguenti:
.question-title {
color: #484;
font-family: Verdana, Geneva, sans-serif;
font-size: 120%;
}
Cambia l’aspetto del testo della domanda
Aggiungi o modifica il selettore e le proprietà seguenti:
.question-text {
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
}
Cambia il colore dei link alle domande
Aggiungi o modifica il selettore e la proprietà seguenti:
.question-text a {
color: #484;
}
Cambia l’aspetto del nome dell’autore della domanda
Aggiungi o modifica il selettore e le proprietà seguenti:
.question-author {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
Per cambiare il colore del link, aggiungi o modifica il selettore e la proprietà seguenti:
.question-author a {
color: #484;
}
Poiché il nome dell’autore della domanda, il tempo trascorso dalla pubblicazione della domanda e il link di condivisione sono in genere raggruppati in una pagina, è consigliabile che tutti e tre gli elementi abbiano lo stesso aspetto. A tale scopo, usa il selettore combinato seguente:
.question-author, .question-published, .question-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
Cambia l’aspetto del tempo trascorso dalla pubblicazione della domanda
Aggiungi o modifica il selettore e le proprietà seguenti:
.question-published {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
Cambia l’aspetto del link di condivisione della domanda
Aggiungi o modifica il selettore e le proprietà seguenti:
.question-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
Cambia l’aspetto dell’intestazione delle risposte
Aggiungi o modifica il selettore e le proprietà seguenti:
.answer-list-heading {
color: #4CC;
font-family: Verdana, Geneva, sans-serif;
font-size: 105%;
}
Cambia l’aspetto del testo della risposta
Aggiungi o modifica il selettore e le proprietà seguenti:
.answer-text {
color: #333;
font-family: Tahoma, Geneva, sans-serif;
font-size: 105%;
}
Cambia l’aspetto del nome dell’autore della risposta
Aggiungi o modifica il selettore e le proprietà seguenti:
.answer-author {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
Per cambiare il colore del link, aggiungi o modifica il selettore e la proprietà seguenti:
.answer-author a {
color: #484;
}
Poiché il nome dell'autore della risposta, il tempo trascorso dalla pubblicazione della risposta e il link di condivisione sono in genere raggruppati in una pagina, è consigliabile che tutti e tre gli elementi abbiano lo stesso aspetto. A tale scopo, usa il selettore combinato seguente:
.answer-author, .answer-published, .answer-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
Cambia l’aspetto del tempo trascorso dalla pubblicazione della risposta
Aggiungi o modifica il selettore e le proprietà seguenti:
.answer-published {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
Cambia l’aspetto del link di condivisione della risposta
Aggiungi o modifica il selettore e le proprietà seguenti:
.answer-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
Avvertenza sulla traduzione: questo articolo è stato tradotto usando un software di traduzione automatizzata per fornire una comprensione di base del contenuto. È stato fatto tutto il possibile per fornire una traduzione accurata, tuttavia Zendesk non garantisce l'accuratezza della traduzione.
Per qualsiasi dubbio sull'accuratezza delle informazioni contenute nell'articolo tradotto, fai riferimento alla versione inglese dell'articolo come versione ufficiale.