So I want To create a website with information on gardening for habitat with a design that changes depending on the council your in, however this is a complicated page with many CMS collections that have information which are filtered accross different pages, I want to know if its possible in my CMS collection feilds to get the Text from the CMS but the colours from the page its currently on??
Each item (e.g. page) could have its own class for this:
“Customize page styling based on a field value, using custom CSS. For example, different categories of your blog can look different by binding a Category field to an attribute, then using an attribute selector in your CSS like div[data-category]. #IYKYK”
How I usually approach this is to have static pages for each, or several designs. Give them a class (or classes) and then add those to the CMS item. With the new feature above, that’s how you link it to your live pages.
You’ll need to be more specific on what you want to change (specifically which pages), and when you want to change it.
From your text it sounds like Ormond is probably a suburb, and that the Ormond page would look very different from other suburb pages- colors, background images, etc. But in your screenshot you have multiple different Ormond pages, which means that the “council” is probably selected in some other way.
I’ll assume that you’ve sorted out some kind of finite list of councils and maybe created a collection of those, with some way to select which council you’re in while you’re viewing [e.g.] the Ormond page.
If that’s the case, your most manageable approach for large-scale thematic changes is probably…
Create your suburb collection page
Duplicate your entire page content N times where N = the number of councils.
Wrap and label each of these sections by council, I’d probably do a custom attribute of council=COUNCIL-ID
Within each of these sections, you can modify the content and positioning of elements, and also apply any council-specific styling by adding a subclass to customized elements. Do your coloring, backgrounds, borders, etc. this way.
Add a piece of CSS to the page to initially hide all of these sections, setting anything with [council] to display: none. This will hide everything on page load.
Add a piece of JS that takes whatever council selector you have, and unhides that one section.
You may need changing code as well if the council selection can be changed by the user mid-session.
So pretty simple, very little custom code, but a lot of work on the styling. Nice thing with this approach is it’s all in the designer rather than a big chunk of custom CSS.
