Share your custom Firefox/Minefield 4 stylish scripts

August 29, 2010

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

27,724 · August 29, 2010

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.

1,325 · August 29, 2010

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.

August 30, 2010

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

2,737 · August 30, 2010

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 &gt; .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 &gt; .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 &gt; .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:

27,724 · August 30, 2010

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.

August 30, 2010

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

2,737 · August 30, 2010

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

1,325 · August 30, 2010

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.

27,724 · August 30, 2010

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.

August 30, 2010

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

2,737 · August 30, 2010

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

3,047 · August 30, 2010

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.

August 30, 2010

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.

27,724 · August 30, 2010

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.

August 31, 2010

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?

August 31, 2010

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.

September 1, 2010

Sorry for double post.

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

2,065 · September 1, 2010

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

2,065 · September 1, 2010

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.

September 1, 2010

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!

September 2, 2010

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

2,065 · September 3, 2010

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!

September 3, 2010

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.

2,065 · September 3, 2010

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!

Sign In

Share your custom Firefox/Minefield 4 stylish scripts

Recommended Posts

Phixion

Link to comment

Share on other sites

+Gary7 Subscriber²

Link to comment

Share on other sites

Kyang

Link to comment

Share on other sites

vajlent

Link to comment

Share on other sites

bogas04

Link to comment

Share on other sites

+Gary7 Subscriber²

Link to comment

Share on other sites

vajlent

Link to comment

Share on other sites

bogas04

Link to comment

Share on other sites

Kyang

Link to comment

Share on other sites

+Gary7 Subscriber²

Link to comment

Share on other sites

Mr.Dude

Link to comment

Share on other sites

bogas04

Link to comment

Share on other sites

Darrian

Link to comment

Share on other sites

FrostAM

Link to comment

Share on other sites

+Gary7 Subscriber²

Link to comment

Share on other sites

Hiiragi Tsukasa

Link to comment

Share on other sites

BantryRed

Link to comment

Share on other sites

BantryRed

Link to comment

Share on other sites

argonite

Link to comment

Share on other sites

argonite

Link to comment

Share on other sites

Mr.Dude

Link to comment

Share on other sites

panoc

Link to comment

Share on other sites

argonite

Link to comment

Share on other sites

vajlent

Link to comment

Share on other sites

argonite

Link to comment

Share on other sites

Recently Browsing 0 members