Möchten Sie Elemente, die auf allen Seiten Ihrer Website vorkommen, auf einer einzelnen Seite anders gestalten? Um dies zu tun, fügen Sie Ihren eigenen CSS Code hinzu (Einstellungen - Design - CSS).
Beispiel: Navigationsmenü
Beispiel #1:
Ziel:
Die Seite “About us” soll im Navigationsmenü eine andere Hintergrundfarbe haben als sonst generell auf der Website (z.B. Hintergrundfarbe Grün im aktiven Zustand und wenn man mit der Maus darüber fährt).
Lösung:
Jede Seite hat eine eigene Klasse im Navigationsmenü (li und a tags): menu-seitenname. Die Seite “About us” hat also die Klasse: menu-about-us
(Der Seitenname wird kleingeschrieben, Leerzeichen mit “-” ersetzt und Sonderzeichen - ä,ö,ü, usw - mit ae, oe, ue, usw.)
Diese Klasse können Sie in Ihrem CSS Code ansprechen und stylen.
Demo: https://per-page-css-demo.incms.net/
Den CSS-Code finden Sie im Screenshot auf der o.g. Demo-Seite.
/* make the "About Us" menu green */
Beispiel #2:
Ziel:
Die Hintergrundfarbe der Seite “Contact” soll im Navigationsmenü immer rot sein (auch im nicht aktiven Zustand).
Lösung:
Jede Seite hat eine eigene Klasse im Navigationsmenü (li und a tags): menu-seitenname. Die Seite “Contact” hat also die Klasse: menu-contact
Diese Klasse können Sie in Ihrem CSS Code ansprechen und stylen.
Demo: https://per-page-css-demo.incms.net/
Den CSS-Code finden Sie im Screenshot auf der o.g. Demo-Seite.
/* make the "Contact" menu always red (even when not active) */
Beispiel: Textfarbe
Ziel:
Text auf der Seite “Start” soll blau sein.
Text auf der Seite “About us” soll grün sein.
Text auf der Seite “Contact” soll rot sein.
Lösung:
Der <body> Tag jeder Seite hat eine "page-XX" Klasse, wo XX die page ID ist (die sich nicht ändert, wenn die Seite umbenannt wird).
Diese Klassen können Sie in Ihrem CSS Code ansprechen und stylen.
Demo: https://per-page-css-demo.incms.net/
ID der Seite “Start”: 2 → CSS Klasse <body class=”page-2”>
ID der Seite “About us”: 77 → CSS Klasse <body class=”page-77”>
ID der Seite “Contact”: 78 → CSS Klasse <body class=”page-78”>
Den CSS-Code finden Sie im Screenshot auf der o.g. Demo-Seite.
/* color global page text differently, depending on current page */