Share your custom Firefox/Minefield 4 stylish scripts

[foxxyn8]

Someone really ought to buy you a pizza or something for all the free help you give...

^ Thanks. It's nice to be appreciated. :)

[Urindunk]

Oi lads. I registered to ask if any of you maybe knew how to make the tabs (and new tab button) square? I really hate rounded things.

Also would appreciate if any of you knew how to make the menubutton square too?

Last thing, is it possible to make this not-rounded when non-maximized?:

I'm so damn square, huh?

Anyway, thanks in advance!

[SoapyHamHocks Member]

Oi lads. I registered to ask if any of you maybe knew how to make the tabs (and new tab button) square? I really hate rounded things.

Also would appreciate if any of you knew how to make the menubutton square too?

Last thing, is it possible to make this not-rounded when non-maximized?:

I'm so damn square, huh?

Anyway, thanks in advance!

#appmenu-button,
#nav-bar {
  border-radius: 0 !important;
}

The tabs are images so you can't use CSS to do it. You need to either remake the images, or recreate them in CSS.

[Urindunk]

#appmenu-button,
#nav-bar {
  border-radius: 0 !important;
}

The tabs are images so you can't use CSS to do it. You need to either remake the images, or recreate them in CSS.

Thanks for the menubutton!

Regarding tabs.. I see.. Where would i get the default images, so i could edit them and then how would i replace the original ones, with mine?

Thanks,

[SoapyHamHocks Member]

Thanks for the menubutton!

Regarding tabs.. I see.. Where would i get the default images, so i could edit them and then how would i replace the original ones, with mine?

Thanks,

The image is located here: chrome://browser/skin/tabbrowser/tab.png, to use it:

.tabbrowser-tab,
.tabs-newtab-button {
  -moz-border-image: url(pathtoimage.png) 4 5 3 6 / 4px 5px 3px 6px repeat stretch !important;
  border-radius: 10px 8px 0 0 !important;
}

You will also need to tweak the border-radius values too.

[Urindunk]

Splendid! It's all great now, took a little time though, hehe.

Thanks alot your for help.

[vasa1]

I'm on the latest Minefield (Mozilla/5.0 (Windows NT 5.1; rv:2.0b13pre) Gecko/20110226 Firefox/4.0b13pre) and I have a slight problem :(

I had tweaked the close buttons on tabs, both active and inactive, using this code:

.tabbrowser-tab[selected="true"]
.tab-close-button {background: -moz-radial-gradient(white, maroon);
	-moz-border-radius-topleft: 6px !important;
	-moz-border-radius-topright: 6px !important;
	-moz-border-radius-bottomleft: 6px !important;
	-moz-border-radius-bottomright: 6px !important;
	}
.tabbrowser-tab:not([selected="true"])
.tab-close-button {background: -moz-radial-gradient(black, white);
	-moz-border-radius-topleft: 6px !important;
	-moz-border-radius-topright: 6px !important;
	-moz-border-radius-bottomleft: 6px !important;
	-moz-border-radius-bottomright: 6px !important;
	}

This had worked for several recent Minefield updates. Now, I'm seeing the close button (as I styled it) only on the active tab and nothing at all on the inactive tabs even if I hover over where the close button should be. I would very much like to have the close button visible on inactive tabs as well.

Is it possible?

[Urindunk]

Hm, guys, does your... favicon-holder-thing also looks like mine does, on the pic below (the left side)?

I was wondering if there was some way to make it like the mockup i made on the right side? or maybe it's something we just can expect Mozilla to fix soon?

[vasa1]

I'm on the latest Minefield (Mozilla/5.0 (Windows NT 5.1; rv:2.0b13pre) Gecko/20110227 Firefox/4.0b13pre) and I have a slight problem :(

I had tweaked the close buttons on tabs, both active and inactive, using this code:

.tabbrowser-tab[selected="true"]
.tab-close-button {background: -moz-radial-gradient(white, maroon);
	-moz-border-radius-topleft: 6px !important;
	-moz-border-radius-topright: 6px !important;
	-moz-border-radius-bottomleft: 6px !important;
	-moz-border-radius-bottomright: 6px !important;
	}
.tabbrowser-tab:not([selected="true"])
.tab-close-button {background: -moz-radial-gradient(black, white);
	-moz-border-radius-topleft: 6px !important;
	-moz-border-radius-topright: 6px !important;
	-moz-border-radius-bottomleft: 6px !important;
	-moz-border-radius-bottomright: 6px !important;
	}

This had worked for several recent Minefield updates. Now, I'm seeing the close button (as I styled it) only on the active tab and nothing at all on the inactive tabs even if I hover over where the close button should be. I would very much like to have the close button visible on inactive tabs as well.

Is it possible?

I wonder if it has been removed in the latest Minefield? In browser.css, there's no mention of ":not([selected=true])" in what I think is the relevant code:

/* Tab close button */
.tab-close-button {
  -moz-appearance: none;
  -moz-image-region: rect(0, 64px, 16px, 48px);
  border: none;
  padding: 0px;
  list-style-image: url("chrome://global/skin/icons/close.png");
}

.tab-close-button:-moz-system-metric(touch-enabled) {
  -moz-transform: scale(1.2);
}

.tab-close-button:hover,
.tab-close-button:hover[selected="true"] {
  -moz-image-region: rect(0, 32px, 16px, 16px);
}

.tab-close-button:hover:active,
.tab-close-button:hover:active[selected="true"] {
  -moz-image-region: rect(0, 48px, 16px, 32px);
}

.tab-close-button[selected="true"] {
  -moz-image-region: rect(0, 16px, 16px, 0);
}

.tab-close-button:focus {
  outline: none !important;
}

[foxxyn8]

I'm on the latest Minefield (Mozilla/5.0 (Windows NT 5.1; rv:2.0b13pre) Gecko/20110226 Firefox/4.0b13pre) and I have a slight problem :(

This had worked for several recent Minefield updates. Now, I'm seeing the close button (as I styled it) only on the active tab and nothing at all on the inactive tabs even if I hover over where the close button should be. I would very much like to have the close button visible on inactive tabs as well.

Is it possible?

.tabbrowser-tab:not([selected="true"]):not([pinned]) .tab-close-button {
        display: -moz-box !important;
}

I was wondering if there was some way to make it like the mockup i made on the right side?

try something like this:

#identity-box {
margin-top: -2px !important;
margin-bottom: -2px !important;
margin-left: -2px !important;
border-radius:0 !important;
}

[vasa1]

.tabbrowser-tab:not([selected="true"]):not([pinned]) .tab-close-button {
        display: -moz-box !important;
}

Perfect! Thank You yet again!

[Urindunk]

.tabbrowser-tab:not([selected="true"]):not([pinned]) .tab-close-button {
        display: -moz-box !important;
}

try something like this:

#identity-box {
margin-top: -2px !important;
margin-bottom: -2px !important;
margin-left: -2px !important;
border-radius:0 !important;
}

Brilliant Foxxy, much better! All it needs is the border on the right side, if its possible ,that'd be really great!

Thanks.

BTW, is it possible to edit the bagground that the titlebar uses whenever aero is disabled? (basic titlebar)

[foxxyn8]

Brilliant Foxxy, much better! All it needs is the border on the right side, if its possible ,that'd be really great!

BTW, is it possible to edit the bagground that the titlebar uses whenever aero is disabled? (basic titlebar)

#identity-box {
margin-top: -2px !important;
margin-bottom: -2px !important;
margin-left: -2px !important;
border-radius:0 !important;
border-right: 1px solid rgba(0, 0, 0, 0.32)!important;
}

not sure about the titlebar

[Urindunk]

Effin' perfect! Cheers.

Not to worry about titlebar, was just if anyone knew.

[mysiskatten]

can I do this with modified userchrome.css?

https://addons.mozilla.org/en-US/firefox/addon/icon-effects/

[SoapyHamHocks Member]

can I do this with modified userchrome.css?

https://addons.mozilla.org/en-US/firefox/addon/icon-effects/

This should take care of most of them.

.tabbrowser-tab .tab-content > image,
toolbarbutton > image {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

[mysiskatten]

This should take care of most of them.

.tabbrowser-tab .tab-content > image,
toolbarbutton > image {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

almost perfect

thanks!

edit:

bookmark sidebar icons and location bar icons still color

[Frylock86]

Anyway to square off my tabs, similar to IE9?

=D

[trag3dy]

Anyway to square off my tabs, similar to IE9?

=D

I would love something like that too.

[SoapyHamHocks Member]

almost perfect

thanks!

edit:

bookmark sidebar icons and location bar icons still color

Can't seem to get it to just effect the treechildren icons (sidebar,library), so the whole row is greyscale.

.tabbrowser-tab .tab-content > image,
toolbarbutton > image,
#urlbar-icons > image,
#identity-box image,
treechildren {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

[max22]

Ok this one may be a challenge for you all. How do I move my whole addonbar while using the Barlesque add-on to the top left hand corner of the screen right below my Navigation toolbar please? I know I could just move the icons to top to a totally new toolbar but do not want that. The bar would be to big and not work like it does in Barlesque.

[max22]

Oh yeah I forgot one thing how do I add the find bar to the top right hand corner as well ? It is not part of the addon bar but I am sure everyone here knows that already. Was just making sure is all. No need to rush either I am trying some new things as we speak. Thanks again.

[vajlent]

#identity-box {
margin-top: -2px !important;
margin-bottom: -2px !important;
margin-left: -2px !important;
border-radius:0 !important;
border-right: 1px solid rgba(0, 0, 0, 0.32)!important;
}

not sure about the titlebar

Almost there ;) but it needs radius on the left side, bottom left & top left.

[mysiskatten]

Can't seem to get it to just effect the treechildren icons (sidebar,library), so the whole row is greyscale.

.tabbrowser-tab .tab-content > image,
toolbarbutton > image,
#urlbar-icons > image,
#identity-box image,
treechildren {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

thanks :)

[grayscale]

I changed the background color of the app button, but I want to be purple (default) when in private mode. What do I need to change?

#main-window[sizemode="maximized"] #appmenu-button {
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;