Wenn du CSS beherrschst, kannst du Farben, Schriften und Größen des Widgets an deine Website anpassen.
So funktioniert es:
Füge CSS-Regeln auf deiner Seite hinzu, die den Selektor [data-portalize-widget] verwenden. Das Widget liest diese Werte und wendet sie an.
Basis-Styling (gilt für alle Texte):
[data-portalize-widget] {
color: #1a472a;
font-family: "Georgia", serif;
font-size: 16px;
line-height: 1.5;
}
Überschriften (Veranstaltungstitel):
[data-portalize-widget] {
--portalize-title-color: #d500f9;
--portalize-title-font-weight: 600;
--portalize-title-font-family: "Georgia", serif;
--portalize-title-font-size: 1.8em;
--portalize-title-line-height: 1.6;
}
Beschreibungstexte:
[data-portalize-widget] {
--portalize-description-color: #1a472a;
--portalize-description-font-weight: 400;
--portalize-description-font-family: "Georgia", serif;
--portalize-description-font-size: 1em;
--portalize-description-line-height: 1.6;
}
Metadaten (Datum, Ort, Veranstalter):
[data-portalize-widget] {
--portalize-metadata-color: #666;
--portalize-metadata-font-weight: 400;
--portalize-metadata-font-family: "Georgia", serif;
--portalize-metadata-font-size: 0.9em;
--portalize-metadata-line-height: 1.5;
}
Links und Buttons:
[data-portalize-widget] {
--portalize-highlight-color: #ff6f00;
--portalize-highlight-font-weight: 600;
--portalize-highlight-font-family: "Georgia", serif;
--portalize-highlight-font-size: 0.9em;
--portalize-highlight-line-height: 1.5;
}
Kategorie-Filter-Buttons:
[data-portalize-widget] {
--portalize-button-bg-color: #f3f4f6;
--portalize-button-bg-color-selected: #d1d5db;
--portalize-button-text-color: #000000;
--portalize-button-text-color-selected: #000000;
--portalize-button-font-weight: normal;
--portalize-button-border-radius: 0.25rem;
--portalize-button-border-color: transparent;
--portalize-button-border-width: 1px;
--portalize-button-icon-size: 1em;
}
Trennlinien zwischen Terminen:
[data-portalize-widget] {
--portalize-divider-color: #d1d5db;
--portalize-divider-width: 1px;
--portalize-divider-style: solid;
}
Bilder:
[data-portalize-widget] {
--portalize-image-bg-color: #d1d5db;
--portalize-image-border-radius: 0.5rem;
--portalize-image-shadow: none;
}
Branding-Kopfzeile:
[data-portalize-widget] {
--portalize-logo-height: 2.5rem;
--portalize-branding-gap: 0.5rem;
}
Kategorie-Badges:
[data-portalize-widget] {
--portalize-badge-bg-color: #e5e7eb;
--portalize-badge-border-radius: 0.25rem;
}
Eigene Termine (Schaufenster, Markierung und Stern-Filter):
Eigene Termine werden über der Liste in einem Schaufenster gezeigt und in der Liste mit einem Stern-Badge markiert. Die Akzentfarbe gilt für Badge, Stern-Chip und die Veranstalterzeile.
[data-portalize-widget] {
--portalize-own-events-accent-color: #d23800;
--portalize-own-events-accent-contrast-color: #ffffff;
/* Breite, ab der lange Veranstalternamen im Chip gekürzt werden */
--portalize-own-events-chip-label-max-width: 16rem;
/* Zeile zum Zurücksetzen des Filters */
--portalize-own-events-reset-text-color: #c23400;
--portalize-own-events-reset-border-color: #e5e7eb;
}
Schaufenster über der Liste:
[data-portalize-widget] {
/* Überschrift und "Alle anzeigen"-Link */
--portalize-showcase-heading-color: inherit;
--portalize-showcase-heading-font-family: inherit;
--portalize-showcase-link-color: #d23800;
/* Karten */
--portalize-showcase-card-bg-color: #fff1eb;
--portalize-showcase-card-border-radius: 8px;
--portalize-showcase-card-padding: 16px;
--portalize-showcase-title-color: inherit;
--portalize-showcase-title-font-family: inherit;
--portalize-showcase-title-font-size: 1rem;
--portalize-showcase-date-color: #c23400;
--portalize-showcase-location-color: #374151;
/* Rahmen um die Karte, deren Termin gerade geöffnet ist */
--portalize-showcase-active-ring: 0 0 0 3px #d23800;
/* "+N"-Karte, wenn es mehr eigene Termine gibt als Platz */
--portalize-showcase-more-color: #c23400;
--portalize-showcase-more-border-color: #e8a88c;
/* Anzahl der Karten nebeneinander und Abstände */
--portalize-showcase-max-cards: 3;
--portalize-showcase-gap: 12px;
--portalize-showcase-gap-desktop: 16px;
}
Schrift und Bilder (Grundeinstellungen):
[data-portalize-widget] {
--portalize-font-family-base: "Georgia", serif;
--portalize-font-size-base: 16px;
--portalize-font-size-large: 1.5rem;
/* Veranstaltungsbilder */
--portalize-image-max-width: 500px;
/* Maximale Höhe. Standardmäßig das 4/3-fache der Breite, also ein
Hochformat 3:4. Bilder laufen in ihren eigenen Proportionen; erst
höhere Motive werden mittig beschnitten. */
--portalize-image-max-height: 667px;
}
Ausgewählte Filter-Buttons:
[data-portalize-widget] {
--portalize-button-border-color-selected: #d23800;
--portalize-button-font-weight-selected: 600;
}
Filter-Leisten-Layout (Scrollen vs. Umbruch):
Standardmäßig werden die Filter-Buttons auf Mobilgeräten in mehreren Zeilen angezeigt, damit alle Kategorien auf einmal sichtbar sind. Du kannst dies ändern, sodass die Leiste scrollbar wird (ähnlich wie bei Instagram-Stories).
[data-portalize-widget] {
/* Scrollen erzwingen statt Umbruch */
--portalize-filter-flex-wrap: nowrap;
/* Buttons zentrieren (standardmäßig linksbündig) */
--portalize-filter-justify-content: center;
/* Scrollbalken anzeigen, wenn nötig */
--portalize-filter-overflow-x: auto;
}
Hinweis: Responsive Anpassungen (z.B. anderes Verhalten auf dem Desktop) bleiben erhalten, da wir CSS-Variablen verwenden. Diese "tunneln" auch durch die technische Abgrenzung des Widgets (Shadow DOM).
Probleme beim Styling?
--portalize-title-color)[data-portalize-widget] angewendet werden