Alex Tech Adventures The webs best tutorials!

My client requested chat that looks a certain way and he would not accept anything else. Without an existing chat foundation on the site, I had to get one and customize it. I chose phpfreechat and as it looks nothing like required I had to dig deep into CSS and fully reconstruct it. Unfortunately some of the customizations required were not as simple as editing the template file. After 3 days of struggle and finally a desperate call for help on twitter I finally was able to do the job.

The idea was to make some elements hidden and I thought visibility: hidden property would do the trick. After all, adding it as an attribute in FireBug editor produced expected results. When putting the property into the template, however, nothing changed. In fact, this new property did not even show up anywhere in DOM/CSS inspector. An attempt to create a new template also failed: even after putting my new template name into phpfreechat parameter list, the front-end JS would always call default. These two reasons led me to believe that there were caching problems, since what I put into the CSS file never got to the front-end. Clearing the cache directory manually produced no results: neither the theme would switch or new visibility property would show up in the inspector.
Two wonderful people from twitter,bensternthal and joeyrivera, volunteered to help me out. From what we discovered, PHC does not pass the CSS file directly to the browser as one would expect but is instead parsed by PHP and send to JS frontend in terms of attribute: value format which are then applied to their respective HTML elements using prototype's set method. For a long time we tried many things to bypass cache, which involved passing a random url paramter to the AJAX calls. None of this worked. All that we tried returned the same results.

According to the site, the best way to clear cache is to clear data directory. However, the real way to clear it is to rehash the request from the chat input using /rehash (suggested by bensternthal). This is the only way new object parameters, such as theme name, are accepted. So after /rehash at least the frontend was able to switch from default theme to my custom one. Yet my visibility attribute still would not show up. As mentioned by joeyrivera, I looked inside fschat.php?pfc_ajax=1&f=loadChat to see what exactly it was doing (this was actually how I figured out how CSS file is being parsed). To my surprise I noticed that my visibility parameter was passed to the frontend. So why was it not in the inspector?? Why is it that when I add it manually in FireBug it worked but did not show up when I put it in the theme file??