Personalizzazione del widget Pannelli a schede



Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche a un widget Pannelli a schede, essa non supporta le attività relative agli stili personalizzati. Se necessario, è possibile cambiare le regole CSS del widget Pannelli a schede e creare un widget avente lo stile preferito. Per un elenco più dettagliato delle attività relative agli stili, consultate www.adobe.com/go/learn_dw_sprytabbedpanels_custom_it.

Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryTabbedPanels.css. Durante la creazione di un widget Pannelli a schede Spry, Dreamweaver salva il file SpryTabbedPanels.css nella cartella SpryAssets del sito. Questo file contiene anche utili commenti relativi ai vari stili che possono essere applicati ai widget.

Nonostante sia possibile modificare facilmente le regole del widget Pannelli a schede direttamente nel file CSS associato, per modificare il CSS del widget è possibile anche utilizzare il pannello Stili CSS. Il pannello Stili CSS è utile per localizzare le classi CSS assegnate a parti differenti del widget, in particolar modo quando si utilizza la modalità Corrente del pannello.

Formattazione del testo del widget Pannelli a schede

Per definire lo stile del testo di un widget Pannelli a schede, impostare le proprietà dell'intero contenitore del widget, oppure le singole proprietà dei componenti del widget.

 Per modificare lo stile del testo di un widget Pannelli a schede, utilizzare la seguente tabella per localizzare la regola CSS appropriata, quindi aggiungere le proprietà e i valori dello stile di testo desiderato:

Testo da modificare

Regola CSS pertinente

Esempio di proprietà e valori da aggiungere

Testo nell'intero widget

.TabbedPanels

font: Arial; font-size:medium;

Testo nelle sole schede del pannello

.TabbedPanelsTabGroup o .TabbedPanelsTab

font: Arial; font-size:medium;

Testo nei soli pannelli di contenuto

.TabbedPanelsContentGroup o .TabbedPanelsContent

font: Arial; font-size:medium;

Modifica dei colori di sfondo del widget Pannelli a schede

 Per modificare i colori dello sfondo di parti differenti di un widget Pannelli a schede, utilizzare la seguente tabella per localizzare la regola CSS appropriata, quindi aggiungere o modificare come desiderato proprietà e valori del colore dello sfondo:

Colore da modificare

Regola CSS pertinente

Esempio di proprietà e valori da aggiungere o modificare

Colore di sfondo delle schede del pannello

.TabbedPanelsTabGroup o .TabbedPanelsTab

background-color: #DDD; (valore predefinito)

Colore di sfondo dei pannelli di contenuto

.Tabbed PanelsContentGroup o .TabbedPanelsContent

background-color: #EEE; (valore predefinito)

Colore di sfondo della scheda selezionata

.TabbedPanelsTabSelected

background-color: #EEE; (valore predefinito)

Colore di sfondo delle schede del pannello quando il cursore del mouse si trova su di esse

.TabbedPanelsTabHover

background-color: #CCC; (valore predefinito)

Limitazione della larghezza dei pannelli a schede

Per impostazione predefinita, il widget Pannelli a schede si espande fino a riempire lo spazio disponibile. Se necessario, è possibile limitare la larghezza di un widget Pannelli a schede impostando la proprietà width per il contenitore del pannello.

  1. Localizzare la regola CSS .TabbedPanels aprendo il file SpryTabbedPanels.css. Questa regola definisce le proprietà dell'elemento contenitore principale del widget Pannelli a schede.
    La regola può essere individuata anche selezionando il widget Pannelli a schede e cercandola nel pannello Stili CSS (Finestra > Stili CSS). Assicurarsi che il pannello sia impostato in modalità Corrente.
  2. Aggiungere una proprietà e un valore width alla regola, ad esempio width: 300px;.