Do you want to style elements appearing on all pages of your website differently on a single page? To do so, add your custom CSS code under: Settings - Design - CSS.
Example: Menu
Example #1:
Goal:
There’s a page “About us” in the menu whose background-color you want to be different from any other page (e.g. background-color green when the page is active and when you mouse over it).
Solution:
Every page has its own class in the navigation menu (li and a tags): menu-pagename. So, the page “About us” has the class: menu-about-us
(The page name is written in lowercase, spaces are replaced with “-” and special characters - e.g. ä,ö,ü etc - replaced with ae, oe, ue, etc.)
You can address and style this class in your custom CSS code.
Demo: https://per-page-css-demo.incms.net/
See screenshot on the demo page to check out the corresponding CSS code:
/* make the "About Us" menu green */
Example #2:
Goal:
You want to make the "Contact" menu always red (even when the Contact page is not active).
Solution:
Every page has its own class in the navigation menu (li and a tags): menu-pagename. So, the page “Contact” has the class: menu-contact
You can address and style this class in your custom CSS code.
Demo: https://per-page-css-demo.incms.net/
See screenshot on the demo page to check out the corresponding CSS code:
/* make the "Contact" menu always red (even when not active) */
Example: Text Color
Goal:
Make text blue on page “Start”
Make text green on page “About us”
Make text red on page “Contact”
Solution:
Each page’s body tag has a "page-XX" class, where XX is the current page ID (which does not change when renamed).
You can address and style this class in your custom CSS code.
Demo: https://per-page-css-demo.incms.net/
ID of Page “Start”: 2 → CSS Class <body class=”page-2”>
ID of Page “About us”: 77 → CSS Class <body class=”page-77”>
ID of Page “Contact”: 78 → CSS Class <body class=”page-78”>
See screenshot on the demo page to check out the corresponding CSS code:
/* color global page text differently, depending on current page */