[dave double u]

Cherio, your favourite Dave-guy is in need of a little help with Firefox skinning:

1) Is there an easy way to import the navigation toolbar from another theme, say SafireMilk, into Firefox' default theme? I've been messing around with the browser.css file, but without much luck. I want to use the deafult 2.0 theme, but I can't stand the navigation icons.

2) I'm quite diggin the FlatStyle extension, but for some reason I'm getting this weird little box whenever I hover my mouse over something (see attached picture). Have any of you experienced the same thing, or have an idea of how to get rid of it?

I'd really appreciate any help. I've been searching all over the place, but knowing me, I've probably been searching in all the wrong places.

Thanks!

Attached File(s)

•  flatStyleCursorThing.png (680bytes)
  Number of downloads: 274

[ssmith]

1)
I'll need to do some digging on how to do that. There's two ways to do it, change the default theme, or use a customization file in your Firefox profile. I'll try and dig both ways out.

2)
The weird little box looks like it should be the AltText for an image or possibly the extension is trying to show the link as a popup instead of having it in the status bar.

If you have any other extensions, try disabling them then restarting Firefox. If the box doesn't pop up, then there's a conflict with one of your other extensions. Otherwise, it's being caused by the FlatStyle extension, and you'll just have to live with it or see if the extension author can fix it.

Also try with the default Firefox theme if you aren't using that one. It could be your Firefox theme causing it, too.

[dave double u]

Thanks a million for your helpful response, ssmith! You were absolutely right about the extension conflict. Apparently FlatStyle and Google Toolbar don't like each other very much. It's acutally quite funny, Google Toolbar was the last extension I would have thought to disable. Thank god that little box isn't follwing my cursor around anymore!

As for importing the navigation toolbar icons from another theme, if you find out how to do it please let me know.

Again, thanks for your help, it is much appreciated.

[ssmith]

Check your PMs.

[squirt33]

I'd love to know this too. Can you PM me with it too;)?

[ssmith]

^Done.

[karma.police]

Can you post it here so everybody knows how??

THX

[ssmith]

^What are you, the police?

Create a file called userChrome.css in the chrome subdirectory of your Firefox profile folder. Take a gander here:
http://kb.mozillazin.../UserChrome.css

/* ::::: Do not remove this @namespace entry -- it's required for correct functioning ::::: */

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



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



/* ::::: primary toolbar buttons ::::: */

.toolbarbutton-1 {

  -moz-appearance: none !important;

  /*-moz-box-orient: vertical !important;*/

  min-width: 0px !important;

  padding: 2px 2px !important;

  margin-top: 0px !important;

  border: 0px !important;

}



.toolbarbutton-1[checked="true"], 

.toolbarbutton-1[open="true"], 

.toolbarbutton-menubutton-button[checked="true"], 

.toolbarbutton-menubutton-button[open="true"] {

  padding: 2px 0px !important;

}



.toolbarbutton:not([disabled="true"]):hover,

.menubutton:not([disabled="true"]):hover,

.toolbarbutton:not([disabled="true"]):hover:active,

.menubutton:not([disabled="true"]):hover:active {

  color: MenuText !important;

}



.toolbarbutton-menubutton-button {

  -moz-appearance: none !important;

}



.toolbarbutton-menubutton-stack,

.toolbarbutton-menubutton-button {

  border: 0px !important;

  padding: 0px !important;

  margin: 0px !important;

}



.toolbarbutton-menubutton-dropmarker {

  /* display: none !important; changed for TabMix Trash */

}



#back-button > .toolbarbutton-menubutton-dropmarker,

#forward-button > .toolbarbutton-menubutton-dropmarker {

  display: none !important;

}



toolbar[mode="icons"] .toolbarbutton-text {

  display: none;

}



toolbar[mode="text"] .toolbarbutton-menubutton-dropmarker,

toolbar[mode="text"] .toolbarbutton-icon {

  display: none !important;

}



/* ::::: 24px primary toolbar buttons ::::: */

/* :::::button-brushed ::::: */

/* ::::: BACK-BUTTON ::::: */

#back-button {

  list-style-image: url(buttons.png) !important;

  margin-right: -1px !important;

  -moz-image-region: rect(0px 447px 25px 420px) !important;

  -moz-box-orient: vertical !important;

}



#back-button[buttonover="true"] {

  -moz-image-region: rect(0px 447px 25px 420px) !important;

}



#back-button[buttondown="true"]{

  -moz-image-region: rect(25px 447px 50px 420px) !important;

}



#back-button[disabled="true"] {

  -moz-image-region: rect(50px 447px 75px 420px) !important;

}



/* ::::: FORWARD-BUTTON ::::: */

#forward-button {

  list-style-image: url(buttons.png) !important;

  margin-left: -1px !important; 

  -moz-image-region: rect(0px 474px 25px 448px) !important;

  -moz-box-orient: vertical !important;

}



#forward-button[buttonover="true"] {

  -moz-image-region: rect(0px 474px 25px 448px) !important;

}



#forward-button[buttondown="true"] {

  -moz-image-region: rect(25px 474px 50px 448px) !important;

}

#forward-button[disabled="true"] {

  -moz-image-region: rect(50px 474px 75px 448px) !important;

}



/* ::::: RELOAD-BUTTON ::::: */

#reload-button {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 84px 25px 56px) !important;

}



#reload-button:active {

  -moz-image-region: rect(25px 84px 50px 56px) !important;

}



#reload-button[disabled="true"] {

  -moz-image-region: rect(0px 84px 25px 56px) !important;

}



/* ::::: STOP-BUTTON ::::: */

#stop-button {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 420px 25px 392px) !important;

}



#stop-button:active {

  -moz-image-region: rect(25px 420px 50px 392px) !important;

}



#stop-button[disabled="true"] {

  -moz-image-region: rect(50px 420px 75px 392px) !important;

}



/* ::::: HOME-BUTTON ::::: */

#home-button {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 28px 25px 0px) !important;

}



#home-button:active {

  -moz-image-region: rect(25px 28px 50px 0px) !important;

}



#home-button[disabled="true"] {

  -moz-image-region: rect(0px 28px 25px 0px) !important;

}



/* ::::: PRINT-BUTTON ::::: */

#print-button {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 168px 25px 140px) !important;

}



#print-button:active {

  -moz-image-region: rect(25px 168px 50px 140px) !important;

}



#print-button[disabled="true"] {

  -moz-image-region: rect(0px 168px 25px 140px) !important;

}



/* ::::: NEW-TAB-BUTTON ::::: */

#new-tab-button,

#new-tab-button[checked="true"] {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 252px 25px 224px) !important;

}



#new-tab-button:active {

  -moz-image-region: rect(25px 252px 50px 224px) !important;

}



#new-tab-button[disabled="true"] {

  -moz-image-region: rect(0px 252px 25px 224px) !important;

}



/* ::::: NEW-WINDOW-BUTTON ::::: */

#new-window-button{

  list-style-image: url(buttons.png) !important;

 -moz-image-region: rect(0px 280px 25px 252px) !important;

}



#new-window-button:active {

  -moz-image-region: rect(25px 280px 50px 252px) !important;

}



#new-window-button[disabled="true"],

#new-window-button[checked="true"] {

  -moz-image-region: rect(50px 280px 75px 252px) !important;

}



/*::::: BOOKMARKS-BUTTON :::::*/

#bookmarks-button {

  list-style-image: none !important;

  background: url("bookmarks.png") center no-repeat !important;

  padding: 0px !important;

}



#bookmarks-button:hover {

  background: url("bookmarks-hover.png") center no-repeat !important;

}



#bookmarks-button[disabled="true"] {

  background: url("bookmarks.png") center no-repeat !important;

}



#bookmarks-button:hover:active,

#bookmarks-button[checked="true"] {

  background: url("bookmarks-pressed.png") center no-repeat !important;

}



#downloads-button {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 140px 25px 112px) !important;

}



#downloads-button:active {

  -moz-image-region: rect(25px 140px 50px 112px) !important;

}



#downloads-button[checked="true"] {

  -moz-image-region: rect(0px 140px 25px 112px) !important;

}



#downloads-button[disabled="true"] {

  -moz-image-region: rect(0px 140px 25px 112px) !important;

}



/* ::::: HISTORY-BUTTON ::::: */

#history-button {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 56px 25px 28px) !important;

}



#history-button:active {

  -moz-image-region: rect(25px 56px 50px 28px) !important;

}



#history-button[disabled="true"] {

  -moz-image-region: rect(0px 56px 25px 28px) !important;

}



#history-button[checked="true"] {

  -moz-image-region: rect(0px 56px 25px 28px) !important;

}



/* ::::: COPY-BUTTON ::::: */

#copy-button {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 364px 25px 336px) !important;

}



#copy-button:active {

  -moz-image-region: rect(25px 364px 50px 336px) !important;

}



#copy-button[disabled="true"],

#copy-button[checked="true"] {

  -moz-image-region: rect(50px 364px 75px 336px) !important;

}



/* ::::: CUT-BUTTON ::::: */

#cut-button {

  list-style-image: url(buttons.png) !important;

 -moz-image-region: rect(0px 392px 25px 364px) !important;

}

#cut-button:active {

  -moz-image-region: rect(25px 392px 50px 364px) !important;

}



#cut-button[disabled="true"],

#cut-button[checked="true"] {

  -moz-image-region: rect(50px 392px 75px 364px) !important;

}



/* ::::: PASTE-BUTTON ::::: */

#paste-button {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 336px 25px 308px) !important;

}



#paste-button:active {

  -moz-image-region: rect(25px 336px 50px 308px) !important;

}



#paste-button[disabled="true"],

#paste-button[checked="true"] {

  -moz-image-region: rect(50px 336px 75px 308px) !important;

}



/* ::::: REPORTER-BUTTON ::::: */

#reporterMenuButton {

  list-style-image: url(buttons.png) !important;

  -moz-image-region: rect(0px 112px 25px 84px) !important;

}



#reporterMenuButton :active {

  -moz-image-region: rect(25px 112px 50px 84px) !important;

}



toolbarbutton#reporterMenuButton[disabled="true"] {

  -moz-image-region: rect(0px 112px 25px 84px) !important;

}



toolbarbutton#reporterMenuButton[checked="true"] {

  -moz-image-region: rect(0px 112px 25px 84px) !important;

}

[ssmith]

Sorry, had to break it up, here's the rest.

/* ::::: Small Buttons ::::: */



toolbar[iconsize="small"] .toolbarbutton-1 {

}



/* ::::: BACK-BUTTON ::::: */

toolbar[iconsize="small"] #back-button,

toolbar[iconsize="small"] #back-button:hover {

  list-style-image: url(buttons-small.png) !important;

  margin-right: -1px !important;

  -moz-image-region: rect(0px 447px 25px 420px) !important;

}



toolbar[iconsize="small"] #back-button[buttondown="true"] {

  -moz-image-region: rect(25px 447px 50px 420px) !important;

}



toolbar[iconsize="small"] #back-button[disabled="true"] {

  -moz-image-region: rect(50px 447px 75px 420px) !important;

}



/* ::::: FORWARD-BUTTON ::::: */

toolbar[iconsize="small"] #forward-button,

toolbar[iconsize="small"] #forward-button:hover {

  list-style-image: url(buttons-small.png) !important;

  margin-left: -1px !important;

  -moz-image-region: rect(0px 474px 25px 448px) !important;

}



toolbar[iconsize="small"] #forward-button[buttondown="true"] {

  -moz-image-region: rect(25px 474px 50px 448px) !important;

}



toolbar[iconsize="small"] #forward-button[disabled="true"] {

  -moz-image-region: rect(50px 474px 75px 448px) !important;

}



/* ::::: RELOAD-BUTTON ::::: */

toolbar[iconsize="small"] #reload-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 84px 25px 56px) !important;

}



toolbar[iconsize="small"] #reload-button:active {

  -moz-image-region: rect(25px 84px 50px 56px) !important;

}



toolbar[iconsize="small"] #reload-button[disabled="true"] {

  -moz-image-region: rect(0px 84px 25px 56px) !important;

}



/* ::::: STOP-BUTTON ::::: */

toolbar[iconsize="small"] #stop-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 420px 25px 392px) !important;

}



toolbar[iconsize="small"] #stop-button:active {

  -moz-image-region: rect(25px 420px 50px 392px) !important;

}



toolbar[iconsize="small"] #stop-button[disabled="true"] {

  -moz-image-region: rect(50px 420px 75px 392px) !important;

}



/* ::::: HOME-BUTTON ::::: */

toolbar[iconsize="small"] #home-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 28px 25px 0px) !important;

}



toolbar[iconsize="small"] #home-button:active {

  -moz-image-region: rect(25px 28px 50px 0px) !important;

}



toolbar[iconsize="small"] #home-button[disabled="true"] {

  -moz-image-region: rect(0px 28px 25px 0px) !important;

}



/* ::::: PRINT-BUTTON ::::: */

toolbar[iconsize="small"] #print-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 168px 25px 140px) !important;

}



toolbar[iconsize="small"] #print-button:active {

  -moz-image-region: rect(25px 168px 50px 140px) !important;

}



toolbar[iconsize="small"] #print-button[disabled="true"] {

  -moz-image-region: rect(0px 168px 25px 140px) !important;

}



/* ::::: DOWNLOADS-BUTTON ::::: */

toolbar[iconsize="small"] #downloads-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 140px 25px 112px) !important;

}



toolbar[iconsize="small"] #downloads-button:active {

  -moz-image-region: rect(25px 140px 50px 112px) !important;

}



toolbar[iconsize="small"] #downloads-button[checked="true"] {

  -moz-image-region: rect(0px 140px 25px 112px) !important;

}



toolbar[iconsize="small"] #downloads-button[disabled="true"] {

  -moz-image-region: rect(0px 140px 25px 112px) !important;

}



/* ::::: NEW-TAB-BUTTON ::::: */

toolbar[iconsize="small"] #new-tab-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 252px 25px 224px) !important;

}



toolbar[iconsize="small"] #new-tab-button:active {

  -moz-image-region: rect(25px 252px 50px 224px) !important;

}



toolbar[iconsize="small"] #new-tab-button[checked="true"],

toolbar[iconsize="small"] #new-tab-button[disabled="true"] {

  -moz-image-region: rect(0px 252px 25px 224px) !important;

}



/* ::::: NEW-WINDOW-BUTTON ::::: */

toolbar[iconsize="small"] #new-window-button  {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 280px 25px 252px) !important;

}



toolbar[iconsize="small"] #new-window-button :active {

  -moz-image-region: rect(25px 280px 50px 252px) !important;

}



toolbar[iconsize="small"] #new-window-button [checked="true"],

toolbar[iconsize="small"] #new-window-button [disabled="true"] {

  -moz-image-region: rect(50px 280px 75px 252px) !important;

}



/* ::::: BOOKMARKS-BUTTON ::::: */

toolbar[iconsize="small"] #bookmarks-button {

  list-style-image: none !important;

  background: url("bookmarks.png") !important;

}



toolbar[iconsize="small"] #bookmarks-button:hover {

  background: url("bookmarks-hover.png") !important;

}



toolbar[iconsize="small"] #bookmarks-button:active,

toolbar[iconsize="small"] #bookmarks-button[checked="true"] {

  background: url("bookmarks-pressed.png") !important;

}



toolbar[iconsize="small"] #bookmarks-button[disabled="true"] {

  background: url("bookmarks.png") !important;

}



/* ::::: HISTORY-BUTTON ::::: */

toolbar[iconsize="small"] #history-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 56px 25px 28px) !important;

}



toolbar[iconsize="small"] #history-button:active {

  -moz-image-region: rect(25px 56px 50px 28px) !important;

}



toolbar[iconsize="small"] #history-button[checked="true"],

toolbar[iconsize="small"] #history-button[disabled="true"] {

  -moz-image-region: rect(0px 56px 25px 28px) !important;

}



/* ::::: CUT-BUTTON ::::: */

toolbar[iconsize="small"] #cut-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 392px 25px 364px) !important;

}



toolbar[iconsize="small"] #cut-button:active {

  -moz-image-region: rect(25px 392px 50px 364px) !important;

}



toolbar[iconsize="small"] #cut-button[disabled="true"] {

  -moz-image-region: rect(50px 392px 75px 364px) !important;

}



/* ::::: PASTE-BUTTON ::::: */

toolbar[iconsize="small"] #paste-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 336px 25px 308px) !important;

}



toolbar[iconsize="small"] #paste-button:active {

  -moz-image-region: rect(25px 336px 50px 308px) !important;

}



toolbar[iconsize="small"] #paste-button[checked="true"],

toolbar[iconsize="small"] #paste-button[disabled="true"] {

  -moz-image-region: rect(50px 336px 75px 308px) !important;

}



/* ::::: COPY-BUTTON ::::: */

toolbar[iconsize="small"] #copy-button {

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 364px 25px 336px) !important;

}



toolbar[iconsize="small"] #copy-button:active {

  -moz-image-region: rect(25px 364px 50px 336px) !important;

}



toolbar[iconsize="small"] #copy-button[checked="true"],

toolbar[iconsize="small"] #copy-button[disabled="true"] {

  -moz-image-region: rect(50px 364px 75px 336px) !important;

}



/* ::::: REPORTER-BUTTON ::::: */

toolbar[iconsize="small"] #reporterMenuButton{

  list-style-image: url(buttons-small.png) !important;

  -moz-image-region: rect(0px 112px 25px 84px) !important;

}



toolbar[iconsize="small"] #reporterMenuButton:active {

  -moz-image-region: rect(25px 112px 50px 84px) !important;

}



toolbar[iconsize="small"] toolbarbutton#reporterMenuButton[checked="true"],

toolbar[iconsize="small"] toolbarbutton#reporterMenuButton[disabled="true"] {

  -moz-image-region: rect(0px 112px 25px 84px) !important;

Then, take the following images from the SaFire jar file and put them in the chrome subdirectory of your profile folder:
browser/buttons.png
browser/buttons-small.png
browser/bookmarks.png
browser/bookmarks-hover.png
browser/bookmarks-pressed.png

Make sure you save the userChrome.css file, then close and restart Firefox. The buttons should work in both small and large icon mode. At least, they are working for me, right now.

The code is a little messy because I ripped it straight out of the browser.css file from SaFire. I'd clean it up some more, but since it works... why mess with it?

If there's legal ramifications, I don't know. I've always been under the impression the code was fair game but the images were off limits unless you credit the author. But just to play it safe:
Original work here: http://www.deviantar...ation/20457909/