Share your custom Firefox/Minefield 4 stylish scripts

[SoapyHamHocks Member]

Hey everyone,

I was curious if anyone could help me out with this, shouldn't be too hard.

Give this a shot:

#urlbar[level] {
 background: #38D038 padding-box !important;
}

[Dmented]

Give this a shot:

#urlbar[level] {
 background: #38D038 padding-box !important;
}

Ah, perfect! Thanks a lot!

[mNiosu]

Hi all! I'm back! :D :laugh: Been busy last several weeks, didn't have the time to visit this forum.

I have a very simple question for now: How can I change the default text color in the search-box (see print screen) ? Thanks!

[BoneyardBrew Member]

Hi all! I'm back! :D :laugh: Been busy last several weeks, didn't have the time to visit this forum.

I have a very simple question for now: How can I change the default text color in the search-box (see print screen) ? Thanks!

Just throw this code into Stylish and modify it to your likings. :)

.searchbar-textbox {
    color: rgba(0,0,0,.8) !important;
}

[mNiosu]

Just throw this code into Stylish and modify it to your likings. :)

.searchbar-textbox {
    color: rgba(0,0,0,.8) !important;
}

Thanks mate, but I meant also (or only) the default text (the one that says "wikipedia" or "google" when you are not typing anything)...

So how may I change that also?

[foxxyn8]

Thanks mate, but I meant also (or only) the default text (the one that says "wikipedia" or "google" when you are not typing anything)...

So how may I change that also?

#searchbar .textbox-input:-moz-placeholder {
color: red !important;
}

[Deo Domuique]

Foxxyn "save" me please! Found a "bug"...

On my Nav-Bar if I place a normal button, it's getting my style... But If I place a button with 2 functions, not getting my style

And this is my style:

#nav-bar .toolbarbutton-1:not(#back-button) {
 padding: 1px 5px !important;
 margin: 1px 3px !important;
 border-radius: 1px !important;
 height: 25px !important;
}

[foxxyn8]

Foxxyn "save" me please! Found a "bug"...

On my Nav-Bar if I place a normal button, it's getting my style... But If I place a button with 2 functions, not getting my style

try this:

#nav-bar .toolbarbutton-1:not(#back-button) {
  padding: 1px 5px !important;
  margin: 1px 3px !important;
  border: 1px solid rgba(0, 0, 0, 0.19) !important;
  border-radius: 1px !important;
  height: 25px !important;
  box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 2px inset, rgba(0, 0, 0, 0.15) 0px 1px 0px 0px !important;
  background-image: -moz-linear-gradient(rgba(251, 252, 253, 0.95), rgba(246, 247, 248, 0.47) 49%, rgba(231, 232, 233, 0.45) 51%, rgba(225, 226, 229, 0.3)) !important;
}

#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

[Deo Domuique]

:(

Now it's unified and a bit bigger... Can we make it exactly like when it's on my add-on bar?

[foxxyn8]

:(

Now it's unified and a bit bigger... Can we make it exactly like when it's on my add-on bar?

#nav-bar .toolbarbutton-1:not(#back-button) {
 margin: 1px 3px !important;
 border-radius: 1px !important;
 height: 25px !important;
}

#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 border: 1px solid rgba(0, 0, 0, 0.19) !important;
 border-radius: 1px !important;
}

#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
border-right: 0 !important;
}

[Deo Domuique]

PERFECTO!

[mNiosu]

#searchbar .textbox-input:-moz-placeholder {
color: red !important;
}

Thanks! As always, foxxyn8, the man with the answers... ;)

[foxxyn8]

For those who miss having a lock icon for secure sites, this style replaces the favicon on the location bar with a lock icon for sites which pass verification.

Firefox 4 Lock Icon for Secure Sites

[Deo Domuique]

Foxxyn... I've custom Windows Theme and you know, there is a problem with FF and its colors.

Can you give me the code for normal Menu Colors? Half-White and Half-Light Blue!

I searched the entire topic but didn't find it. I was pretty sure, somewhere here, someone posted it...

EDIT: NVM! Found it by extreme luck...

[Deo Domuique]

Well... Please someone can help me?

The Menu got its final style... The Sub-Menus of Blue Pane made blue too... The Sub-Menus of White Pane made white too...

So, can someone give me the entire final code?

[foxxyn8]

Not sure what you're asking for Deo. I know you're using a custom Windows theme. Are your submenus not using the default colors? did you do this already:

Mozillazine-Firefox 4 gray is not default theme in Windows 7

&

Mozillazine-Firefox grey menu instead of half white/half blue

[Deo Domuique]

Foxxyn I saw all those but I didn't manage to fix it.

Can you please give me the final code of Menu? If it's impossible...

Also I saw the code in Bugzilla but that has many things and I can't even copy-paste correctly...

Αdditionally, many custom themes have their specific colors so it's normal to become white for example... Isn't it?

Here is the code, I think...

https://bugzilla.mozilla.org/show_bug.cgi?id=589435

And here what I have now but it isn't the final which I ask for:

#appmenuPrimaryPane {
  -moz-border-end: 1px solid ThreeDShadow;
}
#appmenu-popup {
  -moz-appearance: none;
  background: white;
  border: 1px solid rgba(0,0,0,.5);
}
#appmenuPrimaryPane {
  background-color: rgba(255,255,255,0.5);
  padding: 2px;
}
#appmenuSecondaryPane {
  background-color: #f1f5fb;
  box-shadow: 1px 0 2px rgb(204,214,234) inset;
  padding-top: 2px;
  padding-bottom: 2px;
}
#appmenuSecondaryPane:-moz-locale-dir(rtl) {
  box-shadow: -1px 0 2px rgb(204,214,234) inset;
}

[foxxyn8]

#appmenuPrimaryPane menupopup would be the submenus of the left pane

#appmenuSecondaryPane menupopup would be the submenus of the right pane

this is from the patch:

#appmenuPrimaryPane menupopup {
	-moz-appearance: none!important;
	background-image: -moz-linear-gradient(left, white 26px, ThreeDLightShadow 26px, ThreeDLightShadow 27px, ThreeDHighlight 27px, ThreeDHighlight 28px, white 28px)!important;
	border: 3px solid!important;
	-moz-border-top-colors: ThreeDShadow white!important;
	-moz-border-bottom-colors: ThreeDShadow white!important;
	-moz-border-left-colors: ThreeDShadow white!important;
	-moz-border-right-colors: ThreeDShadow white!important;
}

#appmenuSecondaryPane menupopup {
	-moz-appearance: none!important;
	background-image: -moz-linear-gradient(left, #f1f5fb 26px, ThreeDLightShadow 26px, ThreeDLightShadow 27px, ThreeDHighlight 27px, ThreeDHighlight 28px, #f1f5fb 28px)!important;
	border: 3px solid!important;
	-moz-border-top-colors: ThreeDShadow #f1f5fb!important;
	-moz-border-bottom-colors: ThreeDShadow #f1f5fb!important;
	-moz-border-left-colors: ThreeDShadow #f1f5fb!important;
	-moz-border-right-colors: ThreeDShadow #f1f5fb!important;
	background-color: #f1f5fb!important;
	border: 1px solid ThreeDShadow!important;
	padding: 2px!important;
	}

[Deo Domuique]

Well-Well... That's it!

The code that I posted above, is the final? Is the latest correct one?

[foxxyn8]

Well-Well... That's it!

The code that I posted above, is the final? Is the latest correct one?

according to the patch this is:

 #appmenuPrimaryPane {
   -moz-border-end: 1px solid ThreeDShadow;
 }

   #appmenu-popup {
     -moz-appearance: none;
     background: white;
     border: 1px solid ThreeDShadow;
   }

   #appmenuPrimaryPane {
     background-color: rgba(255,255,255,0.5);
     padding: 2px;
   }

   #appmenuSecondaryPane {
     background-color: #f1f5fb;
     box-shadow: 1px 0 2px rgb(204,214,234) inset;
     padding-top: 2px;
     padding-bottom: 2px;
     font-family: "Segoe UI Semibold", "Segoe UI", sans-serif;
   }

[aznkid25]

according to the patch this is:

 #appmenuPrimaryPane {
   -moz-border-end: 1px solid ThreeDShadow;
 }

   #appmenu-popup {
     -moz-appearance: none;
     background: white;
     border: 1px solid ThreeDShadow;
   }

   #appmenuPrimaryPane {
     background-color: rgba(255,255,255,0.5);
     padding: 2px;
   }

   #appmenuSecondaryPane {
     background-color: #f1f5fb;
     box-shadow: 1px 0 2px rgb(204,214,234) inset;
     padding-top: 2px;
     padding-bottom: 2px;
     font-family: "Segoe UI Semibold", "Segoe UI", sans-serif;
   }

what is this stylish code for?

[foxxyn8]

what is this stylish code for?

It's part of the default appmenu style in Firefox 4 b8pre copied from the patch for Bug 589435 - Style Firefox button's submenus

[Deo Domuique]

Foxxyn!

I found this style: http://userstyles.org/styles/40101

And saw your comment! Tried to apply your suggestions... And look what I've got:

#urlbar {
    position: relative !important;
}

.urlbar-over-link-box[overlinkstate="fade-out"] { visibility: collapse !important; 
}

.urlbar-over-link-box {
    position: fixed !important;
    bottom: 28px !important;
    left: 5px !important;
    opacity: 0.9 !important;
    width: -moz-max-content !important;
    max-width: none !important;
    height: 22px !important;  
    padding: 2px 5px 2px 5px !important;
    border-radius:  1px !important;
    border: 1px solid #767676 !important;
    background: -moz-linear-gradient(top, #F8F8F8 , #E8E8F0) padding-box !important;
    font-family: Verdana !important;

}

.urlbar-textbox-container-children[overlinkstate]{ opacity: 1 !important; 
}

.urlbar-over-link-path-label {
    max-width: 500px !important; 
    width: -moz-max-content !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.urlbar-over-link-host-label,
.urlbar-over-link-path-label {
    color: #594E52 !important;
    font-size: 12px !important;
}

I just applied your suggestion and customized few things like "bottom: 28px !important;" and border-radius to 1, to fit well in my script.... Nothing important...

But, sometimes it doesn't work correctly... Some times not dissapearing... And if I go to Add-ons Manager a link awlays appears...

Did you refine it? Did you make it perfect? It's exactly like IE 9's and loved it!

[foxxyn8]

Foxxyn!

I found this style: http://userstyles.org/styles/40101

And saw your comment! Tried to apply your suggestions... And look what I've got:

I just applied your suggestion and customized few things like "bottom: 28px !important;" and border-radius to 1, to fit well in my script.... Nothing important...

But, sometimes it doesn't work correctly... Some times not dissapearing... And if I go to Add-ons Manager a link awlays appears...

Did you refine it? Did you make it perfect? It's exactly like IE 9's and loved it!

Actually, I don't use it because it refuses to obey my transition delay settings. As far as the link which always shows on about:addons, this problem doesn't occur in the latest hourlies in which in-content-ui has landed (you'll see it in the nightly update tomorrow). In the beta you can work around it by replacing .urlbar-over-link-box with #main-window:not([stylish-url=about:addons]) .urlbar-over-link-box {.

Of course that will only work if you're using stylish.

[Deo Domuique]

Well, True... Now with Content UI not appearing anymore. I've latest hourly.

Few problems left... Seems appears an address randomly ( when I'm in Add-ons Manager and Trying to go to the creator's address for example )? Dunno, anyway. Since you don't use it, crap for me!

Replace what with what? That was kinda confusing...

Do you know if the final patch for UI Content will be exactly like mock-up design?