Under construction

As part of our Featherweight process we streamlined the user interface. We noticed that, for some users the change to the drop-down menu button was undesirable. Luckily, as many of you know Opera is a highly customizable browser—you can easily add the drop-down back as a custom button.

Click this link to install the button, then drag it to a toolbar of your choice:
Add drop-down

There's been some feedback lately, especially from Daniele and Dustin. Here are a couple of things I'd like to comment on. As always I can't make any promises of X will happen at Y, but I still think it makes sense to comment on what directions we want to take.

On OS X sidebar color
It probably won't be changed (back to blue) unless we have the technical underpinnings to make it more similar to what is used in other OS X applications.

On icon size
We are discussing how to unify our icons across the UI. We have a bit of leeway, as the different toolbars can have various padding for their buttons. We could also clip or scale the icons, but that is a sub-par solution.

On toolbar button consistency
Opera supports toolbars, and also "toolbars-in-toolbars" - such as for extensions. The styling of buttons on the same toolbar should be consistent.

Here's a rough list of skin changed in this release. They are based on feedback from the 11.00 release.

Windows / Linux:
- Tabs no longer jump when you switch between normal and thumbnail view.
- Skin for the "callouts" have been merged into one.
- Dropdown arrows made consistent.
- Unread mail badge now follows colorization.
- Speed Dial has gotten some polish.
- Cleaned up addressfield button spacing.
- Addressfield search button now match other addressfield buttons.

OS X:
- Tabs no longer jump when you switch between normal and thumbnail view.
- Skin for the "callouts" have been merged into one (and updated with more OS X-like styling)
- Dropdown arrows made consistent.
- Removed default speed dial background border.
- Cleaned up addressfield button spacing.
- Email infobar styled.
- Only active tabs have bolded text.
- Back / Forward stroke color aligned.
- Skinned the extensions manager.
- Dropdown toolbars updated.
- Panel toolbars updated.
- Bookmarks bar / main bar pressed button state now OS X specific.


In addition there are numerous smaller changes here and there. If you find any bugs, please post them here or in the desktop team blog post!

One of my lecturers liked to point out that if you ask people what you do, you seldom get a meaningful answer. I am hired as a graphic designer, which may make you think I spend 7,5h per day in Photoshop or Illustrator - the truth is slightly less glorious, I would guess roughly 2-3 hours a day are used for purely design-related activities. The rest is spent in meetings, coordination, bug reports and excessive coffee runs.

Ahem. Here are the simple steps to get started:

Before you start trying out your changes, mock them up in Photshop. That way it is easier to get feedback, and you can ensure that it will work from a design point of view before you get your hands dirty. Once it is good enough you should test it live, to make sure there are no technical limitations preventing your design from working.

Grab a fresh Opera build and install or unpack it. Unzip (to a location of you choosing) the standard_skin.zip for Windows & Linux changes or the mac_skin.zip for OS X related changes (note, I do not recommend this for creating a custom skin, read this to find out why). The most interesting file inside these archives are the skin.ini file, as it controls the skinning. It can be read by any text editor.

In order to easier locate the element you want to change, you can enable a magical setting - opera:config#UserPrefs|DebugSkin. It will display a giant yellow tooltip when you hover a skin element, giving you details about it, but perhaps especially important: the name of the section where you can find it in the skin.ini file.

To see the changes you go, point Opera to the extracted skin. Due to legacy reasons this is named "button set" - opera:config#UserPrefs|ButtonSet. All that is missing for the changes to appear is to reload the skin. The best way to do that is to go to Preferences > Advanced > Shortcuts > Keyboard Shotcuts. Once there, bind a key combination to "Reload Skin".

Then you are good to go! Type your text in the editor, save it, press key combo in Opera, done.

My favorite feature in Opera 11 i the security indicator in the Address Field. While Opera has had security information there for a long time, this is a real attempt at making it more accessible and useful for everyone.



Click the image above for a small chart explaining the logic behind the naming and color-coding.