Verwenden von „Element untersuchen“ (Entwicklertools)

 
Um jeden Abschnitt des Modern Events Calendar manuell können Sie die Entwicklertools in Ihrem Browser verwenden und dann die benutzerdefinierten Codes in das Feld „Benutzerdefiniertes CSS“ in den Einstellungen von MEC oder Ihrem Design einfügen.

Schreiben Sie benutzerdefinierten CSS-Code

Sie können Inspect Element (integrierte Entwicklertools Ihres Browsers) verwenden und jeden Abschnitt selbst ändern:

Wenn Sie Änderungen an Ihrem Design vornehmen möchten, können Sie mit Inspect Element (Entwicklertools) den Quellcode Ihrer Website und die darauf angewendeten CSS-Regeln anzeigen.

Um darauf zuzugreifen, klicken Sie mit der rechten Maustaste und wählen Sie im Popup-Menü Element prüfen (oder prüfen oder Entwicklertools).

Weitere Informationen finden Sie unter „Element prüfen“ in Chrome oder Firefox. Auch eine Google-Suche ist hilfreich.

Beispielsweise versuchen wir, die Farbe des unteren grauen Rahmens in einer Fußzeile zu ändern.

Hier sind einige CSS-Tutorials, die Ihnen beim Schreiben Ihrer eigenen benutzerdefinierten CSS-Codes helfen: w3schools | CSS-Einheiten

Medienabfragen für alle Geräte

Mithilfe von „Media Query“ können Sie Ihr Design auf Mobilgeräten und Tablets responsiver gestalten. Klicken Sie hier oder hier, um weitere Informationen zu CSS-Media Querys zu erhalten.

Sie können Ihr CSS anhand des folgenden Beispiels auf eine benutzerdefinierte Bildschirmgröße anwenden:

@media only screen and (max-width: 480px) {
    /* PUT YOUR CSS CODE */
}

oder zwischen zwei Bildschirmgrößen verwenden:

@media (max-width: 960px) and (min-width: 481px){
    /* PUT YOUR CSS CODE */
}

Hinweis: Wenn Sie sicherstellen möchten, dass alle Ihre Anpassungen nur in der Einzelne Veranstaltungsseite, Sie müssen Body-Klassen wie die folgenden verwenden (siehe Screenshot unten):

single-mec-events

or

 mec-single-fluent-body