Personnalisation du widget Panneaux à onglet



Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Panneaux à onglet, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Panneaux à onglet de manière à créer un widget adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprytabbedpanels_custom_fr.

Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryTabbedPanels.css. Dreamweaver enregistre le fichier SpryTabbedPanels.css dans le dossier SpryAssets de votre site dès que vous créez un widget Panneaux à onglets. Ce fichier contient également des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Panneaux à onglet dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

Définition du style du texte d'un widget Panneaux à onglet

Vous pouvez définir le style du texte d'un widget Panneaux à onglet en définissant des propriétés pour le conteneur entier du widget Panneaux à onglet, ou en définissant des propriétés distinctes pour chaque composant du widget.

 Pour modifier le style du texte d'un widget Panneaux à onglet, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez vos propriétés et valeurs de style du texte.

Texte à modifier

Règle CSS pertinente

Exemple de propriétés et de valeurs à ajouter

Texte dans le widget entier

.TabbedPanels

font: Arial; font-size:medium;

Texte dans les onglets du panneau uniquement

.TabbedPanelsTabGroup ou .TabbedPanelsTab

font: Arial; font-size:medium;

Texte dans les panneaux de contenu uniquement

.TabbedPanelsContentGroup ou .TabbedPanelsContent

font: Arial; font-size:medium;

Modification des couleurs d'arrière-plan du widget Panneaux à onglet

 Pour modifier les couleurs d'arrière-plan des différentes parties d'un widget Panneaux à onglet, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez ou modifiez les propriétés et les valeurs de couleur d'arrière-plan.

Couleur à modifier

Règle CSS pertinente

Exemple de propriété et de valeur à ajouter ou modifier

Couleur d'arrière-plan des onglets du panneau

.TabbedPanelsTabGroup ou .TabbedPanelsTab

background-color: #DDD; (Valeur par défaut)

Couleur d'arrière-plan des panneaux de contenu

.Tabbed PanelsContentGroup ou .TabbedPanelsContent

background-color: #EEE; (Valeur par défaut)

Couleur d'arrière-plan de l'onglet sélectionné

.TabbedPanelsTabSelected

background-color: #EEE; (Valeur par défaut)

Couleur d'arrière-plan des onglets du panneau ouvert lorsque le pointeur de la souris passe au-dessus de ceux-ci

.TabbedPanelsTabHover

background-color: #CCC; (Valeur par défaut)

Limitation de la largeur de panneaux à onglet

Par défaut, le widget Panneaux à onglet se développe pour occuper l'espace disponible. Vous pouvez toutefois limiter la largeur d'un widget Panneaux à onglet en définissant une propriété « width » pour le conteneur de l'accordéon.

  1. Recherchez la règle CSS .TabbedPanels en ouvrant le fichier SpryTabbedPanels.css. Cette règle définit les propriétés de l'élément conteneur principal du widget Panneaux à onglet.
    Vous pouvez également trouver cette règle en sélectionnant le widget Panneaux à onglet puis en examinant le panneau Styles CSS (Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.
  2. Ajoutez une propriété et une valeur de largeur (width) à la règle, par exemple width: 300px;.