Define your own colour names in CSS

Looking at my Posterous template, I notice the following:

h2 a:hover { color: {color:Accent}; }

WTF? Accent isn’t a standard CSS colour name.
Searching for Accent I find the following inside the head tag:

<meta name=”color:Accent” content=”#a98e2e”/>
<meta name=”color:Darker Accent” content=”#776421″/> 

Genius! I didn’t know you could do that. Now with this you can define a set of colours in an external file (possibly in a database for a CMS) and include that in your templates, and easily control and change all colour references in a site by only changing that file. What a fantastic time saver – no complex find and replace in multiple CSS files to update a colour scheme for a special occasion. BUT: Does this only work with Posterous’ template system? If so, it would be easy to write into your own systems but could be more of a pain to implement for say Joomla. I shall have to do some tests….

[UPDATE: 1436-08062010]
Haven’t gotten round to doing any testing, but my associate Bishop Dante tells me:

“the meta trick is pure HTML, it’s not specific to your blog platform.
It can be done to assign classic global control over most anything of value,
including the source of the HTML file itself.”

Well blow me! I’ve been doing HTML for over 10 years, and I have NEVER come across this before. Never seen it on a site, never found a reference in a manual or a guide online. Me still likey. Next question: Can you use this trick with external CSS or does it have to be inline?

[UPDATE: 1641-12112010]
Well, I’ve finally tried it out, and it doesn’t seem to work either inline or external. Can’t find much of anything on Google relating to it, apart from mention of Tumblr profiles. It may be accomplished with Javascript perhaps, which is a real shame. I’d love to know more about it…

3 thoughts on “Define your own colour names in CSS”

  1. I’ve been coding HTML for about 16 years now and knew about META tags… I found your post while I was trying to customize a template myself and these buggers wouldn’t update. I kept trying to update the META tags in the ADVANCED > CUSTOM HTML area…Go to CUSTOMIZE > COLORS… That’s where you have Posterous define those colors 😉 Just tested it – IT WORKS!!!Good luck!

  2. Interesting – thank you Michael. Of course, I know about metatags, but but defining colours in them is new to me. While this works in Posterous, they must be using some processing on the CSS to convert colour names to hex codes as it is not a HTML/CSS feature.

  3. Pingback: 手機保護殼

Leave a Reply

Your e-mail address will not be published. Required fields are marked *