Share your custom Firefox/Minefield 4 stylish scripts

[br0adband]

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)

Thanks for all the help. The code that vasa1 presented does the job, but I had to alter the original code you provided to "drop" the address bar back down into the proper area with the setting margin-top: 14px !important; which gives me exactly what I was looking for, basically a "headless" version of the browser, with no buttons on it at all save for the Bookmarks Toolbar, and just enough space where I can still grab the top and move the window around if required.

Now if I could find a way to make the browser become a permanent fixture on the Desktop, like a permanent gadget, then I'd be all set... :D

But I'm done for now, really done, and I've backed up the folder 3 or 4 times now so I don't lose all this effort.

Have fun, always...

[max22]

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

Thanks are you talking about just the Firefox button and having my tabs moved over all the way? If so I use this one.

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

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

I also hide the star icon in the address bar and highlight current text feels I am in. My addon bar only appears for 10 secs whenever it needs to be active. For example when I switch tabs it will appear again.

[vajlent]

Is there any script which minimizes the width of the tabs?

they look ik sh*t right now! like 2 miles wide... :laugh:

[vasa1]

Is there any script which minimizes the width of the tabs?

they look ik sh*t right now! like 2 miles wide... :laugh:

The answer maybe here:

https://bugzilla.mozilla.org/show_bug.cgi?id=574654

"Maybe" because I'm still reading that bug but it looks likely!

[Deo Domuique]

.tabbrowser-tab:not([pinned])[fadein] {
  max-width: 210px !important;
}

I have it "210". Just adjust the number.

[+Heartripper Subscriber¹]

The answer maybe here:

https://bugzilla.mozilla.org/show_bug.cgi?id=574654

"Maybe" because I'm still reading that bug but it looks likely!

.tabbrowser-tabs{
  max-width: value !important;
}

where value is the desired width in px, 150px should work

[vasa1]

.tabbrowser-tabs{
  max-width: value !important;
}

where value is the desired width in px, 150px should work

When I tried 150px, it shrunk the space allotted to all tabs to a thin strip and so I got the left and right scroll arrows and just one visible tab with only 4 tabs.

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

.tabbrowser-tabs{
  max-width: 100px !important;
}

Maybe, it's something else conflicting. Will play around :) .

.tabbrowser-tabs{
  max-width: value !important;
}

where value is the desired width in px, 150px should work

I got this from the bug thread I referenced (courtesy timmyfox, IIRC):

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 
/*
.tabbrowser-tabs{
  max-width: 1000px !important;
}
*/

.tabbrowser-tab:not([pinned]) {
  max-width: 170px !important;
  min-width: 20px !important;

}
.tabbrowser-tab:not([fadein]) {
 max-width: 1px !important;
 min-width: 1px !important;
 max-width: 1px;
 min-width: 1px;

}

[foxxyn8]

When I tried 150px, it shrunk the space allotted to all tabs to a thin strip and so I got the left and right scroll arrows and just one visible tab with only 4 tabs.

I got this from the bug thread I referenced (courtesy timmyfox, IIRC):

This has duplicate properties. The first two would override the second two and they're all set to the same value anyway:

.tabbrowser-tab:not([fadein]) {
 max-width: 1px !important;
 min-width: 1px !important;
 max-width: 1px;
 min-width: 1px;
}

should be:

.tabbrowser-tab:not([fadein]) {
 max-width: 1px !important;
 min-width: 1px !important;
}

[vasa1]

This has duplicate properties. The first two would override the second two and they're all set to the same value anyway:

...

should be:

.tabbrowser-tab:not([fadein]) {
 max-width: 1px !important;
 min-width: 1px !important;
}

Done. Thanks!

[+Gary7 Subscriber²]

Since today's build, I cannot get the Menu Button to open unless I am in full screen. Any help would be appreciated.

[mNiosu]

Can someone please help me fix my styles. They got corrupt after upgrading to latest nightly. First of all there is the tab background problem and second can't remove the border between the tab toolbar and url bar any more with transparency enabled...

Thanks in advance!

Buttons as tabs and styled tabs:

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

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
 -moz-appearance: none !important;
 margin: 1 !important;
 padding: 0 !important;
 background-repeat: no-repeat !important;
 background-size: 200% !important;
 -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
 -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
 background-position: -5px -2px !important;
 background-image: -moz-linear-gradient(top,rgba(198,201,206,.60),
        rgba(151,160,172,.60)),
        -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button):hover {
 background-image: -moz-linear-gradient(top,rgba(198,201,206,.8),
        rgba(151,160,172,.8)),
        -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
 text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

#TabsToolbar > #home-button + #tabbrowser-tabs {margin-left: 0 !important;}

#TabsToolbar > #home-button {margin-right: 0px !important; margin-top: 0px !important; width: 31px !important;}

[sizemode="maximized"] #TabsToolbar > #home-button {margin-left: -3px !important;}

Transparency:

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

#nav-bar, #PersonalToolbar {border: none !important; background: transparent !important; text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important;}

[Drifus]

Can someone please help me fix my styles. They got corrupt after upgrading to latest nightly. First of all there is the tab background problem and second can't remove the border between the tab toolbar and url bar any more with transparency enabled...

Thanks in advance!

Buttons as tabs and styled tabs:

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

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
 -moz-appearance: none !important;
 margin: 1 !important;
 padding: 0 !important;
 background-repeat: no-repeat !important;
 background-size: 200% !important;
 -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
 -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
 background-position: -5px -2px !important;
 background-image: -moz-linear-gradient(top,rgba(198,201,206,.60),
        rgba(151,160,172,.60)),
        -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button):hover {
 background-image: -moz-linear-gradient(top,rgba(198,201,206,.8),
        rgba(151,160,172,.8)),
        -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
 text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

#TabsToolbar > #home-button + #tabbrowser-tabs {margin-left: 0 !important;}

#TabsToolbar > #home-button {margin-right: 0px !important; margin-top: 0px !important; width: 31px !important;}

[sizemode="maximized"] #TabsToolbar > #home-button {margin-left: -3px !important;}

Transparency:

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

#nav-bar, #PersonalToolbar {border: none !important; background: transparent !important; text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important;}

About 2º bug.

I'm facing same issue. Only in maximized mode.

Try this for now:

#main-window[sizemode="maximized"] #TabsToolbar[tabsontop="true"] {
	margin-bottom: -1px !important;
	background: none !important;
}

[+Gary7 Subscriber²]

Looks like many styles got mucked up.

[Drifus]

Can someone please help me fix my styles. They got corrupt after upgrading to latest nightly. First of all there is the tab background problem and second can't remove the border between the tab toolbar and url bar any more with transparency enabled...

Thanks in advance!

About you tab background:

My styles still work

.tabbrowser-tab:not([selected="true"]) {
	background-image: -moz-linear-gradient(rgba(190,190,190,.55), rgba(120,120,120,.55), rgba(50,50,50,.7)) !important;
}
.tabbrowser-tab:not([selected="true"]):hover {
	background-image: -moz-linear-gradient(rgba(255,255,255,.55), rgba(230,230,230,.55), rgba(120,120,120,.7)) !important;
}
.tabbrowser-tab[selected="true"] {
	background-image: -moz-linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.55), rgba(255,255,255,.55)) !important;
}

[+Gary7 Subscriber²]

How can I reduce the space between the menu button and the first tab??

[foxxyn8]

How can I reduce the space between the menu button and the first tab??

This is for a maximized window. If you need it for a normal window replace maximized with normal

#main-window[tabsontop="true"][sizemode="maximized"] #TabsToolbar {    
     margin-left: 32px !important; 

Adjust to suit your needs

[+Gary7 Subscriber²]

#main-window[tabsontop="true"][sizemode="maximized"] #TabsToolbar {    
     margin-left: 32px !important; 

Adjust to suit your needs

thanks I got it, had to change two values from 7.5em to 3.5em and another similar one.

[foxxyn8]

Can someone please help me fix my styles. They got corrupt after upgrading to latest nightly. First of all there is the tab background problem and second can't remove the border between the tab toolbar and url bar any more with transparency enabled...

Thanks in advance!

Hey mNiosu, try this:

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
	-moz-appearance: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
	padding: 0 !important;
	background-repeat: no-repeat !important;
	background-size: 200% !important;
        background-position: -5px -2px !important;
	-moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
	-moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]), 
.tabs-newtab-button, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
	background-image: -moz-linear-gradient(top,rgba(198,201,206,.60), rgba(151,160,172,.60)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover, 
.tabs-newtab-button:hover, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button):hover {
	background-image: -moz-linear-gradient(top,rgba(198,201,206,.8), rgba(151,160,172,.8)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
	text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

#TabsToolbar > #home-button + #tabbrowser-tabs {
	margin-left: 0 !important;
}

#TabsToolbar > #home-button {
	margin-right: 0px !important;
	width: 31px !important;
}

#main-window[sizemode="maximized"] #TabsToolbar > #home-button {
	margin-left: -3px !important;
}

#nav-bar, 
#PersonalToolbar {
	border: none !important;
	background: transparent !important;
	text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important;
}

[foxxyn8]

About 2? bug.

I'm facing same issue. Only in maximized mode.

Try this for now:

#main-window[sizemode="maximized"] #TabsToolbar[tabsontop="true"] {
	margin-bottom: -1px !important;
	background: none !important;
}

This worked for me:

#TabsToolbar {
        background-image: none !important
}

[r0bc]

Since today's build, I cannot get the Menu Button to open unless I am in full screen. Any help would be appreciated.

See my comment here http://forums.mozillazine.org/viewtopic.php?p=10413305#p10413305

[+Gary7 Subscriber²]

See my comment here http://forums.mozillazine.org/viewtopic.php?p=10413305#p10413305

Thanks, Yes you are right something must have changed. I was using this script bt Foxxyn8 Firefox Beta9+ Normal Window Tabs In Titlebar and it just stopped working right. I then later switched to this script Firefox 4 Menu Button with icon+(Tabs in Titlebar) and everything started to work again.

[Deo Domuique]

This is for a maximized window. If you need it for a normal window replace maximized with normal

#main-window[tabsontop="true"][sizemode="maximized"] #TabsToolbar {    
     margin-left: 32px !important; 

Adjust to suit your needs

Foxxyn... Just asking, why you suggest to add this code instead of normalize the window once and maximize it afterwards... This "trick" automatically adjusts the margin...

My point is... you think it's better to add it than leave it as is? You know what I mean, right? Paradeigm: I've removed the text "MineField" but the tabs abjusting their position automatically on normalize/maximize the main window...

What's your thesis about?

[r0bc]

Thanks, Yes you are right something must have changed. I was using this script bt Foxxyn8 Firefox Beta9+ Normal Window Tabs In Titlebar and it just stopped working right. I then later switched to this script Firefox 4 Menu Button with icon+(Tabs in Titlebar) and everything started to work again.

Confirm, it WFM also. There must have been something, in the styles we were using before, that messed up something with the top margin, making the app button inactive (unclickable, without the hover effect) below a certain margin.

[foxxyn8]

Foxxyn... Just asking, why you suggest to add this code instead of normalize the window once and maximize it afterwards... This "trick" automatically adjusts the margin...

My point is... you think it's better to add it than leave it as is? You know what I mean, right? Paradeigm: I've removed the text "MineField" but the tabs abjusting their position automatically on normalize/maximize the main window...

What's your thesis about?

Lack of sleep makes the mind fuzzy. I should have recognized that he had moved the tabs into the titlebar in normal mode in which case that adjustment is necessary, but only for the normal window.

Thanks, Yes you are right something must have changed. I was using this script bt Foxxyn8 Firefox Beta9+ Normal Window Tabs In Titlebar and it just stopped working right.

I fixed that yesterday. I just had to z-index #appmenu-button-container.

[mNiosu]

Hey mNiosu, try this:

Thanks a lot! As always the man with the answers. :D

What about the line between tab-bar and nav-bar? I can't seem to manage to remove it...

LE: Ignore this. I saw Drifus's post later, fixed it know. Thanks Drifus!