Share your custom Firefox/Minefield 4 stylish scripts

[Phixion]

I tried installing Stylish but says it hasn't been updated to work with my version of firefox (latest beta).

[+Gary7 Subscriber²]

I tried installing Stylish but says it hasn't been updated to work with my version of firefox (latest beta).

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

The above should work if you have add on compatibility reporter installed.

[Kyang]

I can't use it as my scripts do not show up in it. This is do to the fact that I have altered scripts/combined some so in stylish none of them show up.

I'm not sure I follow what you mean by you, altered them, and now they don't show up.

[vajlent]

Is it possible to edit the spacer you can use in the customize menu?

there is "flexible space" & "space" to choose from.

I've used "space" here.

Have a look to see what i mean:

I have rounded corners in the nav.bar and want the "home" button more close to the edge

to suite the bar.

Maybe a little bit vague, but I hope someone understands :laugh:

Cheers

[bogas04]

Anyone who wants to make a mockup like style , i am giving you a base code :)

Pic :

Code :

#appmenu-button dropmarker
{ margin: 0 1px 0 0 !important; }

#appmenu-button-container
{	position: fixed !important;
	top: -1px !important; }

#main-window[tabsontop="true"] menubar 
{	margin-left: 100px !important; }


#main-window[sizemode="maximized"][tabsontop="true"] #appmenu-button-container 
{	position: fixed !important; 
 	margin: 6px 0px 4px 4px !important;
 	top: 2px !important; }

#navigator-toolbox[tabsontop="true"] #TabsToolbar
{ padding: 22px 0 0 9px !important; }

#main-window[tabsontop="true"]
{ margin-top: -25px !important; }

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

#appmenu-button {
 -moz-box-shadow: 0 0 2px 0 rgba(255,255,255,.75) inset,
 	0 1px 0 rgba(255,255,255,.45) inset !important;
 border: 2px solid !important;
 border-top: 0!important;
 -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
 -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
 -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
 max-height: 20px !important;
 min-height: 20px !important;
 background-color: rgba(255,255,255,1) !important;
 background-image: -moz-linear-gradient(rgba(244,172,17,.85),
 	rgba(218,107,17,1) 100%) !important;
 padding: 0 16px 1px 16px !important;
}

#appmenu-button:hover:not(:active):not([open]),
#bettermenu-button:hover:not(:active):not([open]) {
 background-image: -moz-linear-gradient(rgba(244,172,17,.70),
 	rgba(218,107,17,1) 100%) !important;
}

#appmenu-button:hover:active,
#appmenu-button[open],
#bettermenu-button[open] {
 -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.4) !important;
}

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
 -moz-appearance: none !important;
 margin: 0 !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) {
 background-position: -5px -2px !important;
 background-image: -moz-linear-gradient(top,rgba(198,201,206,.70),
 	rgba(151,160,172,.70)),
 	-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):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;
}

I have rounded corners in the nav.bar and want the "home" button more close to the edge

to suite the bar.

Cheers

Code for rounded corners please!! :drool:

[+Gary7 Subscriber²]

I'm not sure I follow what you mean by you, altered them, and now they don't show up.

The scripts I used were from userstyle.org and some from here. But I did not use the entire script of anyone of them. Just bits and pieces. I just put the CSS in userChrome.css manually. When I tried to install Stylish, it showed no scripts being installed. In order for them to show up in Stylish, I would have to remove everything I have and then install each script using Stylish and then edit the scripts. That is way too much work.

[vajlent]

Code for rounded corners please!! :drool:

Here you go:

(don't remember where I got it from)

#navigator-toolbox[tabsontop="true"] #nav-bar {
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}

[bogas04]

Here you go:

(don't remember where I got it from)

#navigator-toolbox[tabsontop="true"] #nav-bar {
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}

Thanks :)

I created a userstyle of the my above code and this rounded navigation bar code :D

http://userstyles.org/styles/36259?r=1283177010

[Kyang]

The scripts I used were from userstyle.org and some from here. But I did not use the entire script of anyone of them. Just bits and pieces. I just put the CSS in userChrome.css manually. When I tried to install Stylish, it showed no scripts being installed. In order for them to show up in Stylish, I would have to remove everything I have and then install each script using Stylish and then edit the scripts. That is way too much work.

I see. Would just copying all the contents of your userchrome.css over to a single new stylish script work? Afterwards you can organize those bits and pieces into their own individual stylish scripts, one at a time, whenever you wanted.

This way you don't have to click a bunch of times and make a ton of individual new scripts just to recreate your current set up, you would be set with one script. But you would still have the capability to organize them later on when you feel like it.

[+Gary7 Subscriber²]

I see. Would just copying all the contents of your userchrome.css over to a single new stylish script work? Afterwards you can organize those bits and pieces into their own individual stylish scripts, one at a time, whenever you wanted.

This way you don't have to click a bunch of times and make a ton of individual new scripts just to recreate your current set up, you would be set with one script. But you would still have the capability to organize them later on when you feel like it.

Thanks, I probably could do that but it may be against their TOS as the styles are a mosh of other users posted scripts. It is not a big deal, to not have Stylish. When Firefox 4 goes final, I may just start over again anyway.

[Mr.Dude]

Tabs in Titlebar

/* Move tabs up to titlebar in maximized window */

#navigator-toolbox[tabsontop=true] #TabsToolbar {

margin-top: -16px !important;

padding-left: 112px !important;

padding-right: 112px !important;

}

/* Move tabs up to titlebar in normal window */

#main-window[sizemode=normal] #navigator-toolbox[tabsontop=true] #TabsToolbar {

margin-top: -21px !important;

padding-left: 109px !important;

padding-right: 109px !important;

}[/code]

But if i show the menu with ALT Key, the tab shows overlapped with menu. Not nice...

[bogas04]

But if i show the menu with ALT Key, the tab shows overlapped with menu. Not nice...

#main-window[tabsontop="true"] menubar 
{	margin-left: 100px !important; }

try something like this...

[Darrian]

That's not going to work, because using that method to move the tabs up the menu bar ends up aligned inside the navigation toolbar.

[FrostAM]

Is there a way to change the height of the tabs? I recently downloaded a windows 7 theme and it put a blue bar on top of a black background. This would be perfect for the tab bar if the tabs didn't stick out above the blue bar. I just need to shrink the tabs by a few pixels but I have no idea where to start. Any help would be appreciated.

[+Gary7 Subscriber²]

Is there a way to change the height of the tabs? I recently downloaded a windows 7 theme and it put a blue bar on top of a black background. This would be perfect for the tab bar if the tabs didn't stick out above the blue bar. I just need to shrink the tabs by a few pixels but I have no idea where to start. Any help would be appreciated.

http://userstyles.org/styles/13709

The above userstyle may work for you.

[Hiiragi Tsukasa]

Navigator Toolbar Shadows and Curved Corners (with work, could become the white underglow in the Office 2010 titlebar)

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

/* Shadow above navigator toolbar, curved corners */
#navigator-toolbox[tabsontop="true"] #nav-bar {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-box-shadow: 0px -3px 5px rgba(0,0,0,0.3);
}

How did you get it so that the shadow doesn't appear on the active tab?

[BantryRed]

Messing around with a few "clear" codes, anyone got a good one? Using a combination of Gary7 and Soapys, good, but not complete yet. Having problems with app tabs not aligning properly at the bottom, and also getting the history sidebar to look like the bookmarks sidebar in Gary7 code.

[BantryRed]

Sorry for double post.

And yes, its cloudy in Cork Ireland. Should have erased that sorry. :rolleyes:

[argonite]

How did you get it so that the shadow doesn't appear on the active tab?

The navigation toolbar is at a lower layer than the active tab (I think) so its box shadow is drawn below it.

Some script updates:

Here's what it looks like when you hit ALT (the tabs are now shifted down and the menu bar appears):

Tabs in Titlebar (now the menu-bar is shown properly, instead of behind the tabs!)

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

/* Move tabs up to titlebar in maximized window */
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
    padding-left: 109px !important;
    padding-right: 112px !important;
}

/* Move tabs up to titlebar in normal window */
#main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
    padding-left: 109px !important;
    padding-right: 109px !important;
}

/* Move the menubar above the tabs so it moves the tab bar down when activated */
#toolbar-menubar {
    margin: -19px 0px 3px 109px !important;
}

#main-window[sizemode="normal"] #toolbar-menubar {
    margin: -24px 0px 3px 109px !important;
}

Navigator Toolbar Shadows and Curved Corners (now has a sweet white underglow, Office 2010 style, when maximized!)

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

/* Shadow above navigator toolbar, curved corners */
#main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #nav-bar {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-box-shadow: 0px -3px 8px rgba(0,0,0,0.4);
}

/* White underglow above navigator toolbar */
#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
    background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 20%, rgba(255,255,255,1)) !important;
}

New App Button Margin Fixes

Now you can use Soapy's new app button out of the box, just add and modify this short script, which also moves the app button to the corner when maximized.

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

#main-window[sizemode="normal"] {
    margin-top: -1px !important;
}

#main-window[sizemode="maximized"] #appmenu-button {
    margin-left: -3px !important;
    -moz-border-radius-bottomleft: 0px !important;
}

[argonite]

Just a note that due to the changes in the stylish code, it is now only compatible with tabs-on-top and a hidden menu-bar (the default Minefield configuration). I could probably fix this using more refined selectors, but the current script will work for now.

[Mr.Dude]

The navigation toolbar is at a lower layer than the active tab (I think) so its box shadow is drawn below it.

Some script updates:

Thank you. I like it, the menu is showing very nice!

[panoc]

tabs on top for beta 5 with no firefox button.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 
#navigator-toolbox[tabsontop="true"] 

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 0px !important;
margin-right: 105px !important;
padding-top: 0px !important;
}

#appmenu-button-container {
position: fixed !important;
}

#main-window {
margin-top: -24px !important;
}

#appmenu-button{
padding: 3px !important;
-moz-border-radius-bottomleft: 0px !important;
} 

[argonite]

So I really liked some of the app button concepts that are being considered for the final release of Firefox.

Stephen Horlander even added patch code in bug 574681 to make it look like this:

Which everyone on Bugzilla seems to like. I do too! So I've created a style out of it!

Firefox 4 App Button Style for Bug 574681 Patch 1.0 (for Windows XP, Vista and 7)

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

#appmenu-button {
    -moz-appearance: none !important;
    background-image: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%) !important;
    -moz-border-radius: 0 0 4px 4px !important;
    border: 2px solid !important;
    border-top: none !important;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.25) inset !important;
    text-shadow: 0 0 1px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5) !important;
    padding: .1em 1.5em .15em 1.5em !important;
    -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
    -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
    -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px 1px rgba(255,255,255,.25) inset !important;
}

#appmenu-button:-moz-window-inactive {
    background: transparent !important;
    background-clip: padding-box !important;
    border-color: rgba(0,0,0,.4) !important;
    -moz-border-left-colors: rgba(255,255,255,.4) rgba(0,0,0,.5) !important;
    -moz-border-bottom-colors: rgba(255,255,255,.4) rgba(0,0,0,.5) !important;
    -moz-border-right-colors: rgba(255,255,255,.4) rgba(0,0,0,.5) !important;
    -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset !important;
}

#appmenu-button:hover:not(:active):not([open]), #appmenu-button:hover:-moz-window-inactive:not(:active):not([open]) {
    background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%), -moz-radial-gradient(center bottom, farthest-side, rgb(236,133,0), rgba(255,229,172,0)), -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
    border-color: rgba(83,42,6,.9) !important;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 0 2px 1px rgba(250,234,169,.7) inset, 0 -1px 0 rgba(250,234,169,.5) inset !important;
}

#appmenu-button:hover:active,
#appmenu-button[open] {
    background-image: -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
    -moz-border-radius: 0 !important;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,.4) inset, 0 1px 1px rgba(0,0,0,.2) inset !important;
}

Remember, this is a work in progress and is not reflective of the final UI. And remember to disable it when the patch finally does get committed!

[vajlent]

So I really liked some of the app button concepts that are being considered for the final release of Firefox.

Stephen Horlander even added patch code in bug 574681 to make it look like this:

Which everyone on Bugzilla seems to like. I do too! So I've created a style out of it!

Remember, this is a work in progress and is not reflective of the final UI. And remember to disable it when the patch finally does get committed!

Very nice but I'm not a fan of the inactive button style.

[argonite]

Very nice but I'm not a fan of the inactive button style.

You can remove it entirely by just removing the block of code marked by -moz-window-inactive

Previous button iterations haven't had this kind of effect. It takes a while to get used to, but I don't really look at inactive windows too hard anyway.

If it really bothers you, why don't you sign up at Bugzilla and make a suggestion? Maybe it'll make it into the next patch!