Share your custom Firefox/Minefield 4 stylish scripts

[kawasabi]

Use this script with Stylish.Firefox 4: Choose Your Color

thnx, how could i have missed that one...

[+Heartripper Subscriber¹]

Heartripper, I've started a topic on your Script page...

http://forum.userstyles.org/discussion/25510/there-is-a-bug

Please check it whenever you have available time.

It should be fixed now!

[Drifus]

Thanks but this code didn't fix the problem in my case. This is how FF looks adding this code:

and changing the height value seems irrilevant.

My code style:

/* Tab Fixes */

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

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

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

.tabbrowser-tab[fadein][pinned] 
{  margin-top: -0.2px !important; }

#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
        height: 22px !important;
}

/* Menu Bar Fixes */

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

Please put the full code of your style so we can analyze it. Or all styles, if you use more than one.

[xPerFeXioN]

Any way to make it look like ie9?

[Deo Domuique]

It should be fixed now!

Please, check it again... Additional bugs/informations! :/

Any way to make it look like ie9?

I'm pretty sure, in a while there will be available as a Theme by someone... You just have to wait...

Like-Chrome already there is... Not 100% perfect yet, but not bad at all... It's the first version.

[trag3dy]

It should be fixed now!

Any way to remove or change the color of the blue tint on the buttons? I don't mean the mouse over color but the regular no hovered color.

[Bruniii]

Please put the full code of your style so we can analyze it. Or all styles, if you use more than one.

/* Tab Fixes */

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

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

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

.tabbrowser-tab[fadein][pinned] 
{  margin-top: -0.2px !important; }

#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
        height: 22px !important;
}

.tabbrowser-tab{
  max-height: 18px !important;
}

.tabbrowser-tabs {
  max-height: 23px !important;
}

/* Menu Bar Fixes */

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

/* Menu Button Fixes */ 

#appmenu-button
{   border: 0.5px solid rgba(90,30,0,0.8)!important;
    border-top:none!important;
    padding: 2px 5px 1px 5px !important;
    height: 22px !important;
    min-width: 43px !important;
    width: 43px !important;
    -moz-box-shadow: 0 0 3px rgba(255,255,255,.5) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,240,0.5) !important;  }

#appmenu-button:hover:active, #appmenu-button[open]
{    background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;  }

#appmenu-button .button-text
{ 
    color: transparent !important;
    text-shadow: none !important;
    margin-left: -27px !important;
    margin-right: -33px !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADK0lEQVQ4jV2TTWxUZRSGn++7d+bey3SYMgMzdNLMTCu2VcE0CjG1qYqRSEhYKElTA66MooaNLozDwh8WjAs3JsSFSxeKRg0axSj+EApFYotAS0ctWmeEOpTS6fx0fu+9n4v+pPqsTk7yvuck57wCIGXIT4BUsu6OBbr2bO+p5J71OfWHxvzxMEuMA6eBLwu/nxxlDWLZQAGcDG09Ou/xDR3IXegE2F9zEMDg/rd59eky1z467575pfLdrrmLRw7dqJxjWXwgZUh1682gShlSra2Ha0qdK9nq63xDbXniLTUx8pz68Y1+9U5XuPrhwMZBACkEjwRDGgD7hoLE457V9c4GNF5u9XK1WGfw4B4efT1B594eHnvlHrNUku99/mRks9SkuL/jTk+jkrVxF6ps7/Ovmu0bChKXUEQnH9uCMrx8MNJK4sEIoZgVKN9sJqXHENFou+ZtVl18iaXp1UKEjbuf4dPj86hTC1y+eJuJM3/hojF5rUGhYNO9K8TiXG2nrhTrfa0SXQoqJUnLwB0A6J5JAGamcuQn05RmctiuzlhaYkmHSNxkMe/06PWaa2CD2SYZ/rZE8/tRZnIKgKOPv0vz/Y8RysGSLtWaIJKo0Lp+nnylQq1o69LwiHKpoEBAMKKxye/S1iYBOPzNi3zW9wOv7chQnJ2jUczzcHsW8vOUf72J1SIqugZX/sk2+/0bNLruNvl73GZbXOfeHSY+0+ZC5hacOI3d/jwxK8vB3jT1XIPrZ/Nowh3XbUcdnxpv3BcI6VY4ZtK+LYjdcBj7aZHMHw3gKknfU/Sv+40Xdt8mpNVZmFpg8mcNb2vwlEgZssXSGNaF6N055Mc0dBxHR5oa03kvc8Ua68QisXCTRMKgik56pMyfGau4ObapWwAcMeQDluQLS4rw1j6LSFRD1ySapjCkjeMIbMAMQSarmLhUr81NOwPJujsqVr4uZcheQ+MrBdFQi6Sz20sgKNAtwCOYvd4kc0OgqnYlN+v2J+vupdUwrXDMp3W4gpdcpfY6UiQce+k6piHYEJA1p6lOlBfU4UOLzvR/0vh/jvm0DuAuILrcmgHSa4Ur/AsXclHwqDchzQAAAABJRU5ErkJggg==") no-repeat 16px !important; }

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

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

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

/* Stop Reload on the left */

toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #urlbar {
  -moz-border-radius: 0 2px 2px 0 !important;
  border-left: 0 !important;
}

toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button,
toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button + #stop-button{
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.25) rgba(0,0,0,.25) !important;
  -moz-border-radius: 2px 0 0 2px!important;  
  -moz-box-shadow: 0 0px 0 rgba(0,0,0,.1) inset,
                   0 0px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-right: -3px !important;
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAYAAABm+U3GAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozQkQ3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0ODAwNTk3Rjk2NjExMURGOTRBMUI2RTAyRUYxRjAxNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0ODAwNTk3RTk2NjExMURGOTRBMUI2RTAyRUYxRjAxNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQ0Q3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQkQ3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoZDigQAAAN3SURBVHjajJJ/aBNnGMefy11ySS65kOtilyZNurX+rAYzEJ2DaVn9R+vAsblUN2m1UK2KKM5J/bEaVnGsqfujigqWOqZVmJPqtO3arbINEcfEiVpbtYKm1NCY1OSa5HJ573yutFDY/tgLH7jn5b3v+7zP90s9HonrAMCE8IgV/r1yCLOybGnFQP+DZvi/C4VtyMyvvz26xOUubDCY7ReBy+sz2J0XnQVFQW1/1py5u4Ay9amqChVFBVWIQ/ueDu4JyKapmtJEd9bVzLva0bXFIOQZXM4ZYY/b/TIhivnxV8k3QadTiKLSRM7CO5lIO0vTJ0FH3ZVzpPzSk+ejWnNrigsFPUP3gqL6JUK2dwyFW5jzP7TlXbvcVWtzFYiHDtR3ra8MvFBUNaMoqvR5dc1HY4nxhQaTEZJjMag/ePhJW8O+iBSP+XI03RuY5S1HXWJhDb16AL9BsEU3HAg+1i6j3B7vVxFRXhY60nh2XSAwnM7KYUkm2ZVl71eIYFhd6CkEjuMgGX8Jt/o6Vz0beFj3XW317uyrsXx8zV1QgQDJ+Rmej+440Rp6q3RBC+qKFKM3XSqe7xu98fv1y5Kcu5+ScjIatXZwaHi1p6QEBEEAhmZATMSh//bNMvzJHB4cqDu9c+tuRUzmg6Lgjim68ejxkHfe/AlRrWOGUIzF5XI9xaenUDSubV7ru/Gzxai/iXMT/sPvVOfpU+0sy26nFYK62LCezfScaT1f802zOHUIm9GL6VTajnOVsaaRJBIWM3IUQMbRgRZHosVOsBihesFMwW7lr9g5zmN8wxGlVELGRl647/3W01E19+3ytv6hCUN1+YL1n9FYzHuuvd2Ldd5klrULVO1ihJ1sYhzNEvRompFS/TqzOfpJQ2NobWNTk95mjbAU+LRk4BnHhPCmzXW/SBlJvvDjTx+fOnli9qS4E3EE9+8vXfHeu5/+cf1XF9YW1sx9hg36wcRFNxxpDrlmz2lxFpccrwoda6J5PoIB9hk5rmoiFVqO9+7Z4xt4NFhrsfIMIeQpZnQ4mUw60+lM8Xgill1fWXnuiy/39ngdfEHrwfpDHwTW/TndKM3Q55iWnrPfL98YPBzE+pYmbMOPGZ1Xr3i6u7s/TIipEimbNaMrot3GP9q2dcvfS5csjuFc7uCMR/DsIqR/mujUMiOlyF9a8VqAAQCMEogyPkkkHQAAAABJRU5ErkJggg==") !important;
  opacity: 1 !important;
  padding: 0 6px 0 6px !important;
  -moz-transition: -moz-box-shadow .1s !important;
}


toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button {
  -moz-image-region: rect(0 11px 12px 0) !important;
}


toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button + #stop-button {
  -moz-image-region: rect(0 22px 12px 11px) !important;
}


toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button:not([disabled]):hover{
  background-image: -moz-linear-gradient(rgb(158,204,241), rgb(111,177,225) 49%,
                                   rgb(91,159,217) 50%, rgb(81,152,210) 60%,
                                   rgb(62,138,204)) !important;
  -moz-box-shadow: 0 0 1px 0 rgba(255,255,255,.40) inset, 
                   0 1px 0 rgba(255,255,255,.4) !important;
}

toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button + #stop-button{
  background-image: -moz-linear-gradient(rgb(230,161,138), rgb(209,119,100) 49%,
                                   rgb(192,93,78) 50%, rgb(185,85,70) 60%,
                                   rgb(193,90,74)) !important;
  -moz-box-shadow: 0 0 1px 0 rgba(255,255,255,.40) inset, 
                   0 1px 0 rgba(255,255,255,.4) !important;
}

toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button + #stop-button:not([disabled]):hover{
  background-image: -moz-linear-gradient(rgb(240,161,138), rgb(219,119,100) 49%,
                                   rgb(203,93,78) 50%, rgb(195,85,70) 60%,
                                   rgb(203,90,74)) !important;
}


toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button:not([disabled]):hover:active,
toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button + #stop-button:not([disabled]):hover:active {
  -moz-box-shadow: inset 0 0 3px rgba(0,0,0,.8), 
                   0 1px 0 rgba(255,255,255,.4) !important;
}

#stop-button .toolbarbutton-icon,
#reload-button .toolbarbutton-icon{
  height: auto !important;
  width: auto !important;
}


#navigator-toolbox:not([tabsontop="true"]) toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button,
#navigator-toolbox:not([tabsontop="true"]) toolbar[mode="icons"][currentset*="reload-button,stop-button,urlbar-container"] #reload-button + #stop-button {
  background-clip: padding-box !important;
}

Thanks!

[foxxyn8]

Thanks!

Give this a try (replace your "Tab Fixes" section with this one):

/* Tab Fixes */

#main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #TabsToolbar { 
        padding: 0px 110px 0 50px !important; 
}

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

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

.tabbrowser-tabs {
         max-height: 23px !important;
}

#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
        height: 23px !important;
}

.tab-content {
	margin-top: -1px !important;
	min-height: 16px !important;
}

[mysiskatten]

how can I get my add-ons in location bar like this

[foxxyn8]

how can I get my add-ons in location bar like this

I use useChromejs 1.3 with the following code:

var urlbar = document.getElementById("urlbar-icons")
var go = urlbar.lastChild

var nsI = document.getElementById("noscript-tbb")
var adpS = document.getElementById("abp-status")
var gmS = document.getElementById("gm-status")
var gmM = document.getElementById("gm-status-popup")
var stY = document.getElementById("stylish-toolbar-button")

urlbar.insertBefore(stY, go)
urlbar.insertBefore(gmS, go)
urlbar.insertBefore(gmM, go)
urlbar.insertBefore(adpS, go)
urlbar.insertBefore(nsI, go)

[tyler78]

I use useChromejs 1.3 with the following code:

var urlbar = document.getElementById("urlbar-icons")
var go = urlbar.lastChild

var nsI = document.getElementById("noscript-tbb")
var adpS = document.getElementById("abp-status")
var gmS = document.getElementById("gm-status")
var gmM = document.getElementById("gm-status-popup")
var stY = document.getElementById("stylish-toolbar-button")

urlbar.insertBefore(stY, go)
urlbar.insertBefore(gmS, go)
urlbar.insertBefore(gmM, go)
urlbar.insertBefore(adpS, go)
urlbar.insertBefore(nsI, go)

This worked for me but just for one time. It vanished when i restart firefox. It works again when i remove gm-status-popup.

Where can i find extension ids? I want to put other ones like webmail or foxyproxy.

[mysiskatten]

I use useChromejs 1.3 with the following code:

var urlbar = document.getElementById("urlbar-icons")
var go = urlbar.lastChild

var nsI = document.getElementById("noscript-tbb")
var adpS = document.getElementById("abp-status")
var gmS = document.getElementById("gm-status")
var gmM = document.getElementById("gm-status-popup")
var stY = document.getElementById("stylish-toolbar-button")

urlbar.insertBefore(stY, go)
urlbar.insertBefore(gmS, go)
urlbar.insertBefore(gmM, go)
urlbar.insertBefore(adpS, go)
urlbar.insertBefore(nsI, go)

thx but I have same problem as tyler78 here http://forums.mozillazine.org/viewtopic.php?f=48&t=1006795&start=90

I dont understand where to put js code after installed the add-on.

[FrostAM]

Is there a way to remove the favcons from the tabs? And is there a way to take some of the height off of the tabs/url bar area? I'm going for an extremely minimalist look, and most things I try from userstyles.org look awful in the release candidate.

[vasa1]

I use useChromejs 1.3 with the following code:

....

Foxxyn8, what is the advantage of having the add-on icons within the url bar?

(I know that Chrome has some of them inside and some to the right of the omnibar and there's nothing the user can do to move them around because there's something about "page action" and "browser action" that determines whether extension icons show inside or outside Chrome's omnibox.)

[foxxyn8]

thx but I have same problem as tyler78 here http://forums.mozillazine.org/viewtopic.php?f=48&t=1006795&start=90

I dont understand where to put js code after installed the add-on.

The code goes in userchrome.js which is located in the chrome folder of your firefox profile. If the file doesn't exist create it.

Make sure any toolbarbutton you want to relocate add is present on a toolbar. It gives me problems on occasion, usually when Fx "forgets" the location of the toolbarbutton and moves it back to the customization pallette. Also, if you're not using the same addons, it may not work. Remove the references to the ones you don't need.

You get the ids the same way as with css -- Dom Inspector.

[tyler78]

thx but I have same problem as tyler78 here http://forums.mozillazine.org/viewtopic.php?f=48&t=1006795&start=90

I dont understand where to put js code after installed the add-on.

Create a folder under your profile folder called "chrome" and create a text file under that folder called "userChrome.js". Add the code in that text file.

[mysiskatten]

The code goes in userchrome.js which is located in the chrome folder of your firefox profile. If the file doesn't exist create it.

Make sure any toolbarbutton you want to relocate add is present on a toolbar. It gives me problems on occasion, usually when Fx "forgets" the location of the toolbarbutton and moves it back to the customization pallette. Also, if you're not using the same addons, it may not work. Remove the references to the ones you don't need.

You get the ids the same way as with css -- Dom Inspector.

got it working... but only for 5min(restart) .. I give up.. Thanks

[tyler78]

got it working... but only for 5min(restart) .. I give up.. Thanks

Hi man. I found a better way for it. It puts all the status bar instead of one or two extensions.

Try this code:

var urlbar = document.getElementById("urlbar-icons");
var go = urlbar.lastChild;

var stat = document.getElementById("status-bar");

urlbar.insertBefore(stat, go);

[foxxyn8]

Hi man. I found a better way for it. It puts all the status bar instead of one or two extensions.

Try this code:

var urlbar = document.getElementById("urlbar-icons");
var go = urlbar.lastChild;

var stat = document.getElementById("status-bar");

urlbar.insertBefore(stat, go);

That will work so long as the addon provides a status bar icon as opposed to a toolbar button, but the status bar is being phased out and only exists in its current form for legacy purposes.

[Bruniii]

Give this a try (replace your "Tab Fixes" section with this one):

/* Tab Fixes */

#main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #TabsToolbar { 
        padding: 0px 110px 0 50px !important; 
}

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

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

.tabbrowser-tabs {
         max-height: 23px !important;
}

#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
        height: 23px !important;
}

.tab-content {
	margin-top: -1px !important;
	min-height: 16px !important;
}

That's work! Thanks!

[mysiskatten]

Hi man. I found a better way for it. It puts all the status bar instead of one or two extensions.

Try this code:

var urlbar = document.getElementById("urlbar-icons");
var go = urlbar.lastChild;

var stat = document.getElementById("status-bar");

urlbar.insertBefore(stat, go);

that worked for all but my stylish icon.

[tyler78]

Found an addon that combines userChromeJS and subscriptoverlayloader. https://addons.mozilla.org/en-US/firefox/addon/uc/

[foxxyn8]

Foxxyn8, what is the advantage of having the add-on icons within the url bar?

(I know that Chrome has some of them inside and some to the right of the omnibar and there's nothing the user can do to move them around because there's something about "page action" and "browser action" that determines whether extension icons show inside or outside Chrome's omnibox.)

I don't know that there's any advantage at all, it's just a personal preference. :).

[vasa1]

I don't know that there's any advantage at all, it's just a personal preference. :).

Thanks! Plus a knowledge of javascript so I'll just watch from the side-lines :(

[vasa1]

1 - Change the throbber:

This is not blue, but gray:

.tab-throbber[progress] {
	list-style-image: url("chrome://browser/skin/places/searching_16.png") !important;
}

...

Nice! Thanks, Drifus :)