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. 

 

Proviamo a vedere come cambiare, in questa pagina, 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 questo esempio è stato utilizzato il browser Safari: altri browser potrebbero avere comandi leggermente diversi.

 

 

 Per prima cosa facciamo click destro (o ctrl+click) sull'elemento che vogliamo modificare. Selezioniamo quindi, dal menu a tendina, 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: Gopale declina ogni responsabilità! Se hai bisogno, chiedi aiuto.

Tramite l'Inspector Web, individuiamo la stringa di codice del contenuto che vogliamo modificare. Nel nostro caso è quella evidenziata in blu. Se la stringa di codice ha un id –cosa che spesso i componenti di Jimdo hanno –, copiamo e incolliamo il nome univoco all'interno delle virgolette, ad esempio: <div id="NOME ID">...</div>. Nel nostro caso l'id è cc-m-header-12085047326.

 

Se per caso non fosse presente alcun id, individuiamo l'elemento con id in cui è contenuto ciò che ci interessa. Identifichiamo anche il parametro class dell'elemento in questione, ad esempio:

 

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 #nomeid; se invece abbiamo un parametro id e un parametro class, dovremo indicarli nell'ordine #nomeid .nomeclass. Ecco la struttura da adottare:

 

I parametri che mediamente occorre modificare sono:

background-color: COLORE !important; per il colore di sfondo in formato hex,

border: Npx solid COLORE !important; per il bordo (con N = spessore del bordo di pixel e COLORE in hex),

color: COLORE !important; per il colore del testo in formato hex,

font-family: "CARATTERE" !important; per il font,

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),

display: none !important; per nascondere un contenuto.

 

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

Suggerimento aggiuntivo
Per modificare lo stile al passaggio del mouse, aggiungi :hover dopo l'ultima classe in esame, per esempio:
#nomeid .eventualenomeclass:hover {
  ...
}

 

 

Nel nostro caso, il codice avrà questa sintassi:

dove cc-m-header-12085047326 è l'id dell'elemento, #C91652 è il colore di sfondo scelto in formato hex e  #FFFFFF è il nuovo colore del testo del titolo.

 

 

Questo è il risultato ottenuto:



Hai trovato l'articolo utile?        No