Share your custom Firefox/Minefield 4 stylish scripts

[foxxyn8]

Is it possible to change the favicon of a local address? For example I connect to my home security camera via http://192.168.2.150 but it just has the default page icon.

I tried the usual favicon code but it refused to change?

.tabbrowser-tab[label="INSERT TAB LABEL HERE"] .tab-icon-image { 
      padding-left: 16px !important;
      background: url("PATH TO IMAGE") center no-repeat !important; 
}

[mancode20]

I need help with a stylish or two. I'm trying to make the active tab blue according to the code from the following stylish, but I keep doing something wrong. Can someone figure out the right code and copy/paste it? I want the active tab to be highlighted in blue like the stylish does it in green, but with black or white text. http://userstyles.org/styles/33570/fx-active-tab-3d-and-shiny

There's also another stylish that I'm trying to get the code from for JUST one single feature, which is "More clear focus on the active tab, 3D effect" What is the code for it?

http://userstyles.org/styles/45089/glassfox-a-clean-theme

I'd appreciate any help. Thanks!!

[parry]

.tabbrowser-tab[label="INSERT TAB LABEL HERE"] .tab-icon-image { 
      padding-left: 16px !important;
      background: url("PATH TO IMAGE") center no-repeat !important; 
}

Thanks! Works perfect!

[crankyim]

Bad English but to share.

This script cover. Maybe the script can be edited.

I am using a laptop.

Put Roboform Addonbar and this scripts used to

/*  Fade in takes 0.5 seconds  */

#browser-bottombox>toolbar:hover {
   opacity: 1;
   -moz-transition: opacity  .5s;
}


/*  Fade out takes 1.5 seconds after .5 seconds  */

#browser-bottombox>toolbar{
   opacity: 0;
   -moz-transition: opacity 1.5s .5s;
} 

/*  Addon bar style  */

#browser-bottombox>toolbar{
   position: fixed;
   bottom: 0px !important;
   right: -20px !important;
   margin-right: 18px !important;
   padding: 2px !important;
   background: rgba(207,219,236,0.99) !important;
   -moz-box-shadow: 4px -8px 4px -7px rgba(0,0,0,.3) !important;
   border: 1px solid rgba(0,0,0,0.25) !important;
   border-radius: 10px 10px 0 0 !important;
 }
#addonbar-closebutton {
   display: none !important; 
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar,
	#navigator-toolbox:not([customizing]) ~ #browser-bottombox {
		position: fixed;
		bottom: -2px !important;
		-moz-appearance: tab !important;
		-moz-transition: bottom .5s 1s ease-in;
	}
/**/
	#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar {
		right: 17px;
	}
	#navigator-toolbox:not([customizing]) ~ #browser-bottombox {
		left: 0;
	}
	#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar > #status-bar,
	#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar > #status-bar > statusbarpanel {
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		min-height: 0px !important;
	}

	#addon-bar toolbarbutton,
	#addon-bar dropmarker,
	#addon-bar label,
	#addon-bar #zoom-controls,
	#addon-bar .searchbar-textbox {
		margin: 0 !important;
		border: none 0 transparent !important;
		border-radius: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	#addon-bar toolbarbutton:not(#urlbar-go-button):not(#urlbar-reload-button):not(#urlbar-stop-button),
	#addon-bar dropmarker {
		-moz-appearance: none !important;
		background: transparent none !important;
	}

	#addon-bar #status4evar-status-widget,
	#addon-bar #status4evar-progress-widget,
	#addon-bar #status4evar-download-button {
		margin: 0 !important;
		border: none 0 transparent !important;
		padding: 0 !important;
	}
	#downbarHolder,
	findbar {
		border-top-width: 0px !important;
		background: transparent none !important;
	}
	#downbarMainMenuButton,
	#downbarClearButton {
		border-width: 0 0 0 0 !important;
	}
	#addonbar-closebutton {
		display: none;
	}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox
   #addon-bar {
       border: 0 !important;
       border-top: 1px solid rgba(0,0,0,.25) !important;    
       -moz-appearance: none !important;
       height: 23px !important;
   }
#navigator-toolbox:not([customizing]) ~ #browser-bottombox
   #addon-bar > #status-bar {
       margin: 0 !important;
       padding: 0px 2px !important;
       background: none !important;
   }

#navigator-toolbox:not([customizing]) ~ #browser-bottombox
   #addonbar-closebutton {
       display: none !important;
   }

#navigator-toolbox:not([customizing]) ~ #browser-bottombox
   #addon-bar toolbarbutton,
   #addon-bar dropmarker,
   #addon-bar #zoom-controls,
   #addon-bar .searchbar-textbox {
       margin: 0 !important;
       border: none 0 transparent !important;
       border-radius: 0 !important;
       padding: 0px 2px !important;
       box-shadow: none !important;
       height: 18px !important;
       -moz-appearance: none !important;
   }

#navigator-toolbox:not([customizing]) ~ #browser-bottombox
   #addon-bar toolbarseparator {
       height: 100% !important; /* AH OH... NOT WORKING */
       height: 18px !important; /* TENTATIVELY */
   }

#navigator-toolbox:not([customizing]) ~ #browser-bottombox
   #addon-bar toolbarbutton dropmarker {
       display: none !important;
   }

#navigator-toolbox:not([customizing]) ~ #browser-bottombox
#addon-bar toolbarbutton:hover dropmarker {display: -moz-box !important;
}

#navigator-toolbox:not([customizing]) ~ #browser-bottombox
   #addon-bar toolbarbutton,
   #addon-bar dropmarker {
       background: transparent none !important;
   }

#navigator-toolbox:not([customizing]) ~ #browser-bottombox
   #addon-bar #status4evar-status-widget,
   #addon-bar #status4evar-progress-widget {
       margin: 0 !important;
       border: none 0 transparent !important;
       padding: 0 !important;
       height: 18px !important;
   }

#navigator-toolbox:not([customizing]) ~ #browser-bottombox
   #addon-bar #status4evar-status-text {
       height: 18px !important; /* TENTATIVELY */
   }

   #addon-bar #fixer-status-bar {
       margin-top: -1px !important;
       padding: 0px 2px !important;
   }

Result picture :

[mysiskatten]

I use userstyle with Locationbar2 add-on

userstyle http://userstyles.org/styles/46244/firefox-locationbar2

location bar2 addon https://addons.mozilla.org/en-US/firefox/addon/locationbar%C2%B2/

I like to have it so the unedited url will not show until I click the location bar.... now it show the unedited url on mouse over.

thanks

[Salty Wagyu]

Is it possible to remove that white downward pointing arrow on Firefox 4's AppMenu? So that it is just an icon only when I use the Movable Firefox Button addon

edit: got it

/*hide the arrow of Firefox Button*/
#appmenu-toolbar-button > dropmarker,
#appmenu-button > .button-box dropmarker {
display: none;
}

[vasa1]

Is it possible to remove that white downward pointing arrow on Firefox 4's AppMenu? So that it is just an icon only when I use the Movable Firefox Button addon

edit: got it

/*hide the arrow of Firefox Button*/
#appmenu-toolbar-button > dropmarker,
#appmenu-button > .button-box dropmarker {
display: none;
}

I don't really get the point of the dropmarkers wherever they are and so I removed all of them!

* dropmarker { display: none !important}

[Salty Wagyu]

How do I stop the Bookmark Toolbar Items from truncating?

In that example it shows double arrows but nothing is in that box. If I resize the browser smaller the single folder icon I have there will disappear into the menu provided by the 2 arrows, usually can't get it showing again until I restart the browser.

I don't really get the point of the dropmarkers wherever they are and so I removed all of them!

* dropmarker { display: none !important}

Cheers, used that to replace the 3 stylish scripts I previously had to remove dropmarkers!

[mancode20]

I need help with a stylish or two. I'm trying to make the active tab blue according to the code from the following stylish, but I keep doing something wrong. Can someone figure out the right code and copy/paste it? I want the active tab to be highlighted in blue like the stylish does it in green, but with black or white text. http://userstyles.org/styles/33570/fx-active-tab-3d-and-shiny

There's also another stylish that I'm trying to get the code from for JUST one single feature, which is "More clear focus on the active tab, 3D effect" What is the code for it?

http://userstyles.org/styles/45089/glassfox-a-clean-theme

I'd appreciate any help. Thanks!!

Nobody can help me with this? I've gotten the code down to a much more manageable size. I'm trying to remove everything except for the 3D effect on the tabs. The main thing I can't seem to do no matter what I try is change the selected tab's text to white. Plus, the text looks kind of funny. Like a little too strong. Like maybe I have to remove some code for bold, or it's using the wrong font. I'd like to use Segoe UI. Also, I'd like to remove the color code for the tab itself because I use ChromaTabs Plus to color code my tabs. I just want the pop-out 3D effect with white text for the active tab and black text for the inactive tabs. Anyone know how to do it based on this code? I need help!! Thanks if you can help!!

Stylish for 3D Effect on Tabs

@namespace

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

/* Go to this page if you want to CHANGE THE COLOR:

http://www.w3schools.com/css/css_colors.asp */

tabs.tabbrowser-tabs#tabbrowser#tabs{

background-color: transparent!important;

}

.tabbrowser-tab, .tabs-newtab-button {

background: transparent !important;

padding-left: 5px !important;

padding-right: 1px !important;

border: #000000 !important;

-moz-border-radius: 3px 3px 0px 0px !important;

height: 26px !important;

margin-top: 3px !important;

margin-left: 1px !important;

}

.tabbrowser-tab:not([pinned=true]){

background-image: -moz-linear-gradient(rgba(0,0,0,0),

rgba(255,255,255,.05) 95%),

-moz-linear-gradient(rgba(255,255,255,0.0), rgba(255,255,255,.25)

95%) !important;

/* DEFAULT COLOR ON INACTIVE TABS IS WHITE (#ffffff), change to an another

css-color below if desired: */

color: #000000 !important;

font-weight:!important;

font-family: Arial Narrow !important;

font-size: 1.0em !important;

text-shadow: #000000 1px 1px 0px !important;

border-left: 1px solid rgba(96,96,96,0.5) !important;

border-right: 1px solid rgba(96,96,96,0.5) !important;

border-bottom: 1px solid rgba(255,255,255,0.65) !important;

padding-top: 2px !important;

}

.tabbrowser-tab[selected]:not([pinned])[fadein] {

background-image: -moz-linear-gradient(rgba(0,0,0,0.05),

rgba(255,255,255,.0) 95%),

-moz-linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,.0)

15%) !important;

/* DEFAULT COLOR ON SELECTED TAB IS LIGHT BLUE (#81F0F6), change to an

another css-color below if desired: */

color: #FFFFFF !important;

border-left: none !important;

border-right: none !important;

border-bottom: none !important;

-moz-border-radius: 2px 2px 0px 0px !important;

-moz-box-shadow: 0px -2px 0px #e0e0e0, 1px 4px 6px #000000, 0px

-4px 2px -3px #000000 !important;

text-shadow: #000000 1px 1px 0px !important;

font-family: Arial Narrow !important;

font-size: 1.2em !important;

font-weight:bold !important;

padding-left: 3px !important;

padding-bottom: 2px !important;

}

.tabbrowser-tab:hover:not([pinned]){

background-image: -moz-linear-gradient(rgba(0,0,0,0.05),

rgba(255,255,255,.0) 95%),

-moz-linear-gradient(rgba(0,255,255,0.05), rgba(255,255,255,.0)

15%) !important;

/* DEFAULT COLOR ON HOVER TAB IS WHITE (#ffffff), change to an another

css-color below if desired: */

color: #ffffff !important;

border-left: none !important;

border-right: none !important;

border-bottom: none !important;

-moz-border-radius: 2px 2px 0px 0px !important;

-moz-box-shadow: 0px -2px 0px #e0e0e0, 0px 4px 3px #000000, 0px -4px

2px -3px #000000!important;

text-shadow: #000000 1px 1px 0px !important;

font-family: Arial Narrow !important;

font-size: 1.2em !important;

font-weight:bold !important;

padding-left: 3px !important;

padding-bottom: 2px !important;

}

.tabs-newtab-button {

background: none !important;

border: none !important;

}

[apathy]

Is it possible to remove the scroll buttons on the tab bar? I'm using a script to reduce the min width of tabs so the scroll button never appears but there seem to be a bug when you open/close tabs the scroll button flashes for a sec which causes the tabs to resize twice and it's really annoying.

[foxxyn8]

Nobody can help me with this? I've gotten the code down to a much more manageable size. I'm trying to remove everything except for the 3D effect on the tabs. The main thing I can't seem to do no matter what I try is change the selected tab's text to white. Plus, the text looks kind of funny. Like a little too strong. Like maybe I have to remove some code for bold, or it's using the wrong font. I'd like to use Segoe UI. Also, I'd like to remove the color code for the tab itself because I use ChromaTabs Plus to color code my tabs. I just want the pop-out 3D effect with white text for the active tab and black text for the inactive tabs. Anyone know how to do it based on this code? I need help!! Thanks if you can help!!

This is what your posted code looks like on Firefox 4 default theme, Win7 default Aero theme:

What would you like done?

[vasa1]

Is it possible to remove the scroll buttons on the tab bar? I'm using a script to reduce the min width of tabs so the scroll button never appears but there seem to be a bug when you open/close tabs the scroll button flashes for a sec which causes the tabs to resize twice and it's really annoying.

If you reveal the "script", people may help you troubleshoot.

[apathy]

If you reveal the "script", people may help you troubleshoot.

Sorry here's the script.

.tabbrowser-tab {min-width: 016px !important;}

.tabbrowser-tab {clip-width: 016px !important;}

[vasa1]

Is it possible to remove the scroll buttons on the tab bar? ...

This hides them. But I'm not sure it will solve the problem:

.scrollbutton-up { display: none !important; }
.scrollbutton-down { display: none !important; }

[Raging Melonn]

Nobody can help me with this? I've gotten the code down to a much more manageable size. I'm trying to remove everything except for the 3D effect on the tabs. The main thing I can't seem to do no matter what I try is change the selected tab's text to white. Plus, the text looks kind of funny. Like a little too strong. Like maybe I have to remove some code for bold, or it's using the wrong font. I'd like to use Segoe UI. Also, I'd like to remove the color code for the tab itself because I use ChromaTabs Plus to color code my tabs. I just want the pop-out 3D effect with white text for the active tab and black text for the inactive tabs. Anyone know how to do it based on this code? I need help!! Thanks if you can help!!

Based on you requirement and code, try if this is what you want?

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

/* Go to this page if you want to CHANGE THE COLOR:
   http://www.w3schools.com/css/css_colors.asp */

#TabsToolbar{
    background-color: transparent!important;
}

.tabbrowser-tab, .tabs-newtab-button {
    background: transparent !important;
    padding-left: 5px !important;
    padding-right: 1px !important;
    border: #000 !important;
    border-radius: 3px 3px 0px 0px !important;
    height: 26px !important;
    margin-top: 3px !important;
    margin-left: 1px !important;
    font-family: Segoe UI !important;
}

.tabbrowser-tab:not([pinned]):not([selected]){
    background-image: -moz-linear-gradient(rgba(0,0,0,0),
                                           rgba(255,255,255,.05) 95%),
                      -moz-linear-gradient(rgba(255,255,255,0.0),
                                           rgba(255,255,255,.25) 95%) !important;

/* DEFAULT COLOR ON INACTIVE TABS IS WHITE (#ffffff)
   change to an another css-color below if desired: */

   color: #000 !important;

   text-shadow: #000 1px 1px 0px !important;
   border-left: 1px solid rgba(96,96,96,0.5) !important;
   border-right: 1px solid rgba(96,96,96,0.5) !important;
   border-bottom: 1px solid rgba(255,255,255,0.65) !important;
   padding-top: 2px !important;
}

.tabbrowser-tab[selected]:not([pinned])[fadein] {
   background-image: -moz-linear-gradient(rgba(0,0,0,0.05),
                                          rgba(255,255,255,.0) 95%),
                     -moz-linear-gradient(rgba(255,255,255,0.05), 
                                          rgba(255,255,255,.0) 15%) !important;

/* DEFAULT COLOR ON SELECTED TAB IS LIGHT BLUE (#81F0F6), 
   change to an another css-color below if desired: */

   color: #FFF !important;

   border-left: none !important;
   border-right: none !important;
   border-bottom: none !important;
   border-radius: 2px 2px 0px 0px !important;
   box-shadow: 0 0 2px rgba(255, 255, 255, 0.4) inset,
               0 4px 6px rgba(255, 255, 255, 0.4) inset,
               0 11px 0 -2px rgba(255, 255, 255, 0.2) inset,
               0 13px 8px rgba(80, 80, 80, 0.3) inset,     /*<- adjust up or down    */
               1px 2px 4px rgba(0, 0, 0, 0.3) !important;  /*   by a little to       */
                                                           /*   "even out" the       */
                                                           /*   center shadow effect */
   text-shadow: #000 1px 1px 0px !important;
   padding-left: 3px !important;
   padding-bottom: 2px !important;
}

.tabbrowser-tab:hover:not([pinned]){
   background-image: -moz-linear-gradient(rgba(0,0,0,0.05),
                     rgba(255,255,255,.0) 95%),
                     -moz-linear-gradient(rgba(0,255,255,0.05),
                     rgba(255,255,255,.0) 15%) !important;

/* DEFAULT COLOR ON HOVER TAB IS WHITE (#ffffff),
   change to an another css-color below if desired: */

   color: #fff !important;

   border-left: none !important;
   border-right: none !important;
   border-bottom: none !important;
   border-radius: 2px 2px 0px 0px !important;
   box-shadow: 0 0 2px rgba(255, 255, 255, 0.4) inset,
               0 4px 6px rgba(255, 255, 255, 0.4) inset,
               0 11px 0 -2px rgba(255, 255, 255, 0.2) inset,
               0 13px 8px rgba(80, 80, 80, 0.3) inset,     /*<- adjust up or down    */
               1px 2px 4px rgba(0, 0, 0, 0.3) !important;  /*   by a little to       */
                                                           /*   "even out" the       */
                                                           /*   center shadow effect */

   text-shadow: #000 1px 1px 0px !important;
   padding-left: 3px !important;
   padding-bottom: 2px !important;
}

.tabs-newtab-button .toolbarbutton-icon{
   background: none !important;
   border: none !important;
   margin-left: -5px !important;
} 

[vasa1]

This is what your posted code looks like on Firefox 4 default theme, Win7 default Aero theme:

...

Foxxyn8, I hope you don't misunderstand me, but a lot of us Win XP (and perhaps other OS users) are going to miss out on some of the things you do even though we have Fx 4 :( :(

[apathy]

This hides them. But I'm not sure it will solve the problem:

.scrollbutton-up { display: none !important; }
.scrollbutton-down { display: none !important; }

Thanks. Yeah it didn't fix the problems although the scroll buttons aren't seen anymore the resizing is still noticeable. Oh well worth a shot.

[mancode20]

You guys had it close to what I want. I messed around and got it even closer. The one thing I'm trying to change is how the inactive tabs that get stamped/pushed in become too small. They shrink. I don't want them to shrink, but I do want the active tab to have that pop-out 3D effect. Another guy found a way to do it, but his text looks too bold/strong and doesn't show up properly. I like the text of mine way better. I will show you my code and his. I'd like to merge his with mine, but only his part about the inactive tabs not shrinking. I'm using the extension ChromaTabs Plus to color code my tabs, so I don't want any color coding removed. No transparent backgrounds. It's very close to what I want. I can't even tell if the pop-out 3D effect is working currently. Maybe because of my persona. I think it is, though. I'm not sure if I want that white border around the active tab. It's giving it kind of a glowing effect. Not sure I want to keep that or not. How do I change that? I'll show you a screenshot of the way it is now. http://www.fileserve.com/file/teF4ytu

My code:

@namespace

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

/* Go to this page if you want to CHANGE THE COLOR:

http://www.w3schools.com/css/css_colors.asp */

.tabbrowser-tab, .tabs-newtab-button {

background: !important;

padding-left: 5px !important;

padding-right: 1px !important;

border: #000000 !important;

-moz-border-radius: 3px 3px 0px 0px !important;

height: 26px !important;

margin-top: 3px !important;

margin-left: 1px !important;

}

.tabbrowser-tab:not([pinned=true]){

!important;

/* DEFAULT COLOR ON INACTIVE TABS IS WHITE (#ffffff), change to an another

css-color below if desired: */

color: #000000 !important;

font-weight:!important;

font-family: Segoe UI !important;

font-size: 1.0em !important;

text-shadow: #000000 1px 1px 0px !important;

border-left: 1px solid rgba(96,96,96,0.5) !important;

border-right: 1px solid rgba(96,96,96,0.5) !important;

border-bottom: 1px solid rgba(255,255,255,0.65) !important;

padding-top: 2px !important;

}

.tabbrowser-tab[selected]:not([pinned])[fadein] {

!important;

/* DEFAULT COLOR ON SELECTED TAB IS LIGHT BLUE (81F0F6), change to an

another css-color below if desired: */

color: #fff !important;

border-left: none !important;

border-right: none !important;

border-bottom: none !important;

-moz-border-radius: 2px 2px 0px 0px !important;

-moz-box-shadow: 0px -2px 0px #e0e0e0, 1px 4px 6px #fff, 0px -4px

2px -3px #fff !important;

text-shadow: #fff 1px 1px 0px !important;

font-family: Segoe UI !important;

font-size: 1.2em !important;

font-weight: !important;

padding-left: 3px !important;

padding-bottom: 2px !important;

}

.tabbrowser-tab:hover:not([pinned]){

!important;

/* DEFAULT COLOR ON HOVER TAB IS WHITE (#ffffff), change to an another

css-color below if desired: */

color: #0000ff !important;

border-left: none !important;

border-right: none !important;

border-bottom: none !important;

-moz-border-radius: 2px 2px 0px 0px !important;

-moz-box-shadow: 0px -2px 0px #e0e0e0, 0px 4px 3px #000000, 0px -4px

2px -3px #ffffff!important;

text-shadow: #000000 1px 1px 0px !important;

font-family: Segoe UI !important;

font-size: 1.2em !important;

font-weight:bold !important;

padding-left: 3px !important;

padding-bottom: 2px !important;

}

.tabs-newtab-button {

background: none !important;

border: none !important;

}

My code ends and now this is his code: (Notice how his tabs don't shrink, but still kind of have that 3D effect.)

.tabbrowser-tab[selected]:not([pinned])[fadein] {

background-image: -moz-linear-gradient(rgba(0,0,0,0.05), rgba(255,255,255,.0) 95%),

-moz-linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,.0) 15%) !important;

/* DEFAULT COLOR ON SELECTED TAB IS LIGHT BLUE (#81F0F6), change to an another css-color below if desired: */

color: #81F0F6!important;

border-left: none !important;

border-right: none !important;

border-bottom: none !important;

-moz-border-radius: 2px 2px 0px 0px !important;

-moz-box-shadow: 0px -2px 0px #e0e0e0, 1px 4px 6px #000000, 0px -4px 2px -3px #000000!important;

text-shadow: #000000 1px 1px 0px !important;

font-family: Arial Narrow !important;

font-size: 1.2em !important;

font-weight:bold !important;

padding-left: 3px !important;

padding-bottom: 2px !important;

}

[mancode20]

Now that I looked at the original stylish again, I don't think my code is producing the pop-out 3D effect of the active tab after all. I still need help with that. Thanks!

[foxxyn8]

Foxxyn8, I hope you don't misunderstand me, but a lot of us Win XP (and perhaps other OS users) are going to miss out on some of the things you do even though we have Fx 4 :( :(

The maybe it would behoove you to state your OS, if you're using a persona, Minefield or Release, etc when asking for help.

[vasa1]

The maybe it would behoove you to state your OS, if you're using a persona, Minefield or Release, etc when asking for help.

Very true!

[grayscale]

Is it possible to have the autohide bookmarks style without enabling the bookmarks toolbar? I want to make the bookmarks button always visible.

Also, how do I use DOM Inspector to view the class/id of the context menu or menu entries?

[vasa1]

...

Also, how do I use DOM Inspector to view the class/id of the context menu or menu entries?

Also, for things like the window that comes up with Alt, Tools, Options.

[parry]

How would I change these toolbar icons? I tried some scripts from userstyles but none worked?

They are GreaseMonkey & Master Password.

[Salty Wagyu]

How do I stop the Bookmark Toolbar Items from truncating?

In that example it shows double arrows but nothing is in that box. If I resize the browser smaller the single folder icon I have there will disappear into the menu provided by the 2 arrows, usually can't get it showing again until I restart the browser.

Had to get this from elsewhere, to answer my own question....:

#personal-bookmarks {
  min-width: 27px !important;
  max-width: 120px !important
}