Share your custom Firefox/Minefield 4 stylish scripts

[...w.K...]

This is such a great thread! Found many lovely stylish scripts here. Thanks all but is there a way to make some slight transparency within the windows of FF where the site always show?

[vasa1]

..., but I'd really love to get that even more minimalistic second shot if it's possible at all. I don't need buttons at all since I use All-In-One Gestures for most everything (I have a ton of gestures that can do most anything with the flick of the mouse) so, I do like the clean look and it can't get much cleaner than this. :D

A few points/questions, if you don't mind, assuming Windows OS and FF4...

Do you really need the appmenu button and the search box and the minimize/maximize/close button (title bar)?

You can set things up with FF to take up just two rows. The top row being for tabs, and the lower row for the "awesome bar" and extensions.

(post edited a bit!)

[br0adband]

A few points/questions, if you don't mind, assuming Windows OS and FF4...

Do you really need the appmenu button and the search box and the minimize/maximize/close button (title bar)?

You can set things up with FF to take up just two rows. The top row being for tabs, and the lower row for the "awesome bar" and extensions.

(post edited a bit!)

What you see in those pics is how I want things to be, but I appreciate that other people prefer things their own ways... just as long as they can appreciate that I prefer things in my own ways. :D

My belief is that:

a) Tabs should be above the actual window pane - this provides the absolute fastest access to tabs which are the primary forms of content, aka what you're looking at so you'd want them to be in the fastest accessible portion of the browser - aka right above the content itself. This is the stuff I need to access and switch between with the highest priority hence the most minimal "reach" to get to it.

b) Bookmarks Toolbar is next, which provides the fastest possible access to my most frequently visited sites. This is the stuff that actually will load new content, so its priority is just below the active content in the tabs themselves.

c) Address Bar is at the top, always, since that requires manual input and hence takes the most time to access so it's the furthest away from the content itself. Lowest priority as I don't necessarily have to type very often with Paste and Go 3, Plain Text To Link, and Linkification all working in tandem to make use of links in pages that aren't specifically "proper links" at any given time.

It's a priority structure that I've developed over the decades (yes, decades of being online, since the late 1970s when ARPANET was actually something useful and long before browsers and WWW were even imagined) so, this layout is superior to all others for me and how I get things done.

I very rarely ever run my browser full screen, I don't see the point of it unless I'm browsing wallpaper websites with very large images. I keep my browser at just barely larger than a 1100x800 resolution which is more than enough for about 95% of the content out there - a vast majority of websites are retooling themselves for a smaller layout because of the iPad and other such devices. The screenshot(s) above are about the native size I keep the browser at, so...

The layout that I've chosen is the best for me, that's about as simple as I can make it. :)

Now, if I can get it all down to just the three rows, I'm set for a very long time to come... kinda disappointed that they yanked out the actual Status Bar but I have the extension to emulate that once again, just didn't install it - and yes I prefer to have it always there and visible; that "pops up when needed" Chrome-style thing isn't to my particular liking.

[vasa1]

If you just right-click on the tabs bar, you get the option for tabs on top (or not).

[foxxyn8]

I search a solution without addon Status-4-Evar, can CSS only bring back this fucntion?

No. The feature has been removed. There is no native code base to style.

This is such a great thread! Found many lovely stylish scripts here. Thanks all but is there a way to make some slight transparency within the windows of FF where the site always show?

Not yet possible.

...' date=' but I'd really love to get that even more minimalistic second shot if it's possible at all. I don't need buttons at all since I use All-In-One Gestures for most everything (I have a ton of gestures that can do most anything with the flick of the mouse) so, I do like the clean look and it can't get much cleaner than this.[/quote']

Now this is possible, unfortunately I can't work anything up for it right now, it's late I need to sleep. :)

edit: mostly it can be done by disabling tabs on top. That will give you navbar on top then bookmark bar then tab bar. After that it's just positoning and margins.

[br0adband]

Now this is possible, unfortunately I can't work anything up for it right now, it's late I need to sleep. :)

edit: mostly it can be done by disabling tabs on top. That will give you navbar on top then bookmark bar then tab bar. After that it's just positoning and margins.

Well, if you can toss any suggestions my way I'd appreciate it. I already have the layout as shown, with Tabs down below so that setting is locked in. Now it's just a question of either moving the Address Bar/Navbar/whatever people wanna call it up there in between the gadgets, or perhaps disabling the gadgets all together as I really don't have much use for either of them. I get the menu bar by pressing Alt, and I can close the app with Alt+F4 or minimize it with a click on the Taskbar button, so yeah... the more minimal the better. :D

Thanks...

[foxxyn8]

Well, if you can toss any suggestions my way I'd appreciate it. I already have the layout as shown, with Tabs down below so that setting is locked in. Now it's just a question of either moving the Address Bar/Navbar/whatever people wanna call it up there in between the gadgets, or perhaps disabling the gadgets all together as I really don't have much use for either of them. I get the menu bar by pressing Alt, and I can close the app with Alt+F4 or minimize it with a click on the Taskbar button, so yeah... the more minimal the better. :D

Thanks...

This will move the nav-bar to the titlebar. It'll give ya something to play with. I'll be back later this morning/afternoon.

#main-window:not([tabsontop="true"]) #nav-bar {    
     margin-left: 50px !important; 
     margin-right: 110px !important; 
}

#main-window:not([tabsontop="true"]) #toolbar-menubar { 
     margin-left: 50px !important; 
     margin-top: -22px !important; 
}

[br0adband]

AWESOME!!! :D Thanks for the code, it looks great albeit the actual Address Bar area is a bit "bloated" - but I'll worry about making it more narrow (if that's even possible) later; it kinda bleeds over the topmost border while the search box fits exactly as I'd hoped... I wonder why.

So far so good, and this is enough to get me using FF4 pretty much full time given some addons I have are still not working 100%, but it's definitely enough. It's almost perfect now... ;)

Many thanks, foxxyn8.

[ozgeek]

Your welcome. :hmmm:

Your code looks great but I changed mind about colour (too grey). Might want blue. Can you tell me what I could do to change colour so I can adjust myself. I see RGB which I know stands for Red, Green and Blue and Alpha. But there are about 4 sets of those. Which one does which?

[foxxyn8]

Your code looks great but I changed mind about colour (too grey). Might want blue. Can you tell me what I could do to change colour so I can adjust myself. I see RGB which I know stands for Red, Green and Blue and Alpha. But there are about 4 sets of those. Which one does which?

moz-linear-gradient(transparent, rgba(91, 91, 91, 0.15) 1px, rgba(0, 0, 0, 0.3) 60%), -moz-linear-gradient(rgb(207, 219, 236), rgb(207, 219, 236)) !important

a gradient that starts with rgba(91, 91, 91, .5)- and ends with a rgba(0, 0, 0, 0.3)- in the middle of the tab -60%- and then goes with that last color till the end of the tab. The second gradient paints a color under the first. You could just use one, but that's the background-image property for an inactive tab.

https://developer.mozilla.org/en/CSS/-moz-linear-gradient

[Drifus]

I updated the style. Sorry for the delay. Much work and a little lazy to use my spare time to publish the code.

Drifus - Firefox 4 project - aero clean

### FEATURES ###

Slim. Only 9 pixels taller than IE 9 beta.

Transparent, without losing usability

Transparent firefox button, thin in maximized mode and tabs on tittle bar. Mouse over on the top left side near first tab.

Support for double clicking tabbar open new tab

Top space for aero snaps when in maximized mode and tabs on title

Great integration with clean customized aero themes like Shine 2.0

Auto-hide add-on Bar Facebook friendly

Find Bar customized according to add-on Bar

Changelog (The most important changes I can remember) :unsure:

- feb.08.2011

* Many changes in order to fit it to the new pre-beta releases

* less rounded

* more slim

* a little bit less transparent

* Invisible button that is visible with mouse over. And when in maximized mode, it becomes thinner.

* no borders around content area.

* auto-hide add-on Bar Facebook friendly

* super slim add-on Bar Option - If you don't like autohide add-on Bar. See the instructions within the code

* codes for tabs on bottom

* more room for aero snaps functions when in maximized mode and tabs on title

[br0adband]

Ok, so here's the finished look - I ended up making one modification to the code foxxyn8 posted above (edited the margin-top: -22px to -16px which dropped the address bar down precisely where it should be as it now is) but overall I am extremely happy with this and it'll be my permanent layout for FF4 from this point on:

Now, I have a question and I'm not 100% sure I should ask it here in this thread but, you folks are way way more experienced when dealing with Stylish and layout changes to Firefox so, here goes. Also, note that right now I have no themes installed, just the stock Strata one that comes with Firefox 4 (hence the bluish hue to the Bookmarks Toolbar/Tab bar which I can't stand but, that's why I'm asking the following question.

In that image I placed a red X to designate where a second tab would appear if I created a new blank one. Now, here's my problem:

If I don't install any Personas (since I do like a few of them, basically solid colors like the gloss white or light grey ones), I can double click my mouse right on that red X and get a second blank tab. That's basically a default of Firefox, from what I can tell. I can do it with FF 3.6.13 (my current main browser till I get all this work done). But, here's the funny part: if I install any themes, of any kind, from anywhere, even something with Stylish, and I double-click that same point where the red X is, Firefox 4 will maximize the window as though that spot was the title bar of the window itself (which I obviously don't actually have anymore).

I can't figure it out. If I disable/remove the theme, drop back to Strata, the double-click opens a blank tab as expected; reinstall a theme, double-click maximizes the window.

Am I missing something? Can anyone offer any advice on how to get a theme/Personas installed and yet keep the browser from maximizing on a double-click on that spot when it should just create a new tab?

If anyone can help with that one last aspect, then I'll be done with setting up Firefox 4 to my future liking... if not, that's cool, the help so far has been incredibly useful. ;)

[foxxyn8]

Ok, so here's the finished look - I ended up making one modification to the code foxxyn8 posted above (edited the margin-top: -22px to -16px which dropped the address bar down precisely where it should be as it now is) but overall I am extremely happy with this and it'll be my permanent layout for FF4 from this point on:

Now, I have a question and I'm not 100% sure I should ask it here in this thread but, you folks are way way more experienced when dealing with Stylish and layout changes to Firefox so, here goes. Also, note that right now I have no themes installed, just the stock Strata one that comes with Firefox 4 (hence the bluish hue to the Bookmarks Toolbar/Tab bar which I can't stand but, that's why I'm asking the following question.

In that image I placed a red X to designate where a second tab would appear if I created a new blank one. Now, here's my problem:

If I don't install any Personas (since I do like a few of them, basically solid colors like the gloss white or light grey ones), I can double click my mouse right on that red X and get a second blank tab. That's basically a default of Firefox, from what I can tell. I can do it with FF 3.6.13 (my current main browser till I get all this work done). But, here's the funny part: if I install any themes, of any kind, from anywhere, even something with Stylish, and I double-click that same point where the red X is, Firefox 4 will maximize the window as though that spot was the title bar of the window itself (which I obviously don't actually have anymore).

I can't figure it out. If I disable/remove the theme, drop back to Strata, the double-click opens a blank tab as expected; reinstall a theme, double-click maximizes the window.

Am I missing something? Can anyone offer any advice on how to get a theme/Personas installed and yet keep the browser from maximizing on a double-click on that spot when it should just create a new tab?

If anyone can help with that one last aspect, then I'll be done with setting up Firefox 4 to my future liking... if not, that's cool, the help so far has been incredibly useful. ;)

Don't know why it's doing that, but you can middle click or if you must absolutely have the double click new tab you can use this:

#navigator-toolbox:not([tabsontop="true"]) > #TabsToolbar {
        -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar") !important;
}

[max22]

Here is my finished look so far.

I could put the other things in my menu button but don't want to. Easier with one click.

[br0adband]

Don't know why it's doing that, but you can middle click or if you must absolutely have the double click new tab you can use this:

#navigator-toolbox:not([tabsontop="true"]) > #TabsToolbar {
        -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar") !important;
}

Well I'll be damned, that worked, perfectly... OUTSTANDING!!! :D

Bazillions of Intarwebs to you, my good fellow... or lady, if that's the case. Brilliant!!! :)

/me is now officially done with customizing Firefox 4, has laid out the steps in a nice document so it can be redone on a brand new clean installation in minutes if required (which won't be since this is portable)... many thanks...

[Yorak]

Hey everyone, I see the different scripts that will turn the Firefox button into a drop down arrow instead, but is there any way to completely remove it, and move the tabs over to where the button used to be? I have seen screenshots like this but I am not sure what code to be looking for exactly.

Thanks in advance. :)

[vasa1]

Is there any way to get the "URL preview" back, like it was in beta 10, and turn off the "bloody stupid" status display in the bottom left corner?

It doesn't look like the URL preview has been taken away in beta 11. It's still there (for me).

As people have suggested, the status display can be turned off. But for those who want it, it can be tweaked a bit as well. Here are my amateur tweaks:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.statuspanel-inner {
width: 300px !important;
}

.statuspanel-label {
background: -moz-linear-gradient(left, #808080, #b0b0b0) !important;
border: none !important; 
color: red !important; 
}

The upper bit was suggested by Tss, IIRC. The lower bit came from the write up on a bug, I forgot which :( ...

diff --git a/browser/themes/gnomestripe/browser/browser.css b/browser/themes/gnomestripe/browser/browser.css
--- a/browser/themes/gnomestripe/browser/browser.css
+++ b/browser/themes/gnomestripe/browser/browser.css
@@ -1836,16 +1836,17 @@ panel[dimmed="true"] {

 .statuspanel-label {
   margin: 0;
   padding: 2px 4px;
   background: -moz-linear-gradient(white, #ddd);
   border: 1px none #ccc;
   border-top-style: solid;
   color: #333;
+  text-shadow: none;
 }

 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
   border-right-style: solid;
   border-top-right-radius: .3em;
   margin-right: 1em;
 }
diff --git a/browser/themes/pinstripe/browser/browser.css b/browser/themes/pinstripe/browser/browser.css
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@@ -2392,16 +2392,17 @@ panel[dimmed="true"] {

 .statuspanel-label {
   margin: 0;
   padding: 2px 4px;
   background: -moz-linear-gradient(white, #ddd);
   border: 1px none #ccc;
   border-top-style: solid;
   color: #333;
+  text-shadow: none;
 }

 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
   border-right-style: solid;
   border-top-right-radius: .3em;
   margin-right: 1em;
 }
diff --git a/browser/themes/winstripe/browser/browser.css b/browser/themes/winstripe/browser/browser.css
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@@ -2298,16 +2298,17 @@ panel[dimmed="true"] {

 .statuspanel-label {
   margin: 0;
   padding: 2px 4px;
   background: -moz-linear-gradient(white, #ddd);
   border: 1px none #ccc;
   border-top-style: solid;
   color: #333;
+  text-shadow: none;
 }

 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
   border-right-style: solid;
   border-top-right-radius: .3em;
   margin-right: 1em;
 }

PS: It works if placed in userChrome.css as well.

[Yorak]

Hey everyone, I see the different scripts that will turn the Firefox button into a drop down arrow instead, but is there any way to completely remove it, and move the tabs over to where the button used to be? I have seen screenshots like this but I am not sure what code to be looking for exactly.

Thanks in advance. :)

Just like yours, max22. Could you inform me what part of your script does this?

[foxxyn8]

Hey everyone, I see the different scripts that will turn the Firefox button into a drop down arrow instead, but is there any way to completely remove it, and move the tabs over to where the button used to be? I have seen screenshots like this but I am not sure what code to be looking for exactly.

Thanks in advance. :)

http://userstyles.org/styles/42374

[Yorak]

http://userstyles.org/styles/42374

Sweet bro, thanks a bunch. :)

[vasa1]

http://userstyles.org/styles/42374

foxxyn8, if the poster just doesn't want to see the appmenu button, won't this be enough?

#appmenu-button { display: none !important; }

[foxxyn8]

foxxyn8, if the poster just doesn't want to see the appmenu button, won't this be enough?

#appmenu-button { display: none !important; }

If that was all he wanted to do, then yes, but he requested

is there any way to completely remove it, and move the tabs over to where the button used to be

edit: I understand what you're getting at. That style just adds some additional aesthetic styling and moves the tabs into the tiltebar in a normal window.

[br0adband]

Ok, ok, so much for being done... geez, you folks make it tough.

So I just used that snippet of code above that foxxyn8 supplied to remove the menu button entirely, then edited the previous code to alter the margin for the address bar (now at 10px, which leaves a little space so I can grab the window to move it if required) and it just looks... well, odd with the default min/max/close gadgets on the right side. My brain sees it, knows it's way outta whack and so now I want to remove those gadgets too if possible, which I'm sure it is, I just don't have a clue... ;)

I'll search back through this thread for code to do it, but if anyone is up for the task or knows the code off the top of their heads, by all means drop a post and I'll be eternally grateful.

Thanks...

[vasa1]

...

default min/max/close gadgets on the right side ... to remove those gadgets too ...

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

#titlebar {display: none !important; }

[foxxyn8]

Ok, ok, so much for being done... geez, you folks make it tough.

So I just used that snippet of code above that foxxyn8 supplied to remove the menu button entirely, then edited the previous code to alter the margin for the address bar (now at 10px, which leaves a little space so I can grab the window to move it if required) and it just looks... well, odd with the default min/max/close gadgets on the right side. My brain sees it, knows it's way outta whack and so now I want to remove those gadgets too if possible, which I'm sure it is, I just don't have a clue... ;)

I'll search back through this thread for code to do it, but if anyone is up for the task or knows the code off the top of their heads, by all means drop a post and I'll be eternally grateful.

Thanks...

I don't think you can do that with css (I know you can't on Windows 7 Aero), but there's an add-on for that :)

Hide Caption Titlebar Plus (Smart)