Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Enthusiast

mNiosu

Posted
Posted

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

Rookie

Mr.Dude

Posted
Posted

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?

Community Regular

foxxyn8

Posted
Posted

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

Rookie

Mr.Dude

Posted
Posted

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

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted

fix for progress-lines, very simple code:

38267716.png

tf2i.png

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

Enthusiast

mNiosu

Posted
Posted

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

Enthusiast

mNiosu

Posted
Posted

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

Apprentice

panoc

Posted
Posted

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.

post-350684-12849655674426.png

Enthusiast

mNiosu

Posted
Posted

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?

Enthusiast

mNiosu

Posted
Posted

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:

post-344974-1284970376286.jpg

Community Regular

foxxyn8

Posted
Posted

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?

Enthusiast

mNiosu

Posted
Posted

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 ;) )!

Community Regular

foxxyn8

Posted
Posted

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.

Enthusiast

mNiosu

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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

Enthusiast

mNiosu

Posted
Posted

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:

Community Regular

foxxyn8

Posted
Posted

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

This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.