Lo Style Editor (Editing Grafico) è lo strumento attraverso cui poter intervenire in maniera semplice ed immediata sulle proprietà CSS dei vari elementi presenti all’interno delle proprie pagine web, siano essi Contenitori, Componenti o Contenuti, in modo tale da poterli stilizzare e personalizzare graficamente secondo le proprie specifiche esigenze.
Come detto nei capitoli iniziali di questo manuale per poter accedere alle proprietà grafiche di un Contenitore o di un Componente della pagina, sarà necessario per prima cosa, attivare la modalità di gestione di quello specifico elemento, selezionare quindi l’elemento desiderato (direttamente all’interno della pagina oppure dall’albero dei componenti) e cliccare, infine, sull’icona raffigurante un piccolo pennello presente nel R.O.C. di quello stesso elemento
Operando in questo modo verrà così attivato, all’interno della pagina, lo Style Editor del Contenitore / Componente selezionato, strumento questo mediante il quale l’utente avrà poi la possibilità di intervenire sulle sue caratteristiche grafiche.
Ogni Componente / Contenitore è composto a sua volta da N elementi distinti selezionabili mediante il menu a tendina posto nella parte alta dello Style Editor.
Una volta selezionato l’elemento desiderato, il form sottostante consentirà di gestire tutte le caratteristiche grafiche di quello specifico elemento
Tali caratteristiche sono raggruppate in diverse categorie logiche attivabili cliccando sulla corrispondente etichetta presente sulla sinistra della maschera.
I pulsanti presenti nella barra degli strumenti dello Style Editor consentono rispettivamente di:
Cliccando nuovamente su questo pulsante sarà poi possibile riportare lo Style Editor alla sua opacità originale.
Per effettuare lo spostamento è sufficiente posizionarsi con il mouse sul pulsante in esame, tenere premuto il tasto sinistro e trascinare l’icona stessa nella posizione desiderata. Rilasciando il pulsante lo Style Editor verrà collocato nella nuova posizione.
ATTENZIONE! Passweb memorizza l’ultima posizione utile in cui è stato spostata lo Style Editor e la utilizza come posizione di visualizzazione iniziale per le successive attivazioni.
Consente di gestire le impostazioni di allineamento automatico (verticale e/o orizzontale) per gli elementi di primo livello interni al componente in esame.
Consente di gestire le opzioni di allineamento automatico del componente rispetto al suo elemento padre.
ATTENZIONE! Per maggiori informazioni relativamente alle opzioni di allineamento automatico dei componenti si veda anche la relativa sezione di questo manuale (“Live Editing per varianti responsive – Componenti – Azioni Componente – Allineamento Componenti Interni / Allineamento Componente”)
Una volta impostati i valori desiderati per una o più proprietà CSS presenti all’interno dello Style Editor, sarà necessario per prima cosa confermarli cliccando per questo sul corrispondente check posto immediatamente a fianco di queste stesse proprietà e, successivamente, salvarli in maniera definitiva cliccando sull’icona raffigurante un piccolo dischetto posta nella parte alta dello Style Editor.
Prima di salvare in maniera definitiva le modifiche apportate ad un certo elemento, Passweb chiederà all’utente un’ulteriore conferma relativamente al fatto di dover salvare tutte queste modifiche oppure solo ed esclusivamente quelle appositamente confermate:
NOTA BENE: è comunque possibile annullare in un qualsiasi momento (prima ovviamente della conferma definitiva) le modifiche apportate, utilizzando anche il tasto ESC
Una volta modificata una qualsiasi proprietà grafica per l’elemento selezionato, la corrispondente riga all’interno dello Style Editor verrà visualizzata con uno sfondo azzurrino in maniera tale da evidenziare che per quella specifica proprietà sono stati modificati i valori di default.
A fianco delle proprietà modificate rispetto al valore di default comparirà, inoltre, anche un’icona raffigurante una piccola X attraverso cui poter resettare le impostazioni della corrispondente proprietà CSS tornando così al suo valore di default.
In particolare resettando le impostazioni grafiche di una proprietà CSS per un contenitore strutturale, potrà comparire, nella parte alta dello Style Editor, un’ulteriore finestrella all’interno della quale verranno visualizzati, nei tre diversi livelli di profondità gestibili su di una singola pagina, i valori che assume attualmente la specifica proprietà CSS
NOTA BENE: secondo la logica propria dei fogli di stile la priorità più alta viene assegnata all’elemento più interno della struttura. In questo senso occorre quindi considerare che l’elemento “Pagina Corrente” ha una priorità più elevata rispetto all’elemento “Layout Corrente” che a sua volta ha una priorità più elevata dell’elemento “Tutte le pagine”.
Il valore correntemente applicato per la specifica proprietà CSS sarà quello non barrato (sempre l’ultimo dell’elenco).
Cliccando sulla piccola X a fianco dei tre diversi livelli verrà quindi eliminato il relativo valore e contemporaneamente verrà applicato quello immediatamente precedente fino ad arrivare all’eliminazione dei valori impostati su tutti e tre i livelli gestibili e al ripristino, per la proprietà CSS, del valore di default.
Il pulsante Reset Modifiche ( ) presente nella parte alta dello style editor consente, infine, di eliminare in blocco tutte le modifiche eventualmente apportate all’elemento del Contenitore / Componente su cui si sta lavorando
ATTENZIONE! il pulsante Reset Modifiche consente di eliminare unicamente le modifiche grafiche dell’elemento selezionato mediante il relativo menu a tendina
Nel momento in cui l’esigenza dovesse essere dunque quella di resettare interamente tutto il Componente / Contenitore, cancellando di fatto le modifiche grafiche apportate ad ogni suo elemento sarà necessario utilizzare il pulsante “Reset Modifiche” per ciascuno di essi.
ATTENZIONE! Nel caso in cui la proprietà CSS su cui si desidera intervenire non dovesse essere presente all’interno dello Style Editor è comunque possibile applicarla allo specifico elemento agendo direttamente a livello di codice e utilizzando per questo la sezione CSS del Layout associato alla pagina.