Container formatieren
Sie können Formatierungen über das Mashup-Stilthema oder direkt im Fensterbereich Stileigenschaften auf einen Container anwenden. Die Verwendung von Stileigenschaften überschreibt die globale Themaformatierung für ein bestimmtes Widget. Standardmäßig werden Container mit dem Mashup-Stilthema formatiert, aber Sie können auch Stildefinitionen verwenden. Die Eigenschaft UseTheme im Fensterbereich Eigenschaften steuert den Themenmodus für den Container.
Um Stilthema-Eigenschaften für einen Container anzuzeigen, gehen Sie wie folgt vor:
1. Wählen Sie einen Container im Fensterbereich Explorer aus.
◦ Sie können auch auf einen leeren Bereich innerhalb eines Containers klicken.
2. Klicken Sie auf den Fensterbereich Stileigenschaften.
3. Erweitern Sie den Status Basis. Die Stileigenschaften werden im Abschnitt Container aufgelistet.
Sie können von der Stilthemaformatierung zu Stildefinitionen wechseln. Um Stildefinitionen zu verwenden, gehen Sie wie folgt vor:
1. Wählen Sie einen Container aus.
2. Deaktivieren Sie im Fensterbereich Eigenschaften das Kontrollkästchen UseTheme.
3. Klicken Sie auf den Fensterbereich Stileigenschaften.
Stildefinitionen für den Container werden jetzt anstelle von Stileigenschaften angezeigt.
Benutzerdefinierte CSS
Sie können verschiedene Kombinationen von Stilen auf Container anwenden, z.B. benutzerdefiniertes CSS, Stilthemen und Stileigenschaften. Im Folgenden finden Sie eine Liste der Priorität von Formatierungsregeln, von der höchsten zur niedrigsten:
|
Priorität
|
Formatierungsmethode
|
Beschreibung
|
|---|---|---|
|
Höchste
|
Stileigenschaft
|
Stile, die mithilfe des Fensterbereichs Stileigenschaften auf einen Container angewendet werden. Sie können Stileigenschaften verwenden, um die Standardstile zu überschreiben, die über das Stilthema angewendet werden.
|
|
Benutzerdefiniertes Mashup-CSS
|
CSS-Regeln, die auf der Registerkarte Benutzerdefiniertes CSS einer Mashup-Entität angewendet werden. Eine Mashup-CSS-Regel überschreibt eine Stilthema-CSS-Regel, wenn beide Regeln die gleiche Genauigkeit aufweisen.
|
|
|
Benutzerdefiniertes Stilthema-CSS
|
CSS-Regeln, die auf der Registerkarte Benutzerdefiniertes CSS einer Stilthema-Entität angewendet werden.
|
|
|
Niedrigste
|
Stilthema
|
Stile, die vom Stilthema geerbt werden, das auf das Mashup angewendet wird. Sie können Themen verwenden, um konsistente Standardstile auf alle Container in einem Mashup anzuwenden.
|
Im Allgemeinen hat das CSS auf Mashup-Ebene eine höhere Priorität als das Stilthema-CSS. Die Priorität kann sich jedoch je nach der Genauigkeit der CSS-Regeln ändern. Sie können beispielsweise die Genauigkeit einer benutzerdefinierten CSS-Regel erhöhen, indem Sie die Regel !important wie folgt einer Eigenschaft hinzufügen:
.containerClass > .widget-content {
margin: 50px !important;
padding: 25px !important;
}
margin: 50px !important;
padding: 25px !important;
}
 |
Es wird dringend empfohlen, Stilthemen und Stileigenschaften zu verwenden, anstatt benutzerdefinierte CSS-Regeln zu schreiben.
|
Stileigenschaften
Sie können die folgenden Stileigenschaften angeben.
|
Eigenschaft
|
Beschreibung
|
|---|---|
|
background
|
Die Hintergrundfarbe des Containers.
|
|
border-color
|
Die Farbe der Randlinien.
|
|
border-radius
|
Der Radius der Randecken. Die Eigenschaft gilt für alle vier Ecken des Containers.
|
|
border-style
|
Der Stil der Randlinien. Sie können ihn auf Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Inherit oder None festlegen.
|
|
border-width
|
Die Breite der Randlinien.
|
Sie können Stileigenschaften verwenden, um die Auffüllung für den Container in ThingWorx 9.3.3 oder höher mit den folgenden Eigenschaften zu konfigurieren:
• padding-bottom
• padding-left
• padding-right
• padding-top
Weitere Informationen finden Sie unter Ränder und Auffüllung für Container konfigurieren.
Container-Stileigenschaften anpassen
Die folgende Tabelle listet die Stileigenschaftswerte für das Element flexcontainer auf, verglichen mit benutzerdefinierten Werten für einen formatierten Container.
|
Stil/Eigenschaft
|
Standard
|
Formatiert
|
|---|---|---|
|
Eigenschaften
|
• background–#ffffff
• border-color–inherit
• border-radius–None
• border-style–None
• border-width–None
|
• background–#cccccc
• border-color–#AAE09F
• border-radius–4px
• border-style–Solid
• border-width–4px
|
|
Vorschau
|
 |
 |
|
|
Die standardmäßigen Stileigenschaftswerte werden vom Mashup-Stilthema abgeleitet.
|