Share your custom Firefox/Minefield 4 stylish scripts

[mNiosu]

DeathWolf over at mozillaZine gave me a really good idea for this. Let's set the background-color as transparent, then configure the background-image gradient so that it's transparent at the left. Something like this (test it and let me know what you think):

.progress-remainder {
background-image: none !important;
}

#urlbar-progress .progress-bar {
background-image: -moz-linear-gradient(left, transparent 10%, rgba(102, 51, 255, 0.4) 90%, rgba(102, 51, 255,0.8)) !important;
background-color: transparent !important; 
}

#urlbar-progress{
height: 22px !important;
margin-top: -22px !important;
margin-bottom: 0px !important;
margin-left: 28px !important;
}

That's a pretty good idea and look really "stylish" :). Thanks for still looking in to that issue. The problem is that it doesn't work for my "windows like" loading bar, but I'll keep it for the moment I decide to change to plain color again.

I've studied the fission add-on in order to find out it's method of making the left margin dynamic (hoping it was css-related). Haven't found it yet. Maybe you can have a look in the add-on's components and help me figure out their method... LINK

[Mr.Dude]

I need help for my changed yellow urlbar color by SSL connections with https://

I use this css-Code

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

  #urlbar[level] .autocomplete-textbox-container {
  background-color: #ffffb7 !important;
  margin-right: 0px !important;
}

#urlbar[level] .autocomplete-history-dropmarker {
  background-color: #ffffb7 !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

But with the new statusinformation in urlbar, the urltext is gone, if i hover url links with my mouse!

Any suggestion?

[foxxyn8]

I need help for my changed yellow urlbar color by SSL connections with https://

I use this css-Code

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

  #urlbar[level] .autocomplete-textbox-container {
  background-color: #ffffb7 !important;
  margin-right: 0px !important;
}

#urlbar[level] .autocomplete-history-dropmarker {
  background-color: #ffffb7 !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

But with the new statusinformation in urlbar, the urltext is gone, if i hover url links with my mouse!

Any suggestion?

if you're using the nightlies all you need is this it will extend under the dropmarker:

  #urlbar[level] .urlbar-contents{
  background-color: #ffffb7 !important;
  margin-right: 0px !important;
}

Check this out: http://userstyles.org/styles/36961

[Mr.Dude]

if you're using the nightlies all you need is this it will extend under the dropmarker:

  #urlbar[level] .urlbar-contents{
  background-color: #ffffb7 !important;
  margin-right: 0px !important;
}

Check this out: http://userstyles.org/styles/36961

Thank you, this work for me :)

[Pickaxe]

How do I remove the search button in panorama? It's so pointless in my opinion, since Panorama already searches as you type. (Plus - it's ugly.)

[+Heartripper Subscriber¹]

fix for progress-lines, very simple code:

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

 #nav-bar .progress-bar {
   -moz-border-radius: 0 0 0 5px !important;
 }

 .tabbrowser-tab:not([pinned="true"])  .tab-progress{
   margin: -2px -3px 0 -3px !important;
   height: 2px !important;
 }

 .tabbrowser-tab:not([pinned="true"])  .tab-progress,
 .tabbrowser-tab:not([pinned="true"]) .progress-bar {
   -moz-border-radius: 2px 2px 0 0 !important;
 }

[mNiosu]

I have a new idea: is there a way to make the personal-menu button show the content of app-menu in it's default layout? Or maybe move the app-menu in right of the navigation-bar and style it something like a regular navigation-bar button... :dontgetit:

PS: Here is my final version (I think) of my fission-like, windows-style progress bar: LINK (credits to foxxyn8 for all the help, of course)!

[foxxyn8]

How do I remove the search button in panorama? It's so pointless in my opinion, since Panorama already searches as you type. (Plus - it's ugly.)

#actions {
display:none !important;
}

[mNiosu]

I have a new idea: is there a way to make the personal-menu button show the content of app-menu in it's default layout? Or maybe move the app-menu in right of the navigation-bar and style it something like a regular navigation-bar button... :dontgetit:

Found this on the personal menu add-on page (written by the developer):

*** Personal Menu with Firefox 4.0 Beta ***

If you want to replace the menu of Firefox Button to the one of Personal Menu, you may install userChrome.js and put this code into the file "userChrome.js":

if(location == "chrome://browser/content/browser.xul"){
var appbutton = document.getElementById("appmenu-button");
appbutton.setAttribute("context", "toolbar-context-menu");
var appmenu = document.createElement("menupopup");
var newappmenu = document.createElement("menu");
newappmenu.setAttribute("label", "Firefox");
newappmenu.id = "new-appmenu";
newappmenu.appendChild(appbutton.firstChild);
document.getElementById("compact-addbutton").parentNode.appendChild(newappmenu);
appbutton.appendChild(appmenu);
appmenu.setAttribute("cmpopup",true);
appmenu.id = "menubutton-popup";
appmenu.setAttribute("onpopupshowing","CMCE.onOpenMenu(this, event, this.cm_list);");
appmenu.setAttribute("onpopuphidden","CMCE.onCloseMenu(this, event);");
}

So it should work the other way around, but I don't have enough knowledge to do it myself. Ideas ?

By the way the identifier for personal menu button is:

#cm-menu

[panoc]

Found this on the personal menu add-on page (written by the developer):

*** Personal Menu with Firefox 4.0 Beta ***

If you want to replace the menu of Firefox Button to the one of Personal Menu, you may install userChrome.js and put this code into the file "userChrome.js":

if(location == "chrome://browser/content/browser.xul"){
var appbutton = document.getElementById("appmenu-button");
appbutton.setAttribute("context", "toolbar-context-menu");
var appmenu = document.createElement("menupopup");
var newappmenu = document.createElement("menu");
newappmenu.setAttribute("label", "Firefox");
newappmenu.id = "new-appmenu";
newappmenu.appendChild(appbutton.firstChild);
document.getElementById("compact-addbutton").parentNode.appendChild(newappmenu);
appbutton.appendChild(appmenu);
appmenu.setAttribute("cmpopup",true);
appmenu.id = "menubutton-popup";
appmenu.setAttribute("onpopupshowing","CMCE.onOpenMenu(this, event, this.cm_list);");
appmenu.setAttribute("onpopuphidden","CMCE.onCloseMenu(this, event);");
}

So it should work the other way around, but I don't have enough knowledge to do it myself. Ideas ?

By the way the identifier for personal menu button is:

#cm-menu

well i managed to make minefiled look like this with personal menu

i like more since i gain the extra space firefox button uses.

[mNiosu]

well i managed to make minefiled look like this with personal menu

i like more since i gain the extra space firefox button uses.

I know how to get that look but I think is to complicated, I like the new firefox button layout better...

Anyway, how can I remove the dropmarker on the personal menu button?

[mNiosu]

Sorry for double post!

Anyway, how can I remove the dropmarker on the personal menu button?

Solved this part! Here is a nice style for personal menu button:

#cm-menu {
list-style-image:url(http://omicronlab.net/upic/4c48c3d1-f83.png)!important;-moz-image-region:rect(0 0 0 0)!important;
padding: 1px 6px 1px 6px !important;
}

#cm-menu > .toolbarbutton-menu-dropmarker {display: none;}

Delete "#cm-menu >" and all dropmarkers are gone ...

Now all I need is make it show the app-menu content ... :laugh:

[Pickaxe]

#actions {
display:none !important;
}

Thanks a lot.

[foxxyn8]

Sorry for double post!

Solved this part! Here is a nice style for personal menu button:

#cm-menu {
list-style-image:url(http://omicronlab.net/upic/4c48c3d1-f83.png)!important;-moz-image-region:rect(0 0 0 0)!important;
padding: 1px 6px 1px 6px !important;
}

#cm-menu > .toolbarbutton-menu-dropmarker {display: none;}

Delete "#cm-menu >" and all dropmarkers are gone ...

Now all I need is make it show the app-menu content ... :laugh:

So are you wanting to show the appmenu content(ie menuitems and menus) OR are you wanting to replicate the layout (ie. double pane)? Or both?

[mNiosu]

So are you wanting to show the appmenu content(ie menuitems and menus) OR are you wanting to replicate the layout (ie. double pane)? Or both?

I want the exact layout of app-menu, replacing the app-menu button with one in the navigation bar (or reversing the code I posted previously). By the way I managed to obtain this next code for Custom Buttons that makes just that, but this addon doesn't seem to work on latest nightly (even tried development versions):

var amb = document. getElementById ("appmenu-button");
var amp = document. getElementById ("appmenu-popup");
this. appendChild (amp. cloneNode (true));
amb. setAttribute ("hidden", "true");
this. type = "menu";

So I'm looking for something like merging the two codes to make personal-menu button show what app-menu button does (in JS off course, I don't know if it possible with css)...

LE: Talking of layout, not exactly that layout, considering it will placed on the right side, a mirror look would be better (the 2 panels reversed ;) )!

[panoc]

I want the exact layout of app-menu, replacing the app-menu button with one in the navigation bar

that is what i want too ?)

[foxxyn8]

I want the exact layout of app-menu, replacing the app-menu button with one in the navigation bar (or reversing the code I posted previously). By the way I managed to obtain this next code for Custom Buttons that makes just that, but this addon doesn't seem to work on latest nightly (even tried development versions):

var amb = document. getElementById ("appmenu-button");
var amp = document. getElementById ("appmenu-popup");
this. appendChild (amp. cloneNode (true));
amb. setAttribute ("hidden", "true");
this. type = "menu";

So I'm looking for something like merging the two codes to make personal-menu button show what app-menu button does (in JS off course, I don't know if it possible with css)...

LE: Talking of layout, not exactly that layout, considering it will placed on the right side, a mirror look would be better (the 2 panels reversed ;) )!

That code does work with Custom Buttons and Development version does work in the latest Firefox nightly if you create a new profile. I have the same problem as you where it doesn't work on an existing profile.

[mNiosu]

That code does work with Custom Buttons and Development version does work in the latest Firefox nightly if you create a new profile. I have the same problem as you where it doesn't work on an existing profile.

Yes, I've been told that but didn't have time for a fresh install. It's good to know there is a solution!

LE: Yes, seems to work now. I just hope is not necessary on every add-on or browser update (I just hate reconfiguring all my stuff all over again :) )...

[foxxyn8]

Yes, I've been told that but didn't have time for a fresh install. It's good to know there is a solution!

LE: Yes, seems to work now. I just hope is not necessary on every add-on or browser update (I just hate reconfiguring all my stuff all over again :) )...

For future reference: http://kb.mozillazine.org/Profile_manager

[mNiosu]

Is there a plan for a style change or any kind of change for this new stupid add-on bar? Is driving me crazy! :angry: I can't leave it enabled because it's damn ugly and if I disable it fast changes of add-ons properties is out of the question. Before the change I was using autohide status bar and was very happy with that but is not working any more. So why would they change it by just changing it's name and applying that stupid style to it?? That damn stupid, the should have left it the way it was! :angry:

[+Gary7 Subscriber²]

I was wondering since the status bar is sort of gone now if anyone can make a script that will show the download progress in the URL Bar?

[foxxyn8]

Is there a plan for a style change or any kind of change for this new stupid add-on bar? Is driving me crazy! :angry: I can't leave it enabled because it's damn ugly and if I disable it fast changes of add-ons properties is out of the question. Before the change I was using autohide status bar and was very happy with that but is not working any more. So why would they change it by just changing it's name and applying that stupid style to it?? That damn stupid, the should have left it the way it was! :angry:

This will autohide the add-on bar

Firefox 4 Autohide Add-on Bar

[SoapyHamHocks Member]

Here is a quick style I created to improve the look of the Addonbar.

http://userstyles.org/styles/37366

[MaSx]

well i managed to make minefiled look like this with personal menu

i like more since i gain the extra space firefox button uses.

This is how Firefox should look like honestly. Get rid of extra space and the stupid menu button.

[foxxyn8]

Here is a quick style I created to improve the look of the Addonbar.

http://userstyles.org/styles/37366

Nice work! IMO that is how the add-on bar should look by default.