Guide › Modificare singoli elementi

 

Per modificare le caratteristiche grafiche di un singolo elemento di Jimdo, senza però modificare tutti quelli simili tramite le funzioni di Stile, occorre passare attraverso la sezione Impostazioni > Modifica HEAD. Questo procedimento richiede un minimo di conoscenza dei codici HTML e CSS. Per ingrandire uno screenshot, cliccaci sopra. 

 

Jimdo permette alcune funzioni più o meno basilari di stile e di inserimento contenuti. È possibile intervenire sui parametri generali dello stile di uno specifico contenuto, ad esempio per mettere in risalto una sezione o fare delle piccole migliorie. Questo procedimento è un po’ macchinoso e richiede una discreta conoscenza dei linguaggi HTML e CSS e non è adatto per i principianti. Inoltre, questo tipo di modifiche dev’essere considerato come eccezionale e non bisogna abusarne, per evitare di appesantire il sito o di avere problemi di compatibilità.

 

 

Clicca su un’immagine per ingrandirla.


In questa guida di esempio proveremo a cambiare lo sfondo e il colore del titolo, pur mantenendo inalterate le impostazioni di stile di tutti gli altri titoli del sito. Questa guida tratta ovviamente solo una delle tante applicazioni che un procedimento come questo può avere: capita infatti di dover cambiare non solo il colore, ma anche font, dimensioni, allineamenti e altre caratteristiche di un solo elemento.


Per prima cosa dobbiamo individuare il “nome” univoco (in gergo: id) dell’elemento che vogliamo modificare. Entriamo in modalità visitatore (cioè né in modalità Amministratore né in modalità Anteprima) e facciamo click destro sull’elemento che vogliamo modificare. Selezioniamo quindi il comando Ispeziona elemento – o uno simile, a seconda del proprio browser.


Attenzione!
Da ora in avanti il procedimento di modifica, se fatto da mani inesperte, potrebbe causare problemi al tuo sito. Se decidi di proseguire, lo fai a tuo rischio e pericolo! Se hai bisogno, chiedi aiuto a un professionista o contattami.


Tramite la finestra di ispezione del contenuto HTML, individuiamo la stringa di codice del contenuto che vogliamo modificare. Nel nostro caso è quella evidenziata in blu. Di norma, tutti i componenti Jimdo hanno un proprio id: copiamolo. Nel nostro caso è cc-m-header-12085047326.

 

Qualora non fosse presente un codice univoco, è necessario lavorare attraverso la tecnica della cascata (e cioè identificare l’id genitore e il tipo di elemento o il nome di classe dell’elemento che ci interessa). Questa procedura è più complessa e, in questa sede, non è opportuno spiegarla a chi per le prime volte si approccia al mondo della programmazione, al fine di evitare danni.

 


 

A questo punto andiamo in Impostazioni → Modifica Head e indichiamo gli elementi che vogliamo modificare. Se abbiamo individuato soltanto un id, allora sarà sufficiente indicare #id. Al posto dei tre puntini andremo a inserire i parametri che vogliamo modificare. La dicitura !important; al termine della stringa permette di sovrascrivere le impostazioni di stile di Jimdo.

 

I parametri che mediamente occorre modificare sono:

  • background-color: COLORE !important; per il colore di sfondo in formato hex, ad esempio #CC0000.
  • border: Npx solid COLORE !important; per il bordo (con N = spessore del bordo di pixel e COLORE in hex), ad esempio 2px solid #CC0000.
  • color: COLORE !important; per il colore del testo in formato hex➚.
  • font-family: "CARATTERE" !important; per il font, ad esempio "Helvetica".
  • text-decoration: VALORE !important; per definire, ad esempio, una sottolineatura (underline).
  • font-size: Npx !important; per la dimensione del testo (con N = dimensione di pixel), ad esempio 16px.
  • display: none !important; per nascondere un contenuto.

 

Maggiori informazioni
Sul sito di CSSreference è possibile trovare tutti i parametri CSS che si possono modificare.

 

Impostazioni → Modifica Head
<style type="text/css">
   #id {
      ...
   }
</style>

Abbiamo detto che, nel nostro esempio, vogliamo modificare il colore di sfondo e il colore del testo del titolo. Pertanto, la sintassi dovrà essere la seguente:

Impostazioni → Modifica Head
#cc-m-header-12085047326 {
  background-color: #C91652 !important;
  color: #FFFFFF !important;
}

Nel codice riportato è facile intuire i parametri utilizzati:

  • cc-m-header-12085047326 è l'id dell'elemento;
  • #C91652 è il colore di sfondo scelto in formato hex➚;
  • #FFFFFF è il nuovo colore (bianco) del testo del titolo.

 

 


 

Certamente potrai immaginare quanto tempo ci sia voluto per realizzare questa guida.

Se ti è stata utile, per favore considera una donazione per sostenere i miei progetti.