Different Font Color Styles On Every Page

Permalink
I know this is ridiculous, and as a designer I would not usually do this, but the client wants the h1 tags to be a different color on every page. I know css, but don't know how to call a specific page. Is it possible with javascript or css to call each page by using the url or the title tag to assign a unique font color to the h1 tags of every page?

sschildbach
 
BHWW replied on at Permalink Reply
BHWW
Hi sschildbach

What I would do is create a series of classes and assign them to the body ie.

body.red h1 {color: #ff0000;)
body.green h1 {color: #00ff00;)
body.blue h1 {color: #0000ff;)


then create a custom page attribute that allows you to set the body class to red/green/blue, you could also use this to set custom attributes throughout the page for other headings, i.e h2, h3 etc..

Does this help? Ben
tamarosher replied on at Permalink Reply
tamarosher
Hi. I adjusted the theme's font color inside the dashboard, and "saved" it. But the font color never changes. The theme is Plain Yogurt, which has a gray font color.

What do I need to do to change the font color for the entire theme?

Thanks for helping. I look forward to hearing from you.
BHWW replied on at Permalink Reply
BHWW
Hi Emerald

I don't use the theme style editor so I can't comment, I would suggest starting a new thread though as this is a different topic.

Regards, B
sschildbach replied on at Permalink Reply
sschildbach
Thank you Ben, I really appreciate you getting back to me. I had trouble figuring out how to assign a custom attribute to each page in the dashboard. If I knew how to do that, your suggestion would work.

I like to work on the actual files, in the process of brainstorming, I figured out another way to get a unique font color assigned to each page's h1 tag. I used:

<?php echo $c->getCollectionHandle() ?>

which calls the page's link url which in C5 has dashes so you don't run into problems with spaces. I only have one h1 on each page, so this was not a problem to assign it to the h1 tag.

If you code:
<h1 class="<?php echo $c->getCollectionHandle() ?>">Yoga Classes</h1> the php spits out <h1 class="yoga-classes">Yoga Classes</h1>. Then, in the css file, I simply style .yoga-classes {color:#000} and do that for every unique page, with a unique color code and I get a unique color for every page's major title font or h1 tag.

Your suggestion Ben did inspire me to look further. So thank you for your help. I think <?php echo $c->getCollectionHandle() ?> could be useful for applying styles to individual pages in many situations. I hope this helps others.