All about the Pidgin-Webkit plugin for Pidgin

I don't know much about the IM software named Adium except that it resides under Mac.
It therefore, as I guess, has inherited the tradition of Mac of having charming GUI.
Apart from its beautiful software interface, it also has variety of distinguishing 'Message Style'
If you don't understand what I am talking about, you may check this out.
As to these adorable message styles, they are based on the web render engine named 'Webkit', which is actually the reason why they are so attractive.
'Guys who are using Adium would be lucky!' if you love these styles you may think.

But you can be one of them even though you don't use Adium.
There is a geek who just has written a plugin for Pidgin to use these affluent Adium message style!
But don't tell me that you have no chance to use pidgin since it's open source.

In the following, I will guide you how to make it rock on your computer:

1. Where to find the necessary stuffs

Since Pidgin-Webkit is still on its beta stage, you may have to download the source code on its developer's page:

• http://simo.h.mattila.googlepages.com/pidgin-webkit

But before you can compile it into a usable pidgin plugin, you also have to install the Webkit on your system:

• you can refer to the official site of Webkit to compile and install it
• and if you are lucky enough using the ubuntu as I am, there is an existing webkit package in the repository, about which I will walk you through below.

Another thing you don't want to forget is the message style resources, you can find them easily at

• http://adiumxtras.com/index.php?a=search&cat_id=5
• Are they the really eye-candy? I must ask. :)

2. How to use these stuffs

First of all, you must make the Webkit available in your system. As I mentioned, you can compile it yourself from the source code, which I am not going to talk about here.

Then another way is that you can install it from the repository:

• add 'deb http://ppa.launchpad.net/stemp/ubuntu hardy main' into your software source, if you are using ubuntu Gutsy, you may change the 'hardy' part to 'gutsy';
• then update your package information: sudo apt-get update
  
• install the webkit package for development: sudo apt-get install libwebkit-dev

By now, you have the webkit tool installed.

Second, it is time for you to compile the long-waited pidgin-webkit plugin:

• unpack the source code package you downloaded and get into the folder
• simply type 'make' to compile it
• then 'sudo make install' to install it to the pidgin plugin folder
• if you encounter problems in this part, you may refer to the 'Trouble Shooting' part below to find if you have the same problem as I did.

Don't rush to open pidgin to show the beautiful effect now, or you may meet a application crashing. You have to go a little further to there. Right, it is that you configure the style you chose with the plugin.

• unpack the style package
• copy the folders within it to this folder: ~/.purple/message_styles/ : sudo cp -r style_folders ~/.purple/message_styles/

Now, it is the time to open Pidgin. Go through Tools->Plugins, and check the plugin named 'Webkit message styles xx', where the 'xx' stands for the version.

Then open a message session, chat with your best friends facing the wonderful interface.

3. Trouble Shooting

Surely, you cannot go through the steps above without any problems. At least, I confronted so many problems while I am undergoing these stages. I would paste them here and also my solutions to them, wish it helpful.

1. the version problem for package libgtk2.0
• When I tried to install the libwebkit-dev package, I encountered the error which told me

• The following packages have broken dependencies:
  libgtk2.0-dev: Depends: libgtk2.0-0 (= 2.12.9-3ubuntu4) but 2.12.9-4ubuntu3 will be installed
  E: Broken Packages

• it is because I had gnome2-global-menu installed before that.
• to get rid of it, you have to install the right package back:
• first install the right version of libgtk2.0-0: sudo apt-get install libgtk2.0-0=2.12.9-3ubuntu4
• this will uninstall some packages such as gnome-themes gtk2-engines-pixbuf gtk2.0-examples gucharmap libgtk2.0-bin
• now install libgtk2.0-dev: sudo apt-get install libgtk2.0-dev
• reinstall the uninstalled packages: sudo apt-get install gnome-themes gtk2-engines-pixbuf gtk2.0-examples gucharmap libgtk2.0-bin
• then this problem was solved
• refer to: http://ubuntuforums.org/showthread.php?t=871606&page=2
2. the "No package 'pidgin' found" problem
• when I typed 'make' to compile pidgin-webkit, this problem occured.
  
• this is all about the package 'pidgin-dev', install it in your favorite way.
• here you go.
3. when using the plugin, the pidgin suffers from crashing
• when I use the plugin the first time, the pidgin gave me a crashing as an answer.
• through searching, I figured out that it is likely to be the problem of wrong file ownership.
• check the Adium message style folder you copied to .purple/message_styles/ for the file owner.
• If they don't belong to you, you have to change them to this way:
• sudo chown -hR yourusername thestylefolders
• then relaunch pidgin

4. Improvement

Until now, you can open pidgin to enjoy the different kinds beautiful message styles, can't you?
But for me, I was not satisfied with the Chinese characters it displays.
Because most of the existing Adium message styles are designed by English speakers and they cannot be aware of other characters they don't use, other poor language characters don't shows great enough.

If you have this problem as I do, you can follow me. I will lead you to configure the fonts for your language other than English.

By the way, I choosed the style named 'renkoo', I will take it for examples.

• go to the 'Contents/Resources/' folder under the style folder
• open the file 'main.css' with your text editor
• within the '#heading .conversationWith' block and 'font:' entry, add the font name of your language after 'Lucida Grande, '. As for me, I added 'STHeiti'. It finally looks like 'font: bold 16px Myriad Pro, Myriad, Lucida Grande, STHeiti, Trebuchet MS, Arial;'
• and within the '#heading .conversationTime' and '.status_container' blocks, go in the similar way.
• within the '.tableBubble' block, add the 'font:' entry. For instance, I added a new line 'font: 12px Myriad, Lucida Grande, STHeiti, Arial;'
• and if you want to adjust the font size, you may go to the '.tableBubble .message' block to change the 'font-size' entry. I just changed it to '12px'

Then relaunch your pidgin, just enjoy the new face again!

5. Words from the author

Because my English is not so fluent, please forgive my problems in language.
I just take it as a note for myself, and I paste it here with the wish that it may be helpful.
Cheers!

Posted by Terry