Firefox 4.0 Mockup Theme

[SpewBoy]

This is a Firefox theme I have been working on. As the title states, it is based on the Firefox 4.0 mockups that have recently been floating round the net. It's called Strata40. It will transform your Firefox browser into a convincing Firefox 4 lookalike.

Go here to download this theme and for installation instructions. It's easier than it looks ;)

And that's it! Enjoy this Firefox 4 lookalike theme and tutorial :D

Edited August 8, 2009 by SpewBoy

[Hani]

thanks!!

[SnoopZ]

I started using just the basic theme of this without all the tweaks last night and it's perfect. :)

[Julienprz]

Really nice.

Does the green loading line work?

[SMELTN]

Looks good spewboy, I really like it. Although I wish the status bar was more transparent like the top is.

Are you working with BoneyardBrew and others on combining this theme with the 3.7 redux?

[SpewBoy]

Really nice.

Does the green loading line work?

Yep. Just follow all of the necessary steps of the tutorial and the loading bar will work. This means you need the Fission addon and my progress bar skin. These are all explained about at the download site :)

Looks good spewboy, I really like it. Although I wish the status bar was more transparent like the top is.

Are you working with BoneyardBrew and others on combining this theme with the 3.7 redux?

BoneyardBrew and I have been discussing working together and it could happen. We might be working separately while sharing elements of our themes until they are the same, then we will combine them into one ;)

[SMELTN]

cool. What about the status bar, can you make it transparent also? It would look a lot better IMO

[SpewBoy]

Yep. Sure. I can whip up a Stylish script for you that enables the glassed status bar. I'll edit this post with the results.

EDIT: Here is the "Strata40 - Glasser Fixes" script, except without the bits that force the status bar to be opaque. See how this goes for you:

/* force urlbar and searchbar style */

#main-window #searchbar .searchbar-textbox,
#main-window #urlbar
{
  -moz-background-clip: padding;
  background-color: rgba(255, 255, 255, 0.6) !important;
  opacity: 0.99 !important;
  border: 2px solid !important;;
  margin-top: -1px !important;
  height: 24px !important;
  -moz-border-top-colors: rgba(0, 0, 0, 0.1) rgba(255, 255, 255, 0.9)  !important;
  -moz-border-right-colors: rgba(0, 0, 0, 0.1) rgba(255, 255, 255, 0.9) !important;
  -moz-border-left-colors: rgba(0, 0, 0, 0.1) rgba(255, 255, 255, 0.9) !important;
  -moz-border-bottom-colors: rgba(0, 0, 0, 0.35) rgba(255, 255, 255, 0.9) !important;
  -moz-appearance: none !important;
}

/* force glass shaded personal bar */

#PersonalToolbar  {
  -moz-appearance: none !important; 
  background: none !important;
}

.db_downbar {
  -moz-appearance: none !important;
  background-color: rgba(240, 240, 240, 0.99) !important;
}

/* force text black with white glow */

#status-bar,
#FindToolbar,
#personal-bookmarks toolbarbutton,
.toolbarbutton-text,
.statusbarpanel-text,
.findbar-find-fast,
.checkbox-label-box,
#sidebar-title,
#navigator-toolbox .menubar-text,
.tab-text
{
  color: black !important;
  text-shadow: white 0px 0px 4px !important; 
}

/* force show tab-bottom */

.tabs-bottom {
  display: -moz-box !important;
  background: -moz-dialog url("chrome://browser/skin/tabbrowser/tabstrip-bottom.png") repeat !important;
  border: 1px solid !important;
  border-color: rgba(0, 0, 0, 0.6) !important;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
}

/* fix non-selected tab alignment and borders */

.tabbrowser-tab:not([selected="true"]), .tabs-newtab-button {
  margin-bottom: 4px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  border: 2px solid !important;
  border-bottom: 1px solid !important;
  opacity: 1 !important;
  -moz-border-top-colors: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.8) !important;
  -moz-border-right-colors: rgba(0, 0, 0, 0.4) rgba(255, 255, 255, 0.3) !important;
  -moz-border-left-colors: rgba(0, 0, 0, 0.4) rgba(255, 255, 255, 0.3) !important;
  -moz-border-bottom-colors: rgba(0, 0, 0, 0.4) !important;
}

/* apply aero style to sidebar */

sidebarheader {
  -moz-appearance: none !important;
  background: black !important;
  min-height: 27px !important;
  border-bottom: 1px solid !important;
  -moz-border-bottom-colors: rgba(0, 0, 0, 0.4) !important;
  border-top: none !important;
}

#sidebar-splitter 
{
  border: transparent !important;
}

#downbarHolder
 {
  opacity: 0.99 !important;
}

#identity-box {
  -moz-border-start: 1px solid !important;
  -moz-border-left-colors: rgba(255,255,255,1) !important;
}

Paste that over the other stylish script and hopefully it should make the status bar transparent :D

Edited August 7, 2009 by SpewBoy

[SMELTN]

Yep. Sure. I can whip up a Stylish script for you that enables the glassed status bar. I'll edit this post with the results.

awesome thanks

[ViperAFK]

The loading bar is inside my urlbar instead of under it, how can I fix that? Also my urlbar doesn't have the slightly rounded edges on the favicon box.

[Orien]

From the screenshots, looks very nice.

[ViperAFK]

fixed the loading bar by updating fission but my urlbar doesn't look quite like your screen shot (left side favicon box)

Also as you see the statusbar text looks bad, can I make the text more readable on the dark background (brighter white glow like titlebar text)

Theme is amazing besides these two issues.

[Kudo]

Wow! This looks really nice. I am going to give it a try.

Thanks! :)

[Antaris Veteran]

Nice theme, but I'm getting a whole load of black behind my tabs, instead of transparency?

[A.Gabri]

i can`t get the statusbar to be transparent , i pasted the posted above code and nothing happens how can i achieve this

[SMELTN]

hmm since the update my statusbar is not transparent either. Can you update the statusbar code for transparency Spewboy?

[trag3dy]

That's hot. I really like it. Especially the small button version. However I have a certain customization I would like to make...is it possible to change it so the corners on the tabs/new tab button/url bar/search bar are squared? Is it possible modifying the style config? Or are those things part of the skin?

At any rate, it's awesome, great work.

[trag3dy]

I can't edit my post any more...anyways, I noticed a slight imperfection with the tabs. When you switch from an active to an inactive tab the site icon thing jumps a few pixels to the right. Also the whole text on tabs could stand to be moved to the left a little more, imo. Still nothing game breaking and it looks great. Maybe it's just my Firefox that is like that. I don't have any extensions or user styles that that would affect it though.

Edited September 8, 2009 by trag3dy

[LightIdea]

I have Windows98, how can I get glass?

[Penrynz]

I have Windows98, how can I get glass?

That's impossible. :)

Only vista and 7 can have that glass effect. :D

[JorgeIvan]

Thanks1

[Chris123NT]

I have Windows98, how can I get glass?

:blink:

[Dapen]

Nice theme, but I'm getting a whole load of black behind my tabs, instead of transparency?

Yeah same here, best Firefox theme beside that!

[Kudo]

Yeah same here, best Firefox theme beside that!

Did you follow the instructions included in the archive to install the theme? Cause it works if you do ;)

[Robbie Khan Reviews]

Sweet!