The Events Calendar WordPress CSS

The Events Calendar 5.x – CSS

CSS – Anpassungen beim WordPress-Plugin The Events Calendar

Je nachdem welches WordPress-Theme verwendet wird, kann es sein, dass das Design von The Events Calendar in der neuen Version 5.x nicht so „passt“, wie man sich das vorstellt. Die folgenden Änderungen beziehen sich auf die Version The Events Calendar 5.0.0.2 (Stand 2/2020).

Wir fassen hier einige Vorschläge für die Änderung des Designs zusammen, die relativ leicht ohne Verwendung eines Childthemes ausgeführt werden können. Die folgenden Änderungen können im Bereich Design > Customizer > Zusätzliches CSS deines Themes vorgenommen werden:

The Events CalendarSchriftgöße Breadcrumb

Breadcrumbs (Brotkrümel) ist eine Hilfe bei der Navigation und werden in der Regel im oberen Bereich gezeigt.

Die Schriftgröße der Breadcrumb – Zeile bei der Liste der Veranstaltungen ist uns zu groß. Das hängt mit der der CSS-Eigenschaft „font-size“ zusammen, die mit 42px zumindest bei dem in diesem Fall verwendeten Theme Customizr doch ziemlich groß ausfällt:

.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-breadcrumbs__list {
    font-size: 42px;
}

Die Schriftgröße haben wir in diesem Fall auf 18px geändert worden):

.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-breadcrumbs__list {
    font-size: 18px;
}

… und damit „2.“ nicht so nah an „Veranstaltungen“ klebt, kann die folgende Regel wie folgt durch margin-left ergänzt werden:

.czr-wp-the-content ol>li:before, .woocommerce-Tabs-panel.entry-content ol>li:before, .woocommerce-product-details__short-description ol>li:before {
    margin-left: .5em;
}

Dann sieht das m. E. schon viel besser aus:

The Events Calendar WordPress CSS

The Events Calendar: Änderung der Farbe beim Button

Der Button wird mit einer blauen Hintergrundfarbe bei The Events Calendar 5.x dargestellt, die wir ändern möchten. Die Farbe ist bei dem Selektor nicht angegeben und kann daher wie folgt definiert werden:

CSS The Events Calendar
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__button {
    background-color: grey;
}

Damit beim Überfahren des Buttons (Hover) eine optische Änderung sichtbar ist, wird auch dieser Effekt entsprechend in einer CSS-Regel geändert:


.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__button:hover {
    background-color: white;
    color: grey;
}

Änderung bei unsortierter Liste

Die Optionen (Liste, Karte, Photo, etc.) sind bei The Events Calendar 5.x als unsortierte Liste dargestellt.

The Events Calendar WordPress CSS

Wenn die Punkte vor der Option nicht gezeigt werden sollen, dann kann man das über die folgende CSS-Regel erreichen:

.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list {
    list-style-type: none;
}

Ähnlich kann man verfahren, wenn auch die Punkte vor dem Zeitraum verschwinden sollen:

The Events Calendar WordPress CSS
.tribe-events .tribe-events-c-top-bar__nav-list {
    list-style-type: none;
}

Alle Änderungen und CSS-Regeln hier jetzt noch mal im Überblick, so dass die Darstellung zumindest für uns schöner aussieht. Hier können natürlich noch viele andere Dinge geändert und/oder andere Farben, Schriftgrößen, etc. verwendet werden. Aber mit den CSS-Regeln im Überblick hat mein einen ersten Ansatz, um das Design von The Events Calendar 5.x individuell zu gestalten.

WordPress
/* ------------------------------- */
/* Start Anpassungen TEC 5.x       */
/* ------------------------------- */

.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-breadcrumbs__list {
    font-size: 18px;
}

.czr-wp-the-content ol>li:before, .woocommerce-Tabs-panel.entry-content ol>li:before, .woocommerce-product-details__short-description ol>li:before {
    margin-left: .5em;
}

/* Button "Suche" anders gestalten */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__button {
    background-color: grey;
    color:white;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__button:hover {
    background-color: white;
    color:grey;
}

/* unsortierte Liste ohne Punkte */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list {
    list-style-type: none;
}

.tribe-events .tribe-events-c-top-bar__nav-list {
    list-style-type: none;
}

/* ------------------------------- */
/* Ende Anpassungen TEC 5.x        */
/* ------------------------------- */

Mehr erfahren auf dieser Webseite

Grafik: haurand.com


Infos im Blog

Mehr erfahren auf unserer Webseite

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.