Guida CSS per il centro assistenza

Disponibile con i piani Suite Growth e superiori Disponibile con tutti i piani Guide

Puoi personalizzare facilmente l’aspetto del tuo centro assistenza usando i fogli di stile a cascata (CSS). Questa guida è stata ideata per aiutarti a dare al tuo centro assistenza l’aspetto che desideri.

Nota: agli utenti che beneficiano di un periodo di prova viene offerto il piano Professional, che include opzioni di modifica del codice. Tuttavia, non potranno più accedere a tale funzionalità se acquistano Suite Team.

Per accedere e modificare CSS in Guide, consulta Personalizzazione di CSS o JavaScript.

Se non conosci CSS o hai bisogno di un ripasso, dai un’occhiata ai seguenti tutorial per tenerti aggiornato:

Introduzione a 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 tu stesso.
Il tutorial per principianti CSS offre quanto basta per iniziare.

Puoi anche personalizzare l’aspetto del centro assistenza usando il linguaggio dei modelli del Centro assistenza o JavaScript:

Sommario

La guida è organizzata in sezioni che coprono gli elementi di un centro assistenza. Ogni sezione include codice CSS che puoi incollare direttamente nel foglio di stile del tema. Usa il codice così com’è o modificalo per personalizzarlo.

Questa guida non è esaustiva. 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

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à colore dello sfondo nei seguenti selettori.

Intestazione:

.header {
  background-color: #666;
}

Piè di pagina:

.footer {
  background-color: #333;
}

Modifica l’altezza dell’intestazione o del piè di pagina

Modifica o aggiungi la proprietà altezza 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à margine inferiore e margine superiore 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;
}

Modifica l’aspetto del link Invia una richiesta

Il modello intestazione.hbs include una versione desktop e una versione per dispositivi mobili dell’intestazione nello stesso modello per renderlo reattivo. La versione desktop è contenuta in un div con una classe denominata nav-wrapper-desktop e la versione per dispositivi mobili è in un div con una classe denominata nav-wrapper-mobile. Ogni div contiene un link Invia una richiesta distinto. Per cambiare l’aspetto del link, devi creare le versioni desktop e mobile della regola CSS e aumentare la specificità dei relativi selettori.

Aggiungi i seguenti selettori nel file stile.css e modifica le proprietà del testo:

.nav-wrapper-desktop a.submit-a-request {
  font-size: 14px;
  color: green;
}

.nav-wrapper-mobile a.submit-a-request {
  font-size: 12px;
  color: green;
}

Nascondi il link Invia una richiesta

Aggiungi i seguenti selettori nel file stile.css:

.nav-wrapper-desktop a.submit-a-request {
  display:none;
}

.nav-wrapper-mobile a.submit-a-request {
  display:none;
}

Cambia l’aspetto del link Accedi

Aggiungi o modifica le proprietà del testo nel seguente selettore:

.login {
  font-size: 14px;
  color: green;
}

Cambia le dimensioni del logo

Sebbene le dimensioni dell’immagine del logo consigliate siano 200 x 50 px, puoi sovrascrivere questa impostazione predefinita, se necessario.

Nota: Per usare un logo più grande delle dimensioni consigliate, devi ospitare l’immagine del logo in un luogo esterno all’istanza di Zendesk Support.

Modificare le dimensioni del logo

In Guide, fai clic sull’icona Personalizza aspetto () 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à altezza nel selettore “.logo img” in modo che corrisponda all’altezza dell’immagine.
Fai clic su Salva.

Cerca

La casella di ricerca cerca i contenuti sia nella Knowledge base che nella community e visualizza i link in una pagina di risultati. Se lo desideri, puoi rimuovere la casella di ricerca. Per ulteriori informazioni, consulta l’helper per la ricerca nella guida Modelli del centro assistenza.

Torna al Sommario.

Modifica la larghezza o l’altezza del campo di ricerca

Modifica 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;
}

Modifica il colore di sfondo del campo di ricerca

Modifica 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;
}

Modifica l’aspetto del testo di ricerca

Modifica o aggiungi le proprietà del 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;
}

Modifica 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;
}

Modifica l’aspetto delle parole chiave evidenziate nei risultati di ricerca

I termini evidenziati nei risultati di ricerca vengono inseriti nell’elemento incorporato <em> nel contenitore .search-result-description. Se vuoi che le evidenziazioni appaiano in grassetto con uno sfondo giallo, procedi come segue:

.search-result-description em {  
  font-weight: bold;
  background-color: #FFF3CA;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

Modifica l’aspetto delle intestazioni della Knowledge base e della community

Aggiungi o modifica le proprietà del testo nel seguente selettore:

.search-results-subheading {
  font-size: 24px;
  font-family: Tahoma, Arial, sans-serif;
}

Modifica la spaziatura tra i risultati

Aggiungi una proprietà margine inferiore nel selettore seguente:

.search-result {
  margin-bottom: 20px;
}

Modifica l’aspetto del testo del risultato

Modifica o aggiungi le proprietà del testo nel seguente selettore:

.search-result {
  font-size: 105%;
  font-family: Arial, Helvetica, sans-serif;
}

Modifica il colore dei link dei risultati

Aggiungi o modifica la proprietà del colore nel seguente selettore:

.search-result a {
  color: #484;
}

Percorso breadcrumb

I percorsi breadcrumb aiutano gli utenti a navigare tra i contenuti del centro assistenza. Se lo desideri, puoi rimuovere i percorsi breadcrumb. Per ulteriori informazioni, consulta l’helper per i percorsi breadcrumb nella guida Modelli del centro assistenza.

Torna al Sommario.

Modifica lo spazio sopra e sotto il percorso breadcrumb

Aggiungi o modifica le proprietà di spaziatura interna nel seguente selettore:

.breadcrumbs {
  padding-top; 20px;
  padding-bottom: 16px;
}

Modifica l’aspetto del testo del percorso breadcrumb

Modifica o aggiungi le proprietà del testo nel seguente selettore:

.breadcrumbs li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Modifica il colore dei link del percorso breadcrumb

Aggiungi il selettore e la proprietà seguenti:

.breadcrumbs li a {
  color: #484;
}

Modifica il carattere del puntatore (>) nel percorso breadcrumb

Modifica 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.

Modifica lo spazio intorno all’elenco degli articoli

Aggiungi o modifica il selettore e le proprietà di spaziatura interna seguenti:

.article-list {
  padding-left: 16px;
  padding-right; 20px;
}

Modifica la spaziatura tra gli articoli

Modifica la proprietà margine inferiore nel selettore seguente:

.article-list > li {
  margin-bottom: 10px;
}

Modifica l’aspetto dei link agli articoli

Modifica o aggiungi le proprietà del testo nel seguente selettore:

.article-list > li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Modifica il colore dei link agli articoli

Aggiungi il selettore e la proprietà seguenti:

.article-list li a {
  color: #FFF;
}

Articoli della Knowledge base

Puoi modificare l’aspetto degli articoli nella Knowledge base.

Torna al Sommario.

Modifica 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;
}

Modifica 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;
}

Modifica il colore dei link agli articoli

Aggiungi o modifica il selettore e la proprietà seguenti:

.article-body a {
  color: #930;
}

Modifica 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;
}

Modifica 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;
}

Modifica l’aspetto di “Questo articolo è stato utile?”

Aggiungi o modifica il selettore e le proprietà seguenti:

.article-vote-question {
  color: #763;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

Modifica 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-count {
  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%;
}

Modifica 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%;
}

Modifica 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.

Modifica 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%;
}

Modifica l’aspetto del testo delle domande

Aggiungi o modifica il selettore e le proprietà seguenti:

.question-text {
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

Modifica il colore dei link alle domande

Aggiungi o modifica il selettore e la proprietà seguenti:

.question-text a {
  color: #484;
}

Modifica 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 generalmente raggruppati in una pagina, è opportuno che tutti e tre gli elementi appaiano uguali. A tale scopo, usa il seguente selettore combinato:

.question-author, .question-published, .question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Modifica 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;
}

Modifica l’aspetto del link alla domanda di condivisione

Aggiungi o modifica il selettore e le proprietà seguenti:

.question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Modifica 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%;
}

Modifica 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%;
}

Modifica 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 generalmente raggruppati in una pagina, è opportuno che tutti e tre gli elementi appaiano uguali. A tale scopo, usa il seguente selettore combinato:

.answer-author, .answer-published, .answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Modifica 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;
}

Modifica l’aspetto del link alla risposta condivisa

Aggiungi o modifica il selettore e le proprietà seguenti:

.answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}