Widget-CSS-Datei erstellen

1. Widget-CSS-Datei erstellen

Erstellen Sie im Widget-Ordner textbox-mit-link eine neue CSS-Datei textbox-mit-link.css. Fügen Sie in die Datei folgende CSS-Stile ein:

CSS

.textbox-mit-link span {
    display: block;
    padding: 10px 20px;
    background-color: #0983D3;
}
.textbox-mit-link span:hover {
    background-color: #F0694B;
}
.textbox-mit-link h2 {
    color: #ffffff;
}
.textbox-mit-link a,
.textbox-mit-link a:hover {
    color: #ffffff;
    text-decoration: none;
}

2. CSS-Stile der Bundle-Datei hinzufügen

Damit die CSS-Stile auch angewendet werden, müssen diese der CSS-Bundle-Datei hinzugefügt werden. Öffnen Sie dazu im Widget-Ordner die Datei widget.json und fügende folgenden Code hinzu:

JSON

"assets": [
	{
		"fileName": "textbox-mit-link.css",
		"mode": "Bundle",
		"order": 50
	}
],

JSON-Datei komplett

{
    "settings": {
        "category": "favs",
        "maincategory": "text",
        "showcssinputfields": false,
        "uiname": "Textbox mit Link"
    },
    "fields": [
        {
            "displayname": "Text",
            "name": "textfeld",
            "type": "html-wysiwyg-editor"
        },
        {
            "displayname": "Link",
            "name": "linkauswahl",
            "type": "url-selection"
        }
    ],
    "assets": [
        {
            "fileName": "textbox-mit-link.css",
            "mode": "Bundle",
            "order": 50
        }
    ],
    "itemTemplates": [
        {
            "fileName": "standard.html"
        }
    ]
}

3. Aktuelle Darstellung des Widgets

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind die Anpassungen am Widget sofort sichtbar. Klicken Sie anschließend auf Vorschau. Hier können Sie den Hover-Effekt der Hintergrundfarbe sehen und den eingegebenen Link prüfen.