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 certo elemento della pagina, sarà necessario per prima cosa, attivare la modalità di gestione di quello specifico elemento (Contenitore o Componente) attraverso l’apposito pulsante presente nel menu principale, selezionare l’elemento all’interno della pagina e cliccare sull’icona raffigurante un piccolo pennello presente nel R.O.C. di quello specifico elemento
In questo modo verrà infatti attivato, nella parte bassa della pagina, lo Style Editor attraverso cui poter intervenire sulle singole caratteristiche grafiche dell’elemento in esame.
Tali caratteristiche sono raggruppate in diverse categorie logiche attivabili cliccando sulla corrispondente etichetta presente sulla sinistra della maschera.
Nella Barra di stato dello Style Editor sono inoltre presenti anche tutta una serie di pulsanti che, oltre a fornire informazioni utili relativamente, ad esempio alla Pagina e/o alla Variante in cui si sta lavorando, mettono a disposizione dell’utente anche delle scorciatoie per accedere a varie sezione dell’applicativo.
Per maggiori informazioni in merito alle Varianti Sito si veda la relativa sezione “Live Editing – Varianti Sito” di questo manuale.
Per maggiori informazioni in merito ai Temi Grafici si veda la relativa sezione “Live Editing – Temi” di questo manuale.
Per maggiori informazioni in merito ai Layout si veda la relativa sezione “Live Editing – Layout” di questo manuale
Una volta impostati, per le varie proprietà grafiche dell’elemento selezionato i valori desiderati, sarà necessario per prima cosa confermarli cliccando per questo sul corrispondente check posto immediatamente a fianco di queste stesse proprietà (1) e, successivamente, salvarli in maniera definitiva cliccando sull’icona raffigurante un piccolo dischetto posta nella parte alta dello Style Editor (2).
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: sarà comunque possibile annullare in un qualsiasi momento (prima ovviamente della conferma definitiva) le modifiche apportate, utilizzando ad esempio il tasto ESC, disabilitando la modalità di gestione (dei Componenti o dei Contenitori) attualmente attiva oppure utilizzando la piccola freccia verde posta a fianco del dischetto di salvataggio
Una volta modificata una qualsiasi proprietà grafica dell’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.
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.
Per maggiori informazioni sulle singole proprietà CSS gestibili direttamente dallo Style Editor di Passweb si veda anche il relativo capitolo (Proprietà CSS modificabili da Style Editor) di questo manuale.