Get the web's best apps on your desktop

Adding styles

This webapp bundle is very bare.Prism supports further configuration files that can be used to customise converted sites into personal applications. CSS styles can be amended using a file named webapp.css and JavaScript behaviours added with webapp.js.

Here's an example. Go to YouTube and turn it into a Prism webapp. Next, open a text editor and type in the following code: body{font-family:Times New Roman, serif;} Save the file as 'webapp.css'.

Navigate to 'Documents and Settings | username | Application Data' and find the 'WebApps' folder again, wherein you'll discover the YouTube folder for the site you converted earlier. Open it, then drag and drop the file 'webapp.css' to the folder.

Now, launch the YouTube Prism webapp and all the text should now be formatted with Times New Roman rather than Arial, the usual default font. To find further CSS changes you could make, install the Web Developer toolbar add-on in Firefox and select the 'Edit CSS' option. This gives you access to the CSS file for the site you're browsing, enabling you to pinpoint which classes you can edit and override using webapp.css in a Prism bundle.

JavaScript functionality

Now that we're editing bundle elements, let's backtrack a bit and return to the 'webapp.ini' file that we looked at earlier. This time, we're going to edit a configuration file to create a mashup of two applications – using an idea first mooted by Prism developer Mark Finkle. This time we'll start with a bundle we made earlier. Find the gmail.webapp bundle on the cover disc. Drag a copy to your local machine and rename it 'gmail.zip' – then extract the contents.

Open the extracted folder and find the file 'webapp.ini'. Set the sidebar parameter to 'true' and save the file.Start a new document in a text editor and add the following code: function startup() {host.sidebar.add("Chat", "http://talkgadget.google.com/talkgadget/popout");host.sidebar.visible = true;}.

Save this code as 'webapp.js' in the same folder. This snippet of JavaScript passes the content of a URL direct to Prism's sidebar. This has the same result as defining a URL in the main configuration file webapp.ini, except that we're targeting an object within the host application rather than the main window. The URL we pass could have been anything – an alternative navigation list, another website or application. In this case, it's Google Chat.

To finish off the web bundle, select all the files in the folder and right-click, choosing 'Send To | Compressed (zipped) Folder'. Rename the ZIP file 'gmailchat.webapp'. Double-clicking on the newly created application you'll be prompted to log in to a Prism created mashup of Gmail and Google Chat.
Prism is a simple and powerful method of bridging the gap between desktop and web applications. With these tips and tweaks, you can bundle your own versions of popular web services either for your own use or for distribution online