I'm creating a site for a client which has the request that each page has a different color theme for each main navigation page.
I've got eight main navigation links, with some of them having subnavigation items. So what I want to do is create eight different CSS files that are loaded on the corresponding page.
Something like this:
Home ---> 1.css (green)
Link 2 ---> 2.css (red)
Link 3 ---> 3.css (blue)
Link 3.1 ---> 3.css (blue)
Link 3.2 ---> 3.css (blue
Link 4 ---> 4.css (yellow)
Each CSS file loads a new background image and color theme then.
What's the best way of implementing this? Do I need to create a php script or can I let Silverstripe select it automagically via "<% if LinkOrSection = section %>" or something?
Also, there's an image in the template that needs to change the same way as the css. It's not a background image, it's content. Can i add a variable in the url to the image to change it with the page accordingly?
Maybe this is another (cleaner) solution:
Using <body id="$URLSegment"> and then specifying eight different body styles in the css file? But i figure this would only work for the specified items and not for the subnavigation...?