Utilizzare regole CSS per gli stili visuali
copia linkTrascrizione
Abbiamo appreso che l’intera interfaccia grafica è creata con l’ausilio del linguaggio CSS: gli Stili Visuali sono un aiuto nella personalizzazione grafica, per chi è a digiuno del linguaggio o semplicemente per chi vuole raggiungere lo scopo con una via guidata; comunque alla fine, in compilazione, gli Stili vengono tradotti in stili inline o classi CSS.
Il template grafico ha quindi un foglio di stile base che possiamo trovare all’interno della cartella di output: il file è denominato rd3.css; questo è il foglio di stile principale a cui spesso se ne unisce uno secondario a seconda del browser di destinazione (troviamo ad esempio chrome.css, edge.css): apriamo il file con un editor di testo.
Come potete vedere il file è scritto in linguaggio CSS ed è composto da regole applicate ai selettori classici universali, di tipo, id, classi: una modifica di queste regole consente la modifica della parte grafica dell’applicazione.
Non è una operazione semplice, leggendo un foglio di stile, capire a quale elemento viene applicato: un valido aiuto è fornito dal browser e più precisamente dalla parte che è denominata inspector presente in Chrome, Firefox e Edge; quindi conviene eseguire l’applicazione e scoprire questo inspector.
Per attivare l’inspector usiamo il menu di Chrome Altri Strumenti -> Strumenti per sviluppatori: (come potrete appurare da soli l’inspector è uno strumento sicuramente complesso ma estremamente potente); la disposizione dei riquadri potrebbe cambiare a seconda della risoluzione del vostro monitor, però’ a grandi linee diciamo che è sempre presente un riquadro (nel mio caso ) superiore con il codice HTML che forma la pagina dell’applicazione (notate anche la selezione sulla riga del tag body) ed un riquadro (nel mio caso) nella parte inferiore con le regole CSS applicate all’elemento selezionato.
Facciamo una verifica, vorremmo scoprire come è disegnata la barra superiore dell’applicazione: dovremmo ricercare il tag HTML nel riquadro superiore (non è così semplice) meglio utilizzare il pulsante presente nell’angolo superiore sinistro dell’inspector: il pulsante svolge il compito di punta e scopri: punta nell’interfaccia e scopri il tag HTML nel codice: possiamo fare clic sul pulsante punta e scopri e poi dobbiamo fare clic sulla barra del titolo in interfaccia.
Scopriamo che la barra del titolo è costruita con un tag DIV con un attributo id = header-container ed una class chiamata header-container: nel riquadro inferiore è presente una regola CSS riferita agli identificativi cioè agli id (il simbolo # davanti a un identificatore specifica, in linguaggio CSS, che la regola sarà applicata agli elementi che posseggono tale id); è proprio la regola per l’identificatore header-container e tale regola è nel file rd3.css.
Con l’inspector aperto, possiamo fare una modifica al volo alla regola: impostiamo all’attributo background-color: la stringa red. Così facendo la barra titolo applicazione è diventata rossa! ovvio questa è una modifica temporanea, sarebbe bello si potesse rendere permanente!
Domanda: come possiamo sovrascrivere le regole css del file rd3.css ? Modificando il file rd3.css ? No in quanto il file fa parte del template grafico, ed ad ogni compilazione viene ripreso l’originale del template e quindi i nostri sforzi sarebbero annullati; qualsiasi personalizzazione deve avvenire nella cartella CUSTOM dell’applicazione. Ricordate ? Noi abbiamo una cartella custom applicazione, controlliamo tornando al progetto e con un doppio clic verifichiamo la presenza della cartella custom: perfetto è presente, altrimenti possiamo impostarla scegliendo una cartella qualsiasi sul file system.
Ora apro il filesystem della cartella con l’Albero di progetto, Tasto destro => Esplora directory custom: le personalizzazioni dei fogli di stile devono essere create dentro a un file chiamato custom.css: creo un file di testo e gli cambio il nome in custom.css.
Apriamo il file con notepad, o vi consiglio di installare Notepad++ o se preferite anche un editor più completo come Visual Studio Code per editare file CSS e di linguaggi.
Siccome il file custom.css sarà l’ultimo file css caricato dall’applicazione, le regole presenti in custom.css andranno a sovrascrivere quelle presenti in rd3.css, o nel caso non ci siano verranno aggiunte.
La scrittura del file custom.css deve avvenire con la sintassi del linguaggio CSS (il framework non utilizza preprocessori CSS come SASS o LESS quindi la sintassi dovrà essere CSS puro): noi vorremmo sovrascrivere la regola relativa all’id header-container quindi siccome è un id inizio con il canceletto metto l’identificatore e poi l’inizio e fine della regola è impostato con le parentesi graffe aperte e chiuse:
#header-container {
background-color: red;
}
Oltre che modificare, nel file possiamo anche creare nuove regole CSS: creiamo una regola di classe che chiamiamo miocolore (le regole di classe iniziano con il simbolo PUNTO).
.miocolore {
background-color: green;
color: white;
}
Salviamo il file come custom.css e riavviamo l’applicazione.
Vi ricordo che quando facciamo modifiche di questo tipo, cioè modifiche al CSS, spesso la cache del browser ci gioca un brutto scherzo: invece che caricare il nuovo file CSS usa il file presente in cache, e così le nostre modifiche non vengono apportate!!! Sempre meglio prima svuotare la cache.
Con Chrome per svuotare la cache, è necessario che l’inspector sia aperto, cosi possiamo usare il tasto destro del mouse sul pulsante Refresh e scegliere Svuota la cache e ricarica manualmente.
E comunque ecco che la modifica che abbiamo apportato alla barra del titolo è diventata permanente!
L’altra regola che abbiamo creato a cosa serve? Torniamo al progetto, creiamo un nuovo Stile Visuale, assegniamo il nome Stile Esterno ed invece che definire lo stile come abbiamo imparato impostiamo la proprietà Classe CSS: impostiamo il nome della o delle classi definite in custom.css che saranno applicate con questo stile visuale.
Scriviamo miocolore (mi raccomando senza il punto) alla voce Classe CSS: questo stile visuale possiamo applicarlo, come abbiamo fatto per il Rosso Bianco, doppio clic sulla videata Appartamenti, scegliamo il campo di pannello Ospiti Max (doppio clic) ed applichiamo lo stile visuale Stile Esterno.
Confermiamo il tutto e ricompiliamo, apriamo la videata Appartamenti, andiamo in dettaglio, è stato applicato? Avevamo scelto il colore verde di fondo e bianco del testo, sembra che qualcosa non sia andata a buon fine: facciamoci aiutare dall’inspector, puntiamo la casella Ospiti Max, la classe miocolore è impostata ma dobbiamo ricordarci che nei tag HTML gli stili denominati stili inline (cioè scritti insieme al tag) vincono sempre rispetto a qualsiasi classe applicata.
C'è’ solo una strada, quella di impostare la voce !important, nelle regole CSS se vogliamo che vincano sugli stili inline!
Riapriamo il file custom.css, e apportiamo la modifica.
non sembra aver funzionato correttamente: svuotiamo la cache, ma sembra ancora non funzionare, guardiamo l’inspector: c'è’ un problema che lo stile inline vince sempre su tutto. A meno che per l’impostazione sulla regola non abbiamo la voce !important;
.miocolore {
background-color: green !important;
color: white !important;
}
Salviamo il tutto, ricompiliamo e quando l’applicazione sarà riavviata vi consiglio anche di svuotare la cache, apriamo la videata Appartamenti, andiamo in dettaglio ed ecco il nostro colore verde!
Spero di aver trasmesso, anche coloro che sono a digiuno della tematica CSS, gli elementi necessari di base per personalizzare la grafica dell’applicazione e vi invito se siete curiosi, di cercare piccole guide del linguaggio CSS con cui potrete realizzare interfacce utenti super!
Il template grafico ha quindi un foglio di stile base che possiamo trovare all’interno della cartella di output: il file è denominato rd3.css; questo è il foglio di stile principale a cui spesso se ne unisce uno secondario a seconda del browser di destinazione (troviamo ad esempio chrome.css, edge.css): apriamo il file con un editor di testo.
Come potete vedere il file è scritto in linguaggio CSS ed è composto da regole applicate ai selettori classici universali, di tipo, id, classi: una modifica di queste regole consente la modifica della parte grafica dell’applicazione.
Non è una operazione semplice, leggendo un foglio di stile, capire a quale elemento viene applicato: un valido aiuto è fornito dal browser e più precisamente dalla parte che è denominata inspector presente in Chrome, Firefox e Edge; quindi conviene eseguire l’applicazione e scoprire questo inspector.
Per attivare l’inspector usiamo il menu di Chrome Altri Strumenti -> Strumenti per sviluppatori: (come potrete appurare da soli l’inspector è uno strumento sicuramente complesso ma estremamente potente); la disposizione dei riquadri potrebbe cambiare a seconda della risoluzione del vostro monitor, però’ a grandi linee diciamo che è sempre presente un riquadro (nel mio caso ) superiore con il codice HTML che forma la pagina dell’applicazione (notate anche la selezione sulla riga del tag body) ed un riquadro (nel mio caso) nella parte inferiore con le regole CSS applicate all’elemento selezionato.
Facciamo una verifica, vorremmo scoprire come è disegnata la barra superiore dell’applicazione: dovremmo ricercare il tag HTML nel riquadro superiore (non è così semplice) meglio utilizzare il pulsante presente nell’angolo superiore sinistro dell’inspector: il pulsante svolge il compito di punta e scopri: punta nell’interfaccia e scopri il tag HTML nel codice: possiamo fare clic sul pulsante punta e scopri e poi dobbiamo fare clic sulla barra del titolo in interfaccia.
Scopriamo che la barra del titolo è costruita con un tag DIV con un attributo id = header-container ed una class chiamata header-container: nel riquadro inferiore è presente una regola CSS riferita agli identificativi cioè agli id (il simbolo # davanti a un identificatore specifica, in linguaggio CSS, che la regola sarà applicata agli elementi che posseggono tale id); è proprio la regola per l’identificatore header-container e tale regola è nel file rd3.css.
Con l’inspector aperto, possiamo fare una modifica al volo alla regola: impostiamo all’attributo background-color: la stringa red. Così facendo la barra titolo applicazione è diventata rossa! ovvio questa è una modifica temporanea, sarebbe bello si potesse rendere permanente!
Domanda: come possiamo sovrascrivere le regole css del file rd3.css ? Modificando il file rd3.css ? No in quanto il file fa parte del template grafico, ed ad ogni compilazione viene ripreso l’originale del template e quindi i nostri sforzi sarebbero annullati; qualsiasi personalizzazione deve avvenire nella cartella CUSTOM dell’applicazione. Ricordate ? Noi abbiamo una cartella custom applicazione, controlliamo tornando al progetto e con un doppio clic verifichiamo la presenza della cartella custom: perfetto è presente, altrimenti possiamo impostarla scegliendo una cartella qualsiasi sul file system.
Ora apro il filesystem della cartella con l’Albero di progetto, Tasto destro => Esplora directory custom: le personalizzazioni dei fogli di stile devono essere create dentro a un file chiamato custom.css: creo un file di testo e gli cambio il nome in custom.css.
Apriamo il file con notepad, o vi consiglio di installare Notepad++ o se preferite anche un editor più completo come Visual Studio Code per editare file CSS e di linguaggi.
Siccome il file custom.css sarà l’ultimo file css caricato dall’applicazione, le regole presenti in custom.css andranno a sovrascrivere quelle presenti in rd3.css, o nel caso non ci siano verranno aggiunte.
La scrittura del file custom.css deve avvenire con la sintassi del linguaggio CSS (il framework non utilizza preprocessori CSS come SASS o LESS quindi la sintassi dovrà essere CSS puro): noi vorremmo sovrascrivere la regola relativa all’id header-container quindi siccome è un id inizio con il canceletto metto l’identificatore e poi l’inizio e fine della regola è impostato con le parentesi graffe aperte e chiuse:
#header-container {
background-color: red;
}
Oltre che modificare, nel file possiamo anche creare nuove regole CSS: creiamo una regola di classe che chiamiamo miocolore (le regole di classe iniziano con il simbolo PUNTO).
.miocolore {
background-color: green;
color: white;
}
Salviamo il file come custom.css e riavviamo l’applicazione.
Vi ricordo che quando facciamo modifiche di questo tipo, cioè modifiche al CSS, spesso la cache del browser ci gioca un brutto scherzo: invece che caricare il nuovo file CSS usa il file presente in cache, e così le nostre modifiche non vengono apportate!!! Sempre meglio prima svuotare la cache.
Con Chrome per svuotare la cache, è necessario che l’inspector sia aperto, cosi possiamo usare il tasto destro del mouse sul pulsante Refresh e scegliere Svuota la cache e ricarica manualmente.
E comunque ecco che la modifica che abbiamo apportato alla barra del titolo è diventata permanente!
L’altra regola che abbiamo creato a cosa serve? Torniamo al progetto, creiamo un nuovo Stile Visuale, assegniamo il nome Stile Esterno ed invece che definire lo stile come abbiamo imparato impostiamo la proprietà Classe CSS: impostiamo il nome della o delle classi definite in custom.css che saranno applicate con questo stile visuale.
Scriviamo miocolore (mi raccomando senza il punto) alla voce Classe CSS: questo stile visuale possiamo applicarlo, come abbiamo fatto per il Rosso Bianco, doppio clic sulla videata Appartamenti, scegliamo il campo di pannello Ospiti Max (doppio clic) ed applichiamo lo stile visuale Stile Esterno.
Confermiamo il tutto e ricompiliamo, apriamo la videata Appartamenti, andiamo in dettaglio, è stato applicato? Avevamo scelto il colore verde di fondo e bianco del testo, sembra che qualcosa non sia andata a buon fine: facciamoci aiutare dall’inspector, puntiamo la casella Ospiti Max, la classe miocolore è impostata ma dobbiamo ricordarci che nei tag HTML gli stili denominati stili inline (cioè scritti insieme al tag) vincono sempre rispetto a qualsiasi classe applicata.
C'è’ solo una strada, quella di impostare la voce !important, nelle regole CSS se vogliamo che vincano sugli stili inline!
non sembra aver funzionato correttamente: svuotiamo la cache, ma sembra ancora non funzionare, guardiamo l’inspector: c'è’ un problema che lo stile inline vince sempre su tutto. A meno che per l’impostazione sulla regola non abbiamo la voce !important;
.miocolore {
background-color: green !important;
color: white !important;
}
Salviamo il tutto, ricompiliamo e quando l’applicazione sarà riavviata vi consiglio anche di svuotare la cache, apriamo la videata Appartamenti, andiamo in dettaglio ed ecco il nostro colore verde!
Spero di aver trasmesso, anche coloro che sono a digiuno della tematica CSS, gli elementi necessari di base per personalizzare la grafica dell’applicazione e vi invito se siete curiosi, di cercare piccole guide del linguaggio CSS con cui potrete realizzare interfacce utenti super!
Ultima modifica: 21/11/2022 / Validità: da 20.0.7800
