chame
Chameleon CSS


What is it ?

Chameleon CSS let your WordPress site to automatically select CSS file upon your specific condition, for current release Time and Date conditions are available.


Feature

  • Time condition : sunrise, day, sunset and night
  • Day condition : Sunday, Monday …
  • Date condition : any date
  • Date-Time source : server or client
  • Friendly plugin-configuration page
  • Compatible with WP Super Cache


Installation

1. Download Chameleon CSS.
2. Extract & upload chameleon-css folder to /wp-content/plugins/ directory.
3. Go to WordPress admin – Plugins page and activate chameleon-css plugin
4. If you use WP Super Cache plugin, go to Setting – WP Super Cache and click on Delete Cache button
5. Chameleon CSS menu is available in WordPress ach when it combine with style.cssdmin page


How to use ?

1. First you have to prepare CSS files for different looks.

sample

ex. You would like your site to look shiny in the morning and darken in the night. You have to create 2 addition CSS files.

  • day.css which when it combine with style.css (main theme style sheet), they will produce shiny look
  • night.css which when it combine with style.css (main theme style sheet), they will produce dark look


2. Go to WordPress Admin – Chameleon CSS to set the condition

sample2


Insert CSS description and CSS file path then click add button, new CSS record will be added to the CSS list.

sample3


Drag selected CSS and Drop it to your prefer condition.
That’s it, so easy.

sample4


To remove css from condition, just drag it off and release.


Changelog

0.1 (2009/09/12) : Hatch
0.2 (2009/09/13) : Compatible with WP Super Cache
0.3 (2009/19/19) : Date-Time Source : server or client
0.4 (forgot) : Resolve library conflict problem (found by Marcelo)
0.5 (forgot) : Add active/inactive function
0.6 (2009/10/30) : Add Day condition


To user

If you have any question, suggestion or any issue, please let me know. I am pleased to help you.

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Twitter

1.
k-rlitos

ooo, excellent, I wanted to do this a lot time ago :)

2.
marcelo

Hello Nutrawee:
First of all, thank you for sharing this great plugin with us.
I need some help.
Im using wp 2.8.4 with the thematic theme framework.
My server is PHP 5.2.9

I can’t get the plugin to work, Firebug’s console displays the following error:

$ is not a function
http://mydomain.com/
Line 31

$(document).ready(function() {\n

the “ccss_header_scripts” function that’s correctly placed in the header but fails to print the stylesheet link below.

I tryed deactivating all plugins but still have no luck.
I suppose it might be a jquery problem, my header has only this instance of jquery:

Thank you in advance!

3.
admin

I’m very happy that you intend to use CCSS plugin, and thank you for bug report.

The cause of this problem is library conflict. I have solved this problem and update the plugin version to 0.4. You can update it from your plugin page and please report the result to me.

Thanks.

4.
marcelo

It works!
Thank you m8!

¿At what exact time of the day do the stylesheets rotate?
Just wanted to know if sunrise for example lasts 1 hour or 6.

It would be really cool if in the furure you could add the abilitty to configure a rotating schedulle, i mean with hours and minutes. if for example your site is a school blog, backgrounds could correspond to activities taking place at regular times like lunchtime, playtime, math, whatever. Like a drag and drop calendar (bet it’s a lot of work LOL)

well, it’s just an idea =)

5.
admin

Hi marcelo.

Sunrise : 5.00 – 8.59
Day : 9.00 – 15.59
Sunset : 16.00 – 18.59
Night : 19.00 – 4.59

Thanks for your suggestion, I will add it to wish list.

6.
Callum

Hey. This plugin is so simple and straightforward. I thought I was going to have to install a jquery script and mess around with fiddly settings.

This has made style switching easy! Thanks so much.

However, just one thing I’d add to the wish list. I have applied a different style each day to a website. I did this manually by dragging the relevant CSS file onto the calendar. But I was wondering if it would be possible to set up the stylesheet automatically. i.e. on every monday, the stylesheet monday.css is applied, rather than having to drag the stylesheet onto every monday on the calendar. Do you understand what I mean? (I think I made it sound more complicated than it actaully is :D )

But again, cheers for the great plugin!

7.
Tiger

This sounds like a fantastic plugin and just what i’m looking for.

As i was planning to create custom background images for my site which changed based on the time of day

Ill test ths out

great work!

8.
Marcelo

Hello again!
I’m having trouble using Chameleon CSS on a XAMPP setup (latest version).

The plugin installs correctly but when I try to add a stylesheet the loading bar moves but the stylesheet isn’t attached.

I’ve tested this on two servers with no luck.

Hope you can point me to the right direction, maybe a php function needs to be activated, or file permisions, I really don’t know.

BTW, when you deactivate the plugin a reactivate back, the stylesheets have to be configured again.

I’m using hostgator on the net for testing purposes, XAMPP on my PC for development and at my clients intranet (wich is where the final thing would go).

TiA!

9.
admin

Thank you all,

To Callum, your suggestion is added and I think it will available on next release.

To Marcelo, Please check these possible cause:
1. Have you active “Chameleon Status” at plugin configuration page (click on the blue gear, then you will see it).
2. If the problem still occur, use fire fox + fire bug to check the AJAX call when you load your page. Check the sent and received data to investigate the problem.
3. Try AppServ instead of XAMPP, but I don’t think that XAMPP is the cause of this problem. However I will paralleled investigate this problem.

10.
Marcelo

Hi.
In Firebug Console, when i press add it reads:

Pseudo-clase o pseudo-elemento desconocido ‘input’.
http://myserver/wp-admin/admin.php?page=ccss
Line 0

if i press again i get a loading line:

http://myserver/wp-admin/admin-ajax.php

and the response:

Fatal error: Call to undefined function curl_init() in C:\myserver\wp-content\plugins\chameleon-css\admin\ccss-admin-ajax.php on line 135

line 135 is:
$handle = curl_init($url);

Thank you!

11.
admin

You have to enable CURL in your XAMPP server.
Please follow this link http://chrismeller.com/2007/04/using-curl-in-xampp/

12.
Marcelo

That did it my friend!
Guess I’m gonna have to read more about “extensions”. Many are commented, I’m using the default XAMPP setup.

If you ever localize the plugin, feel free to contact me for a spanish translation.

Thank you again!

13.
Callum

Just donwloaded the latest version of Chameleon. You have no idea how pleased I am to see the day feature! Abaolutely fantastic. Thanks so much.

Callum

14.
Callum

Forgot to say, is there no option to donate for this plugin. You have no idea how useful and tiem-saving it is to me. Really, really appreciate your work.

Cheers.

15.
admin

I am very appreciate to know that you like Chameleon CSS. However, if you would like to help me, spreading and giving feedback are the things that I wish.

[Answer #13]
Day feature is used in this situation:
On Monday you want your site with yellow theme.
On Tuesday you want your site with pink theme.

However it’s up on your creativity to use this plugin and you also can combine three condition to work together.

Thank you -/\-

16.
thor

Great idea plugin but not working. At activation i get this error:
“Plugin could not be activated because it triggered a fatal error.
Fatal error: Cannot redeclare class Services_JSON in [..]/chameleon-css/exlib/JSON.php on line 116. Do i have a solution? Thanks in advance!

17.
admin

open chameleon-css/chameleon-css.php
and comment line 98

require_once CCSS_PLUGIN_DIR . ‘/exlib/JSON.php’;

change to

//require_once CCSS_PLUGIN_DIR . ‘/exlib/JSON.php’;

I think the problem occur because there is another plugin that use this library too.

18.
admin

Callum if you have not seen the day feature, Open the Chameleon-CSS configuration page and press F5.

19.
thor

I will try this tomorrow! Thank you!

20.
Callum

Hi.

Yes the day feature is working perfect for me. Really excellent.

The site is at test stage at the moment, but when it’s live i’ll post the link and you can see how I have styled it up for different days.

Many thanks.

21.
admin

I am very appreciate that it works for you and looking forward to see your site.

Would you mind, if I add your site to Chameleon CSS show case.

Thanks.

22.
Callum

Not a problem. I’ll send the link once it is live.

23.
Red Reynolds

I have a client project who wants to change the background image based on the category the page is in that is being served. They imagine a photo collage background for each category. This seems like it would be a great interface to do that, since it is just a one line over ride of CSS. Would you consider working in a conditional like this based on Category & Tag or combo of the two?

24.
admin

Thank you for your suggestion, Page, Post, Category and Tags condition are interesting features. I will develop Category Condition for you, maybe within 2 weeks.

25.
payday loans

I want to thank the blogger very much not only for this post but also for his all previous efforts. I found wegrass.com to be extremely interesting. I will be coming back to wegrass.com for more information.

26.
Tom

Been looking for something like this all day. Got it working on one of my blog. Thanks for the plugin work perfectly.

27.
admin

Thanks Tom, I am very happy to know that it works for you.

28.
tm

alway be loading
when i click the “add” button
help me please

29.
Nutrawee

Hi tm, could you give me more detail by using fire-bug to get the “post request” result.

If you don’t have any clue to do that, please give the access to your wp-admin and I will help you resolve this issue.

Thank you.

Leave a Reply

Grass still Green

บริการจัดทำเว็บไซต์ครบวงจร เรียบง่าย แตกต่าง และ มีประสิทธิภาพ
โทรศัพท์ 08-3153-2190 อีเมล์ support@wegrass.com