Firefox 3.7 Mockup Redux Theme

[callummr]

- Some elements of the theme are going into the window edges, something that as far as I know isn't really possible (may be wrong).

About this, I've mentioned it before but it's been pretty much ignored. In a maximized window, elements can be drawn right to the (left/right) edge. Is it possible to detect the maximized state, altering for example the tools icon to extend to the edge in a similar fashion to the mockup? If it fades out, it would look fine whether or not the window is maximized.

Edit: And with some slightly less 'standard' implementations I'm sure you can draw just about anywhere, such as Chrome's tabs being in the Title bar. That might require something to be built into Firefox though, I've never looked into how extensions and themes can interact with the browser and Windows/Aero in that sense.

tl;dr Mozilla can do it, dunno if themes can.

Edited September 9, 2009 by callum:mr

[n3Tk0]

Please somebody post me all script in Stylish. :) I'm new here and I understand the code for the theme have some fixes after first post. Thanks a lot.

[Guest]

Simply beautiful... One thing, the home button seems brighter than back/forward ones

<image>

...and tabs' throbber works :D

Mind sharing the link for that VS?

[SpewBoy]

About this, I've mentioned it before but it's been pretty much ignored. In a maximized window, elements can be drawn right to the (left/right) edge. Is it possible to detect the maximized state, altering for example the tools icon to extend to the edge in a similar fashion to the mockup? If it fades out, it would look fine whether or not the window is maximized.

Edit: And with some slightly less 'standard' implementations I'm sure you can draw just about anywhere, such as Chrome's tabs being in the Title bar. That might require something to be built into Firefox though, I've never looked into how extensions and themes can interact with the browser and Windows/Aero in that sense.

tl;dr Mozilla can do it, dunno if themes can.

Themes can't by themselves, but addons might be able to. I actually changed my theme so that it detects when the browser is maximized and changes the spacing of the toolbars to fit better. When it is not maximized the toolbars span right to the very edge, but I removed this function because it only worked with aero visual styles, or else you would have buttons pressing right against the edge of your window, which didn't look good, whereas, using glasser removes the edges of the window to make it all glass.

Programs like Office 2010 (or whatever it's called) and even Win7 Wordpad have things in the titlebar so it's possible within the program anyway. Still, I have never seen a program overlay things onto the window edges (such as the tools button and the back button is also slightly overlaying). Plus, the window border has a shadow right around it in the mockups but you can't modify the actual window's border in themes. Only the contents of the window.

Ahh, well.

EDIT: Use this for detecting maximized windows:

window[maximized="true"]  { }

or

window:not([maximized="true"])  { }

[dert07]

The mockup definitely is created in Photoshop, although it's possible to move items like buttons or bars nearly everywhere in the window. As you can see with Google Chrome, they also placed the whole content onto the Glass and not just within the window's frame. In the mockups Firefox kind of does that, too.

The problem is, that those things normally require modifying the default DWM behaviour. This can be achieved by using an actual programming language like C# or VB while creating the software.

I'm not sure if it is possible to do it by JavaScript. Although the All-Glass add-on features a dwm-overlay.js, that applies the Glass style to toolbars and stuff and all the add-ons that enable to hide the title bar seem to be able to modify the window in some way.

For the Tools button, we already thought about creating the style where it touches the edge at least in maximized mode. We already know of the [maximized=true], but it didn't seem to work that well. If you like the idea though, we will see what we can do.

[SpewBoy]

Personally, using maximized mode at the moment is a bit risky, as there is a short delay (around 0.5 - 1 seconds) between when you maximize the window and Firefox recognizes that the window is maximized, so toolbar items will appear to "jump" to their new place after you have already maximized. Hopefully this will be improved in later FF versions, but 3.5, 3.6 and 3.7 all suffer from this.

Also, the addons that remove the titlebar only remove the titlebar. They don't modify the window much apart from that (that's why it breaks in glasser, because glasser relies on the titlebar's aero effects and with the titlebar gone it can't use the fx). I don't know of any addons that add things to the titlebar or window edges.

[mail]

I'm well aware it's a mockup that's why I said it doesn't look as good without the frostiness. Designing with transparency is a pain.

[SpewBoy]

I'm well aware it's a mockup that's why I said it doesn't look as good without the frostiness. Designing with transparency is a pain.

Hmm. Can't you just add more frost in your Vista or Win7 window colour options? I usually just select "Frost" as my window colour and it looks good. What's hard is getting the theme to work with all desktop backgrounds (from light to dark to pink to bright green etc.) I personally either use the "Frost" setting or ramp up the opaqueness to 3/4, but I always have the window colour as white.

[A.Gabri]

Great work on the theme , but i have a problem with the tab bar and the bookmarks folder background how can i fix this ?

also i have a request , if you can make an icon for the bookmarks folder it will be awesome :) .

[dert07]

Great work on the theme , but i have a problem with the tab bar and the bookmarks folder background how can i fix this ?

also i have a request , if you can make an icon for the bookmarks folder it will be awesome :) .

The bookmarks and tab bar background should only be used, when the bookmarks TOOLBAR is shown above the tab bar.

What do you mean by a new icon? Just redesign the little folder icon for bookmark folders? Currently it's the default Vista/7 look of folder icons. Why should we redesign it or better, what should we base the design on?

[A.Gabri]

The bookmarks and tab bar background should only be used, when the bookmarks TOOLBAR is shown above the tab bar.

What do you mean by a new icon? Just redesign the little folder icon for bookmark folders? Currently it's the default Vista/7 look of folder icons. Why should we redesign it or better, what should we base the design on?

so how can i remove that background even from the bookmarks toolbar ?, about the icon i know that it`s the default icon but what about making an icon that works better with the theme BTW, it was only a request not something i can`t live with so if you can make it it will be great otherwise no problem.

[SoapyHamHocks Member]

so how can i remove that background even from the bookmarks toolbar ?, about the icon i know that it`s the default icon but what about making an icon that works better with the theme BTW, it was only a request not something i can`t live with so if you can make it it will be great otherwise no problem.

That extra bit of code I posted was optional. If you do not want the alternative background don't add that code.

[A.Gabri]

That extra bit of code I posted was optional. If you do not want the alternative background don't add that code.

thanks it was my fault i didn`t read before using the code i`m sorry for, but a minor bug appears when i hover over the folder icon the hover effect maybe needs to reduce it`s height cause it appears over like one or two pixels over the tab .

[dert07]

thanks it was my fault i didn`t read before using the code i`m sorry for, but a minor bug appears when i hover over the folder icon the hover effect maybe needs to reduce it`s height cause it appears over like one or two pixels over the tab .

That's because the buttons always fill up the vertical space on the navigation toolbar. If we modify that it would mess up the normal bookmarks toolbar. So instead of using a folder for all your bookmarks and placing it in the nav-bar, you could try the bookmarks button, that comes with the Personal Menu add-on and hide the bookmarks toolbar. If it's too big for your taste we can create small versions of the bookmarks and tools buttons to fit the small icons style.

[A.Gabri]

ok thanks

[Black Rider]

Really nice this beta.

But in all versions there is one mistake on the tabs. They don't look like the mockup.

It' s the label of the current active tab. In the mockup it isn't bold, so I think it shouldn't be at your version ;)

I think you know the code but just for copy and paste:

.tabbrowser-tabs tab[selected="true"] label {
  color: black !important;
  font-weight: normal !important;
}

[Theymademedoit]

hey guys, I have one problem, no 2 actually

one is the bugged favicon when on the mozilla page or other pages which are secured, it normally should be green but the favicon is light blueish

and the second thing is that fission is bugged in the beta, if i try to use it there is no progress bar , only a green line under the progress bar which isn't grey as it should be.

also the favicon thing is smaller than it should be.

here's a pic

thanks anyway, awesome skin otherwise

[Black Rider]

The progress bar wasn't grey at any time... And the fission isn't bugged. This is how it looks like in the mockup.

For the small favicon theres a fix a few posts earlier.

[nero78]

Guys. PLEASE dont animate and bloat things to much :(

Animated RSS icon will just serve as an annoying animation that draws your eyes up on that icon over and over again.

[andrek]

What? It is slow enough for me so that I don't even realize it's animating while I surf the Internet..

[SMELTN]

agreed, I never even notice it.... but when I DO look up there I think it looks badass because it IS animated.. Its a GREAT touch

[BoneyardBrew Member]

agreed, I never even notice it.... but when I DO look up there I think it looks badass because it IS animated.. Its a GREAT touch

:D

[ViperAFK]

Guys. PLEASE dont animate and bloat things to much :(

Animated RSS icon will just serve as an annoying animation that draws your eyes up on that icon over and over again.

You must have ADD

[nero78]

You must have ADD

Yes. ADD and ADHD and bipolar (always manic stages) and post traumatic stress disorder and at last im highly hyperactive. Did i mention that i drink 23 cups of coffee each day and a 6 pack of red bulls?

[Penrynz]

When will you will release the final theme ? :D

I have waited so long for this. :)