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 */