GIANT ROBOTS SMASHING INTO OTHER GIANT ROBOTS

Written by thoughtbot

Some Improvements to Fluid Campfire Scripts

Last night, Fluid 0.9.3 was released. This release adds Userstyles, a way to specify CSS that overrides the CSS on a page. If you'd seen my previously released campfire scripts for fluid, you'll know that I had a catchall script that made various improvements for using Campfire with Fluid. Well, with this release of Fluid, I've made some improvements to this script, changing the way input is handled, and utilizing the new Userstyles.

You can get the latest version here: https://svn.thoughtbot.com/hackfest/campfire/fluid/campfireFluid.user.js.

The best feature of this script is the improvements to Campfire input handling that it makes. This script adds additional input handlers, so that when you type in Campfire, even if the focus isn't on the input box, the focus is moved to the input box. It also makes it so that you can hit the ESC key and remove focus from the input. This didn't previously work if you were pasting. If you wanted to paste something, you needed to manually focus the input and paste it. Well, no longer. Now, when you paste something, even if the input doesn't have focus, it'll focus it and then paste into the input.

One of the other things the script already did was override the CSS to remove the header HTML tabs, so that you can more seamlessly use the features of Fluid: tabbed browsing, and dock menu items, as seen here:

Now that Fluid includes the ability to specify CSS overrides built-in, I've removed this functionality from the script itself. To do this using Userstyles, upgrade to the latest Fluid, and then open Preferences in your Campfire Fluid App, and click on Userstyles. Create a new userstyle, with the URL pattern shown below.

And copy and paste the following Userstyle into the box.

body #Header { display: none; }
body #MainTabs li a { display: none; }
body.modal { background-color: #fff; }
body.login { padding-top: 0; }
.login div#Modal { margin: 0px; width: 100%; }
#Modal { border: none; }

Once you refresh the page, the style should take effect. I've also made the CSS to use available here.

I hope you enjoy the improvements. If you have any idea for how it could be improved further, please let me know.