Revengeful Lobster

del.icio.us has a nice little page on adding bookmarking buttons to any browser. With Opera, you can just drag the buttons from the page onto a toolbar, but you don't get any nifty little icons with them.



That looks naff! To customise a toolbar button with an image, you're going to need to modify the skin.

Creating a skin

Start off by following the official advice on creating your own. Locate the Opera program folder, extract the contents of the standard_skin archive from the skins folder, and drop them in a new folder. Open the skin.ini file in your new skin directory, and edit the [Info] section to give your skin a unique name:

[Info]
Name=My Crazy Skin
Author=Me

What you need to do now is add your images to the skin's resources. For toolbar buttons, I'd recommend using something between 16 and 32 pixels square, depending on how small/large you would like them. Once saved in PNG format, drop them in the icons folder of your skin, or in a subfolder of that (I created one called "custom"). Just remember where you've put them, and what they're called. Here are my rather sad attempts at recreating the FireFox buttons:

del.icio.us_16.png
tag_16.png

Now we need to define the images we've just added as available resources. Open the skin.ini file in any text editor, and locate the section marked "[Images]". Under this heading, add a line for each image you have added like this:

resource_name = path/to/image.png

Here's my example:

[Images]
;my custom images
diu = icons/custom/del.icio.us_16.png
tag = icons/custom/tag_16.png

Don't worry about what you call the images, as long as they are unique names.

Save the skin.ini file, then create a ZIP archive with all your skin's files and folders in. Don't do what I did and create the archive from the containing folder - the skin.ini file must be in the root of the archive. To test your skin, drop your archive into Opera's skins folder, restart Opera, and try and select it from the Tools > Appearance > Skin panel. If all you've done is followed this example, then you won't see any change yet (it should look just like the default skin), but you'll know if you've made a mistake because Opera will give you an error message.

Modifying your profile

Now that we have our resources in our current skin, we need to change our toolbar configuration file, and tell Opera which resource to use. Toolbar configuration is done on a per-user basis, so we need to look in a different place to make these changes. By default, Opera stores user profiles in the Application Data folder, which on Windows XP can usually be found here:

C:\Documents and Settings\<username>\Application Data\Opera

And on Windows Vista can be found here:

C:\Users\<username>\AppData\Roaming\Opera

The Application Data folder is hidden by default, so you may need to enable the showing of hidden files and folders before you can browse to your user profile.

Once there, locate the your "profile" folder. Opera saves current versions of these files when it closes, so don't make any changes to them while the browser is running, or they'll get undone. In your profile folder is another folder called "toolbars". In here should be a configuration file called standard_toolbar.ini. This contains all your toolbar preferences.

If you've added custom buttons to the "My Buttons" section of the Appearance panel, then you'll see relevant entries under the [Customize Toolbar Custom.content] heading. If you've placed your buttons elsewhere, they'll be under a different heading. I'd advise you to copy any buttons you've added to any toolbars to the My Buttons section, as it makes them easier to move around and change.

A toolbar button in Opera is defined like this:

ButtonN, "Title"=Action, parameter1, parameter2, Action Title, Icon

Several of those fields are optional, as you'll see if you look at how del.icio.us defines its "my del.icio.us" button:

Button3, "my del.icio.us"=Go to page, "javascript:location.href='http://del.icio.us/home';", 1

No Action Title or Icon. We can skip having to define an Action Title, and just add our icon in the following way:

Button3, "my del.icio.us"=Go to page, "javascript:location.href='http://del.icio.us/home';", 1, , diu

The value we've given to Icon field is the name of the image resource we declared in the skin settings. You should be able to infer from the above example how to change the icon for the "post to del.icio.us" button too. To test to see if your change has worked, save the standard_toolbar file, start Opera, and check out your My Buttons section:



Success! If you don't see the changes, make sure you're now using your modifed skin, and double-check your standard_toolbar file to ensure the changes you made are still there.