Share your custom Firefox/Minefield 4 stylish scripts

February 26, 2011

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

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

February 27, 2011

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!

1,526 · February 27, 2011

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.

February 27, 2011

#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,

1,526 · February 27, 2011

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.

February 27, 2011

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

Thanks alot your for help.

February 27, 2011

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?

February 27, 2011

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?

February 27, 2011

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;
}

February 27, 2011

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;
}

February 27, 2011

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

Perfect! Thank You yet again!

February 27, 2011

.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)

February 27, 2011

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

February 27, 2011

Effin' perfect! Cheers.

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

February 27, 2011

can I do this with modified userchrome.css?

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

1,526 · February 28, 2011

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 &gt; image,
toolbarbutton &gt; image {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

February 28, 2011

This should take care of most of them.

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

almost perfect

thanks!

edit:

bookmark sidebar icons and location bar icons still color

2,516 · February 28, 2011

Anyway to square off my tabs, similar to IE9?

=D

10,523 · February 28, 2011

Anyway to square off my tabs, similar to IE9?

=D

I would love something like that too.

1,526 · February 28, 2011

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 &gt; image,
toolbarbutton &gt; image,
#urlbar-icons &gt; image,
#identity-box image,
treechildren {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

1,639 · February 28, 2011

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.

1,639 · February 28, 2011

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.

February 28, 2011

#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.

February 28, 2011

Can't seem to get it to just effect the treechildren icons (sidebar,library), so the whole row is greyscale.
.tabbrowser-tab .tab-content &gt; image,
toolbarbutton &gt; image,
#urlbar-icons &gt; image,
#identity-box image,
treechildren {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

thanks :)

1,483 · February 28, 2011

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;

Sign In

Share your custom Firefox/Minefield 4 stylish scripts

Recommended Posts

foxxyn8

Link to comment

Share on other sites

Urindunk

Link to comment

Share on other sites

SoapyHamHocks Member

Link to comment

Share on other sites

Urindunk

Link to comment

Share on other sites

SoapyHamHocks Member

Link to comment

Share on other sites

Urindunk

Link to comment

Share on other sites

vasa1

Link to comment

Share on other sites

Urindunk

Link to comment

Share on other sites

vasa1

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

vasa1

Link to comment

Share on other sites

Urindunk

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

Urindunk

Link to comment

Share on other sites

mysiskatten

Link to comment

Share on other sites

SoapyHamHocks Member

Link to comment

Share on other sites

mysiskatten

Link to comment

Share on other sites

Frylock86

Link to comment

Share on other sites

trag3dy

Link to comment

Share on other sites

SoapyHamHocks Member

Link to comment

Share on other sites

max22

Link to comment

Share on other sites

max22

Link to comment

Share on other sites

vajlent

Link to comment

Share on other sites

mysiskatten

Link to comment

Share on other sites

grayscale

Link to comment

Share on other sites

Recently Browsing 0 members