Firefox 4.0 Mockup Theme

By SpewBoy
in Tips, Tweaks & Customization

 Share

Recommended Posts

Apprentice

SpewBoy

Posted
Posted (edited)

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.

strata40_prev.jpg

Strata40_Beta_v0_2_by_SpewBoy.jpg

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 by SpewBoy
  • Srugie and manifesto
  • Like 2
Link to comment
https://www.neowin.net/forum/topic/807922-firefox-40-mockup-theme/
Share on other sites
Apprentice

SpewBoy

Posted
  • Author
Posted
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 ;)

Apprentice

SpewBoy

Posted
  • Author
Posted (edited)

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 by SpewBoy
Grand Master

ViperAFK

Posted
Posted

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.

post-159052-1249790491_thumb.png

  • 2 weeks later...
  • 3 weeks later...
Grand Master

trag3dy

Posted
Posted

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.

Grand Master

trag3dy

Posted
Posted (edited)

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 by trag3dy
This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.