:: rafael oliveira ::

Glass-enabled tab bar in Opera

, ,

Since the appearance of Google Chrome, many small details in the layout of the browser got my attention. One of them was the removal of the title bar, and the use of a glass tab bar, which integrates very well in the style of Vista/Win7 Aero.

Recently, Safari 4 coppied this layout, in a even more aggressive approach, that some found to be pretty disorientating.



And finally, we got to Opera...
I've been using Opera for more than 6 years, and I'm very impressed by all the great advances in the recent snapshots. But I (and others) have wished that the glass look would be implemented in Opera 10, but with so many features to implement/debug, I doesn't look that the Aero look will be in final (actually, it's promised to Opera V11) knockout .

Here is the look of the new skin (that is being beautifully designed by Jon Hicks):



This new skin is getting really pretty, and as AntRepin suggested, it would look a lot prettier if it just used the glass style in the tab bar also...



So I decided to hack Opera and see if I could enable it... And for my surprise yes , I actually got to make it work (not a perfect solution, as it is just a hack done in a couple of hours), with very good results:



Finally, I merged this with my previous Opera hack, that removed the titlebar, and here is what I got:



Quite promising... I hope that this will really be implemented by Opera Team soon! cheers

For those who want to take a look in the results live, I've placed them in Rapidshare and MediaFire:

Download Opera Hacks (Rapidshare)
Download Opera Hacks (MediaFire)

There is a modified skin (with black background in the titlebar that enables Aero after the hack). You need to install it in Opera (place AERO.zip in Opera\Skin\ folder, and select it using Tools -> Appearance -> Choose AERO on the list).


Then, run OperaAero.exe (it will create an icon in the tray area, to close it, click with the right button and choose Exit).


To remove the titlebar, put windowstyle.exe directly in C:\ and open the buttons.html in Opera. Click in the links in this file to add the Minimize, Restore, Maximize and Close buttons (or just add they right now) to the toolbar.

If you got everything alright, enjoy the results yourself!party

It also works with the tab bar in bottom, left and right positions, although the look in left and right is awful with this hack, as the rendering gets a little washed-out with Aero enabled...

Finally, my congratulations to all in the Opera Team for the great work, that have long made Opera my favorite browser!!

Comments

Daniel HendrycksDanielHendrycks Saturday, July 18, 2009 4:28:14 AM

+1
Yeah, share this with many.

rafaeloliveira Saturday, July 18, 2009 4:38:23 AM

Thanks that you enjoyed it...

Just updated the post, forgot to place the modified skin in rapidshare.

YongShunyongshun Saturday, July 18, 2009 5:03:17 AM

Can we have a Mediafire mirror?

rafaeloliveira Saturday, July 18, 2009 5:14:16 AM

YongShunyongshun Saturday, July 18, 2009 6:28:25 AM

Thanks a whole lot! bigsmile Love the modifications bigsmile bigsmile

Anton A. RepinAntRepin Saturday, July 18, 2009 10:15:24 AM

MAN, YOU BEST!!!

Anton A. RepinAntRepin Saturday, July 18, 2009 12:27:12 PM

only have all the same bugs, for example, the text of the tabs, too transparent, I have a black frame around.

But the main thing that you proved the technical feasibility!

setsutekh Saturday, July 18, 2009 2:27:03 PM

You should upload that skin to the Skins section of My.Opera, create a Group, etc. etc.

This needs to gain more popularity. up


Trycko Saturday, July 18, 2009 6:37:59 PM

Cool. I'd like this solution on OS X version as well:D

Daniel HendrycksDanielHendrycks Saturday, July 18, 2009 7:13:17 PM

My tabs text is blurred, any solution?

rafaeloliveira Saturday, July 18, 2009 7:23:06 PM

For now, no solution to the blurred text, its a result of changing all the top margin to glass. But I think that changing the text colors in the skin might make this better... I will take a look in this later.

Daniel HendrycksDanielHendrycks Saturday, July 18, 2009 7:25:02 PM

Originally posted by rafaeloliveira:

I will take a look in this later.



Thanks, yeah it makes the visual thumbnails unsee-able. I will show this to my sisters when it is fixed. Anyway thank you cool

Daniel HendrycksDanielHendrycks Sunday, July 19, 2009 12:17:16 AM

Send me a message when/if you fix some issues.

Daniel HendrycksDanielHendrycks Sunday, July 19, 2009 1:36:51 AM

Originally posted by drworm:

If you created OperaAero.exe with AutoHotkey, is there any chance you can share the code?



lucideer Sunday, July 19, 2009 1:46:05 AM

Firstly, wow! this is incredible.

Secondly, a few notes, suggestions:
1. a possible "solution" to Daniel's issue above. Change the tab-background of the included AERO skin to white, and have white become transparent. This wouldn't solve the transparency "issue" on thumbnails, but it might ease the issue as white is a more common/intuitive default background for pages. For example, in the current setup, pages with black backgrounds look fine in the thumbnail tabs.

Or alternatively you could just set the tab-bar background to some obscure colour like pink.

2. I actually have thumbnail tabs disabled completely normally, not just minimised, but actually disabled (by unchecking the checkbox). This causes a thick black line to appear at the base of the tab-bar, obviously caused by some relative heights in the "extend frame into client area" code. Would it be possible to have the ability to vary the height with a command line switch or some such? This would also be very useful for custom skins I'd imagine.

lucideer Sunday, July 19, 2009 1:49:33 AM

Originally posted by DanielHendrycks:

If you created OperaAero.exe with AutoHotkey, is there any chance you can share the code?


It was created with Visual Studio (I think, or just VC) and the code is included in the download (sourcecode.rar)

Kyle Bakerkyleabaker Sunday, July 19, 2009 9:17:30 PM

Nice work!

Petter Nilsenmitchman2 Sunday, July 19, 2009 11:44:48 PM

Cool hack, but redo the skin to fall back to the standard skin for everything, then only include the skin section you're replacing. The result is forward compatibility and 400kb smaller file.

Martin RauscherHades32 Monday, July 20, 2009 8:19:00 AM

RT via Hicksdesign: "Hack to enable transparent Opera tab bar in Aero my.opera.com/.... This won't be in v10, but changes coming mean this will be done later"
Yeeha!

I created such a hack myself, but something I couldn't get to work was that the thumbnails get transparent, too...

Martin RauscherHades32 Monday, July 20, 2009 8:25:20 AM

Originally posted by lucider:

It was created with Visual Studio (I think, or just VC) and the code is included in the download (sourcecode.rar)


*Ugh* No. It was created in Visual Basic!!!

Nicola MantovaniIron84 Monday, July 20, 2009 1:45:42 PM

cool! does it work on opera 9.64 too?

snague Monday, July 20, 2009 3:33:49 PM

Parabens Fera

Havia dado essa ideia ao pessoal do OPERA, mas o seu HACK ficou excelente.


Abraços do Brasil

PozsonyiMarkCsendesMark Monday, July 20, 2009 5:30:56 PM

make it default pleaseeeeeee!!!!!

S a msamfresco Monday, July 20, 2009 6:25:32 PM

I works fine! But I noticed if the Title bar doesn't have the string "Opera" it won't work.

Miroslavmirko70 Monday, July 20, 2009 7:19:47 PM

I no speak english. Dakujem,že si navštívil moju stránku. Dúfam,že sa ti páčila

Joel Lutherlutherjw Monday, July 20, 2009 7:35:59 PM

Is there a quick uninstaller? I can't read anything in the tab bar or the menu bar... sad

Lordtoniok Monday, July 20, 2009 8:43:47 PM

That sound quite awesome : titlebar removing and aero everywhere is what i ever wished.
I've two problems :
the title bar is still here. I think it's due to my setup: my windows isn't on the C drive. I put it on my windows' drive and on the C but it still doesn't work ...
The second problem is that:
[img]http://uppix.net/3/1/6/48ffda35c42ef093398de8cd69323.png
With one tab it looks quite weird.
With more tabs i have a big black ... thing very ugly.
It would be very nice to have something working at 100%.
You've done an excellent job. I hope your work could inspire Opera's dev to make it on a (not too) future release.

rafaeloliveira Monday, July 20, 2009 10:16:20 PM

litherjw: To uninstall, just change to the default skin (Shift + F12 to open Appearance, select Stardard Skin), and close the running program in the trayarea (left of the clock, an Opera logo with an letter A)

Lordtoniok: Edit the file buttons.html in notepad, and change all the references of C:\ to your directory. Remember that, as they are links, you must replace spaces with %20 in the actual path of windowstyle.exe

Samfresco: Yes, the hack looks for the word Opera in window titles, I'll change it latter to look for all opened Opera window by detecting their class name.

And a not so good news, Hick just told me that this is already done in internal builds, but will probably be available only in Opera v11.

Marcos Aguiarmarkfeik Monday, July 20, 2009 11:44:58 PM

Putz, não consegui fazer aki.
Seleciono a skin e executo o OperaAero.exe mas não acontece nada, continua com o fundo preto...

rafaeloliveira Tuesday, July 21, 2009 12:50:59 AM

Markfeik: Vc tá rodando no Vista ou no Win7? não esqueça q o XP não tem o Aero/Glass, ai só fica preto msm!

Marcos Aguiarmarkfeik Tuesday, July 21, 2009 1:04:54 AM

Estou rodando no Vista.

rafaeloliveira Tuesday, July 21, 2009 1:21:36 AM

Veja se aparece "- Opera" no título do navegador? Se não aparecer, não vai funcionar por enquanto... Amanhã vou postar uma versão nova que corrige esta necessidade

Marcos Aguiarmarkfeik Tuesday, July 21, 2009 1:35:05 AM

Consegui Rafael, é que eu tinha feito uma mudança para colocar meu nome na barra de títulos, quando a desfiz o hack funcionou, mas acontece que ficou com o seguinte bug:
http://img32.imageshack.us/img32/8857/semttulolpd.png
Com o fundo preto ainda aparecendo em parte.
Tem como consertar isso ?

rafaeloliveira Tuesday, July 21, 2009 1:40:03 AM

Vai estar corrigido amanhã tb! Veja mais a noite que eu colocarei o link!

Marcos Aguiarmarkfeik Tuesday, July 21, 2009 1:44:10 AM

Ok, blz então.
Obrigado.

Aleksander AasAleksander Tuesday, July 21, 2009 8:19:17 AM

Awesome! I'll give it a shot when I come home!

dominicum Tuesday, July 21, 2009 5:43:34 PM

Hi - your screenshots look splendid, but I can't get it to work: I think I've done all that you've said, but I'm getting a 'no registered application for this extension' message whenever I hit one of your buttons (except close window, which works). The title bar is still there, but the tab bar did go translucent. Many thanks.

Bert Docksdertbox Tuesday, July 21, 2009 8:31:33 PM

Great job all the same, I really hope the Opera team include this sooner than version 11, especially as Firefox 3.7 has been redesigned to have it now as well. Chuck in the ability to see all the tabs from the Win7 taskbar and it's a winner.

Yu-Han Sunyhnsun Tuesday, July 21, 2009 9:56:46 PM

hehe, I'm a little stuck. I already put AERO as the Appearance, so it's black. And I already moved the windowstyle.exe to C:/ and I also added all four buttons to my toolbar, but I still don't know what's going on. Forexample, when I run OperaAero, nothing happens, an icon merely shows up in the tray area. And nothing happens to the windowstyle thing either. The tab bar is still black, so I'm clearly missing something realllly obvious and I hope you can tell me what I'm doing wrong XD. Thanks

rafaeloliveira Tuesday, July 21, 2009 11:14:19 PM

dominicum: have you placed the windowstyle.exe directly in c:\ ?
If not possible, you will have to remove the buttons, change the buttons.html file to reflect the new paths (remember that if the path contains spaces, you'll have to replace them with %20
Let me know if it still don't work.

yhnsun: just to confirm, before anything, are you running Vista or Win7 right? Confirm also that you have the text ' - Opera' in the browser title. I'll post a new version that don't require this, so if you've changed this in Opera, just wait and get the new one...

Yu-Han Sunyhnsun Wednesday, July 22, 2009 12:06:16 AM

by "running Vista" do you mean I'm using Vista? because yea i'm using Vista. and yea my browser has the '-Opera' in the browser title. so... I guess I'll just wait?

mfayaz Wednesday, July 22, 2009 5:27:07 AM

dude, any chance you could publicize a linux version of this hack, btw cool hack. idea

max1c Wednesday, July 22, 2009 6:04:19 PM

sweet very good job but is it possible to do this with "status bar" also ?

dominicum Wednesday, July 22, 2009 6:14:05 PM

Hi - I realized that the button paths in buttons.html said drive D - I've changed them to the drive where I put windowsstyle - E - and now it works, thanks a lot, it looks great - I've been half heartedly and fecklessly trying to get rid of the title bar for some time.

One other question though, and sorry if this is obvious - is it possible to hide the title bar when the window is not maximized? That's what I really want to do. I've tried making a button like this -

Hide Title Bar

but it doesn't work.

Thanks again.

rafaeloliveira Thursday, July 23, 2009 3:14:35 AM

Domenicum: Yes it is possible... Actually, the /H was there for it, but removing the titlebar with an window not maximized make it impossible to move it, so I changed it to maximize it. I'll post a new version tomorrow, and bring back this option!

S a msamfresco Thursday, July 23, 2009 3:23:56 AM

Maybe the Path solution is to put the windowstyle.exe inside the Windows directory (Most common C:\Windows\ ). Remove C:\ or D:\ or else, just "windowstyle.exe","/H Opera" and that's it! It works for me smile

z@h3kZAHEK Thursday, July 23, 2009 5:45:30 AM

thanks:)

Patrickptckian Thursday, July 23, 2009 7:55:24 AM

fala kra. parabens ficou mto maneiro. voce devia entrar na comunidade do Opera Brasil tambem! precisamos sempre de mais brasucas como voce!

my.opera.com/operabrasil

Te vejo lá!

Abracos

Shukurov Raphaelkuyantus Thursday, July 23, 2009 10:25:23 AM

nice hacks, especially, titlebar hide hack. but I don't understand, how to hide it automatically. I've add neseccary buttons on the bar (minimize, restore and close buttons). So, in buttons.html is wroten:
Remove the program titlebar
windowstyle.exe /HIDETITLEBAR Title_of_the_Running_Program
How should I use that construction, to hide titlebar? thanks!

Aleksander AasAleksander Thursday, July 23, 2009 11:56:28 AM

Try dropping the Status-bar also for a even cleaner look smile

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.