Benutzerdefiniertes Google Kalender-Widget mit CSS
Wie bei allen unseren Widgets können Sie CSS verwenden, um ein benutzerdefiniertes Google Kalender-Widget zu erstellen, das sich an das Design jeder Webseite anpasst. Sie können verschiedene Stile des Google Kalender-Widgets über den Einstellungsbildschirm erstellen. Aber vielleicht müssen Sie auch das Design Ihrer Webseite noch genauer anpassen. Mit CSS können Sie fast jedes gewünschte Styling erreichen.
CSS-Klassen im Detail
Hier finden Sie die CSS-Klassen und die Struktur für die Erstellung eines benutzerdefinierten Google Kalender-Widgets:
Anweisungen zur Implementierung
1. Erstellen Sie eine CSS-Datei
Sie können Ihren Lieblingstexteditor oder Ihre Lieblingssoftware verwenden, um die CSS-Datei für Ihr benutzerdefiniertes Google Kalender-Widget zu erstellen. Notepad++ ist zum Beispiel ein idealer kostenloser Editor für eine CSS-Datei, aber es gibt auch andere online verfügbare Programme. Sie benötigen nur einen Texteditor, der keine Formatierungen wie z. B. die Schriftgröße usw. vornimmt.
Eine Basisdatei würde etwa so aussehen wie das Beispiel (siehe unten) und die einfache Anapssung wie im Beispiel bewirken. Das CSS ist in drei Abschnitte unterteilt: Container, Header und Content. Diese haben wir auskommentiert. Sie können diesen Code einfach in Ihren Code-/Texteditor kopieren und den Inhalt bearbeiten. Speichern Sie die Datei dann unter dem Namen myfilename.css (oder unter einem beliebigen Namen, der aber die Endung .css haben muss).
2. Laden Sie die CSS-Datei für Ihr benutzerdefiniertes Google Kalender-Widget auf Ihren Webserver hoch
Platzieren Sie die CSS-Datei auf Ihrem lokalen Server oder verwenden Sie einen Service wie Dropbox, um Ihre CSS-Datei extern zu speichern. Kopieren Sie die URL zur Verwendung im FeedWind-Einstellungsbildschirm.
3. Geben Sie die CSS-URL ein
Im Abschnitt “Allgemein” des Einstellungsbildschirms klicken Sie auf >Erweiterte Einstellungen. Geben Sie die URL des benutzerdefinierten CSS-Speicherorts in das Feld Benutzerdefinierter CSS-Link ein. Das neue Design wird im Vorschaubereich angezeigt.