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??
Changing some other random parameters I noticed that at this point cache was not a problem. I could change everything else like text colors. So problem was with my visibility attribute them. I've never been on good terms with CSS so please excuse me if I should have known this but after some further research I found that there is another way to make something invisible using display:none attribute which worked!!! Not knowing all the theory behind CSS I am still not sure why would visibility:hidden work in insepctor but not when passed through CSS while display:none worked as needed.That said cache still was a problem to a certain extent: /rehash is still need to switch the themes and re-invoke the parser when something major changes and it is actually enough without having add random parameters to the urls in the source.
Big thanks to the forthmentioned developers for leading me into the right direction.
| Next > |
|---|
