I modelli di sito web automatizzano il processo di progettazione delle pagine del tuo sito. Sebbene questo possa farti risparmiare tempo, potresti trovarti nella situazione in cui desideri modificare gli elementi di design in un modello, forse per riflettere il marchio e il marketing della tua attività. Nella maggior parte dei casi, si tratta di un’attività semplice che puoi eseguire anche con poca o nessuna esperienza di sviluppo. Per personalizzare il colore in un modello, modifica del codice CSS.
1
Individua il codice CSS per il tuo modello Web. I modelli Web utilizzano spesso codice organizzato in più file e cartelle. Il codice CSS di un modello determina i colori che appaiono al suo interno. Il codice CSS per i modelli viene normalmente salvato in file con estensione .css. Questi file possono essere conservati in una cartella con un nome informativo come “stili” o “css”, quindi cerca i file e le cartelle per il tuo modello finché non li trovi. Potrebbero essere presenti uno o più file CSS.
2
Individua le sezioni CSS che desideri modificare. Apri ogni file CSS per il tuo modello in un programma di editor di testo come Blocco note. Il codice CSS all’interno di questi file è organizzato in sezioni e ogni sezione definisce un particolare elemento o gruppo di elementi utilizzando i selettori CSS, con un selettore che appare all’inizio della sezione. La sintassi seguente mostra la selezione dei tipi di elemento, in questo caso gli elementi:
div {/ Dichiarazioni CSS /}
La seguente sintassi seleziona gli elementi con “intestazione” come attributo ID:
intestazione {
/ Dichiarazioni CSS /}
Il codice seguente seleziona gli elementi con “main” come attributo di classe:
.main {/ Dichiarazioni CSS /}
Il tuo CSS può contenere selettori più complessi, ma tutti usano queste strutture di sintassi di base.
3
Trova le dichiarazioni CSS che desideri modificare. All’interno di ogni sezione di selezione, ci sono una o più righe di dichiarazioni CSS. Ogni dichiarazione indica una proprietà e un valore. Le dichiarazioni di colore possono includere il colore del testo, come segue:
colore: # FF0000;
Questo determina un colore del testo di rosso brillante. I bordi e gli sfondi degli elementi possono anche includere dichiarazioni di colore, come segue:
bordo: 1px solido # 00FFFF; colore di sfondo: #CCCCCC;
In alcuni casi, CSS utilizza nomi di colore, ma la maggior parte dei file CSS utilizza indicatori di colore esadecimali o altri numerici.
4
Modifica i valori del colore nelle dichiarazioni CSS scelte. Modifica i valori di colore CSS esistenti per adattarli ai colori che desideri che il tuo sito contenga. Potresti trovare più semplice modificare una dichiarazione alla volta, aprendo una pagina del tuo modello HTML nel browser ogni volta che fai una modifica, per vedere l’effetto. Lavora a turno su ciascuna dichiarazione di colore, alterando i valori del colore per adattarli al design del sito scelto.
5
Salva i tuoi file CSS modificati e caricali sul server che ospita il tuo sito. Controlla ogni pagina del tuo sito per assicurarti di essere soddisfatto dei nuovi colori. Per apportare ulteriori modifiche, modifica i tuoi file CSS e caricali di nuovo.
Referenze
- W3Schools.com: CSS Selector Reference
- W3Schools.com: sintassi CSS
- W3Schools.com: colori CSS
Risorse
- W3Schools.com: ID CSS e classe
- W3C: selettori
Tip
- Una singola dichiarazione CSS può influire su più elementi nella progettazione di un sito.
Avvertenze
- Prima di apportare modifiche al codice del modello, potresti voler salvare una copia del modello nel suo stato originale nel caso in cui qualcosa vada storto.
Scrittore Bio
Sue Smith ha iniziato a scrivere nel 2000. Ha prodotto tutorial per aziende tra cui Apex Computer Training Software e articoli su argomenti di informatica per vari siti web. Smith ha un Master of Arts in lingua e letteratura inglese, nonché un Master of Science in information technology, entrambi presso l’Università di Glasgow.