Different colours for each page...?

Hi guys.

Anyone have any ideas on how to have a specific color for each page of the site? I've been looking at HTML5 custom data attributes, but I'm not even sure how to target individual links in wayfinder...

The effect my client wants me to achieve is like this: http://www.colouredlines.com.au/what-we-do/ (just the colour changes...)

Any ideas?

Kind regards,

Joe

You could use a Template Variable to set the hexcode of the wanted color and call this TV to set the background color of an element. You could use JQuery to set the color of that element with kind effect [just like your example].

I target resources by adding classes and/or IDs to the body of the every resource.


Then you could also add the ID of the target resource to the class of the Wayfinder item templates, to style nav items per resource.


This way you can target styles at individual pages or pages in a particular container. Then the CSS:

[ed. note: ram last edited this post 13 years, 3 months ago.]

That ultimate parent is a good idea. I have done this in past by using a custom dropdown TV and choose a color.

Quote from: ram at Jul 04, 2013, 10:50 PM

I target resources by adding classes and/or IDs to the body of the every resource.

Then you could also add the ID of the target resource to the class of the Wayfinder item templates, to style nav items per resource.

<li class="goto[[+wf.docid]] [[+wf.classnames]]"><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a></li>

This way you can target styles at individual pages or pages in a particular container. Then the CSS:

#doc1, .goto1 { background: red; }
.sect2, .goto2 { background: blue; }

yes this works properly.