Widget „Paletten mit Registerkarten“ anpassen



Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesem Widget vornehmen, benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können allerdings die CSS-Regeln für diese Widgets ändern und ihren Stil individuell anpassen. Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprytabbedpanels_custom_de.

Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryTabbedPanels.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Paletten mit Registerkarten“ erstellen, speichert Dreamweaver die Datei „SpryTabbedPanels.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das jeweilige Widget.

Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.

Textstil für das Widget „Paletten mit Registerkarten“

Sie können den Textstil eines Widgets vom Typ „Paletten mit Registerkarten“ bearbeiten, indem Sie Eigenschaften für den gesamten Widget-Container oder die Eigenschaften der Widget-Komponenten einzeln konfigurieren.

 Um den Textstil eines solchen Widgets zu bearbeiten, suchen Sie in folgender Tabelle nach der richtigen CSS-Regel und fügen Sie Ihre eigenen Eigenschaften und Werte hinzu:

Zu ändernder Text

Dazugehörige CSS-Regel

Beispiel für hinzuzufügende Eigenschaften/Werte

Text im gesamten Widget

.TabbedPanels

font: Arial; font-size:medium;

Nur Text in Palettenregistern

.TabbedPanelsTabGroup oder .TabbedPanelsTab

font: Arial; font-size:medium;

Nur Text in den Inhaltsfenstern

.TabbedPanelsContentGroup oder .TabbedPanelsContent

font: Arial; font-size:medium;

Hintergrundfarben des Widgets „Paletten mit Registerkarten“ ändern

 Um die Hintergrundfarben verschiedener Bereiche dieses Widgets zu ändern, suchen Sie in folgender Tabelle nach der richtigen CSS-Regel und fügen Sie Ihre eigenen Eigenschaften und Werte für die Hintergrundfarben hinzu:

Zu ändernde Farbe

Dazugehörige CSS-Regel

Beispiel für hinzuzufügende/zu ändernde Eigenschaften/Werte

Hintergrundfarbe der Palettenregister

.TabbedPanelsTabGroup oder .TabbedPanelsTab

background-color: #DDD (dies ist der Standardwert)

Hintergrundfarbe der Inhaltsfenster

.Tabbed PanelsContentGroup oder .TabbedPanelsContent

background-color: #EEE (dies ist der Standardwert)

Hintergrundfarbe des ausgewählten Registers

.TabbedPanelsTabSelected

background-color: #EEE (dies ist der Standardwert)

Hintergrundfarbe der Palettenregister beim Zeigen mit der Maus

.TabbedPanelsTabHover

background-color: #CCC (dies ist der Standardwert)

Breite von Paletten mit Registerkarten beschränken

Widgets vom Typ „Paletten mit Registerkarten“ passen sich standardmäßig dem verfügbaren Raum an. Sie können die Breite eines solchen Widgets allerdings einschränken, indem Sie die entsprechende Eigenschaft im Container anpassen.

  1. Suchen Sie nach der CSS-Regel „.TabbedPanels“ in der Datei „SpryTabbedPanels.css“. Diese Regel definiert die Eigenschaften für das Haupt-Containerelement des Widgets Paletten mit Registerkarten.
    Sie können die Regel auch suchen, indem Sie das Widget auswählen und das Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“) anzeigen. Dazu muss sich das Bedienfeld im Modus „Aktuell“ befinden.
  2. Fügen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.