Share your custom Firefox/Minefield 4 stylish scripts

[+Heartripper Subscriber¹]

Styles the about window to look like the mockups.

http://userstyles.org/styles/41276

[NeoRev]

WFM. What problems are you having?

After installing it, when I try to click on 'options' in the addon manager, everything just locks up and I can't click anything. I have to end ff via taskmanager.

[SkyDX]

Just curious, is there any way with Stylish to replace the word "Minefield" with Firefox or anything else for that matter, browser wide?^^

[dnast]

Just curious, is there any way with Stylish to replace the word "Minefield" with Firefox or anything else for that matter, browser wide?^^

Yes. I think it was posted near the beginning of this thread. If you can't find it, I'll post it when I get home.

[Deo Domuique]

I don't get what you mean when you say "browser wide"

You want to replace the text on AppMenuButton ? If yes:

#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "FireFox 4 " !important;
}

[foxxyn8]

I think skyDX wants to replace every instance of the word "Minefield" with the word "Firefox". At least that's what I take browser-wide to mean.

About Minefield and Minefield Help menu items can be changed like this:

menuitem[label="About Minefield"] label,
menuitem[label="Minefield Help"] label  {
  display: none !important;
}

menuitem[label="About Minefield"] .menu-accel-container:before{
  content: "About Firefox" !important;
  margin-left: -8px !important;
}

menuitem[label="Minefield Help"] .menu-accel-container:before {
  content: "Firefox Help" !important;
  margin-left: -9px !important;
}

margins are set for my system they would need to be adjusted

[SkyDX]

Thanks for the help guys but foxxyn got it right :p Sorry I should have worded it better... anyways, yeah I already renamed my menu button just the Minefield branding feels "strange" after a while to me. I know I could just stick to the beta releases but then I would miss the progress :whistle: Guess there isn't a way, huh? :(

[kageon1]

Hello, I was wondering if anyone can figure out how to remove that gray line to the right of the Find bar. Also is it possible to rename Minefield in the jumplist to Firefox?

Here's the script for the Find bar:

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

#addon-bar {
  position: fixed;
  bottom: -22px;
  right: 1px;
  margin-right: 20px !important;
  border: 0 !important;
  -moz-appearance: none !important;
  -moz-transition: bottom .7s 2s ease-in;
  padding-top: 22px !important;
}

#browser-bottombox {
  position: fixed;
  bottom: 0px;
}

#addon-bar:hover {
 bottom: 0;
 -moz-transition: bottom .7s 1s ease-out;
}

#main-window[sizemode="maximized"] #addon-bar {
  right: 0;
}

#addon-bar > #status-bar {
  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 4px 0 0;
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgb(207, 219, 236) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgb(207,220,236)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

#addonbar-closebutton {
 display: none;
}

Thanks.

[foxxyn8]

Hello, I was wondering if anyone can figure out how to remove that gray line to the right of the Find bar. Also is it possible to rename Minefield in the jumplist to Firefox?

Thanks.

AFAIK it is not possible to rename the jumplist item.

The code you posted only styles the addon bar. The only effect that code has on the findbar is positioning it at the very bottom of the window. Please post the code you are using to style the findbar so that I or someone else may provide you with assistance.

[kageon1]

AFAIK it is not possible to rename the jumplist item.

The code you posted only styles the addon bar. The only effect that code has on the findbar is positioning it at the very bottom of the window. Please post the code you are using to style the findbar so that I or someone else may provide you with assistance.

Whoops! I totally didn't notice, here's the script:

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

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  border-radius: 4px 4px 0 0;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgb(207, 219, 236) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgb(207,220,236)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

#browser-bottombox {background: none !important;}

#FindToolbar {border:none !important;}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {
display:none !important;
}

Thanks in advance.

[foxxyn8]

Whoops! I totally didn't notice, here's the script:

Thanks in advance.

Ok, I checked the script in a clean profile on both the official beta and the current nightly and it looks fine to me. Do you have any other scripts which may be conflicting?

[haziqfathihin]

hai guys...can i know how to change the minefield icon to firefox icon...thanks..

[+Heartripper Subscriber¹]

glassed addonbar:

based on: https://bug616018.bugzilla.mozilla.org/attachment.cgi?id=495136

http://userstyles.org/styles/41348

[aznkid25]

glassed addonbar:

based on: https://bug616018.bugzilla.mozilla.org/attachment.cgi?id=495136

http://userstyles.org/styles/41348

How can I change the opacity of the add-on bar? Which part of the code do I edit?

[foxxyn8]

How can I change the opacity of the add-on bar? Which part of the code do I edit?

Adjust the alpha values (the last number of the rgba values) of the background here:

 #addon-bar{
   -moz-appearance: none !important;
   border: none !important;
   background: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,.3)) !important;
   max-height: 23px !important;
   background-clip: padding-box !important;
   padding: 0 3px 0 3px !important;
 }

Any number between 0 and 1 with 0 being completely transparent and 1 being solid color.

[Excelsis]

glassed addonbar:

based on: https://bug616018.bugzilla.mozilla.org/attachment.cgi?id=495136

http://userstyles.org/styles/41348

Window border looks different for me for some reason. Tried one of the browser border styles but it makes it worst.

[+Heartripper Subscriber¹]

Window border looks different for me for some reason. Tried one of the browser border styles but it makes it worst.

you can use this to fix the borders:

 #main-window[sizemode="normal"] #browser{
    border-width: 0 1px 1px 1px !important;
    border-style: solid !important;
    border-color: rgba(26, 26, 26, 0.4) !important;
    background-clip: padding-box !important;
}

 #main-window[sizemode="normal"] #browser-border-start,
 #main-window[sizemode="normal"] #browser-border-end{
    display: none !important;
 }

[skyli]

Hi! Could somebody please help me how to remove these lines please? Thanks! Happy Christmas!! :)

[SoapyHamHocks Member]

Hi! Could somebody please help me how to remove these lines please? Thanks! Happy Christmas!! :)

#browser-border-start,
#browser-border-end {
  display: none !important;
}

[Lingj]

Hi! Could somebody please help me how to remove these lines please? Thanks! Happy Christmas!! :)

Hey! How did you go about making the whole browser transparent?

Thanks.

[skyli]

Hey! How did you go about making the whole browser transparent?

Thanks.

This one makes about blank transparent:

#browser,
#content > tabbox > tabpanels {
  background-color: transparent !important;
}

#main-window[stylish-url="about:blank"] #content browser { 
  opacity: 0 !important;
}

And this is for the navigation and tabbar:

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

/*remove background of the combined go/reload/stop button in location bar*/
#urlbar > toolbarbutton {
	border-radius: 0 !important;
}
#urlbar-go-button, #urlbar-go-button:hover, #urlbar-reload-button, #urlbar-reload-button:hover, #urlbar-stop-button, #urlbar-stop-button:hover {
	background-image: none !important;
	box-shadow: none !important;
}

/*Hide the Search Engine image*/
.searchbar-engine-image {
	display: none !important;
}

/*Hide the search button (magnifying glass)*/
.search-go-button {
	display: none !important;
}

/*Hide bookmark icons in the Personal Toolbar*/
toolbarbutton.bookmark-item > .toolbarbutton-icon {
	display: none !important;
}





.urlbar-history-dropmarker {
	display: none !important;
}

/*Transparency, hover and more naked UI*/
#nav-bar {
	background-color: rgba(255,255,255,.0) !important;
	border: none !important;
	margin-top: 1px !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
        border-bottom: none !important;

	background-image: -moz-linear-gradient(bottom, transparent, transparent 1px, rgba(255,255,255,.18) 1px, rgba(255,255,255,.34)) !important;

}
#PersonalToolbar {
	background-color: rgba(255,255,255,.1) !important;
	border: none !important;

        border-bottom: none !important;
}
#urlbar {
	background: rgba(255,255,255,.0) !important;
	border: none !important;
	border-radius: 0 !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-shadow: none !important;
        text-shadow: 0 0 .9em white, 0 0 .4ex white;

}
#urlbar:hover, #searchbar:hover > *, .findbar-textbox:hover {
	background: rgba(255,255,255,.0) !important;
}
.urlbar-over-link-box {
	color: #444444 !important;
}
.tabbrowser-tab:not([selected="true"]) {
	background: rgba(0,0,0,0.1) !important;
	color: #eeeeee !important;
        text-shadow: 0 0 .2em black, 0 0 .8ex black !important;
}
.tabbrowser-tab[selected="true"] {
	background-image: -moz-linear-gradient(bottom, transparent, transparent 1px, rgba(255,255,255,.42) 1px, rgba(255,255,255,.2)) !important;
}
.tabs-newtab-button {
	background: rgba(0,0,0,0.1) !important;
	color: #eeeeee !important;
	text-shadow: none!important;
}
.tabs-newtab-button:hover, #new-tab-button:hover, .scrollbutton-down:hover, .scrollbutton-up:hover, #alltabs-button:hover, #tabview-button:hover {
	background: rgba(255,255,255,0.1) !important;
	color: #eeeeee !important;
	text-shadow: none!important;
}
.toolbarbutton-1 > .toolbarbutton-menubutton-button, .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker, .toolbarbutton-1 {
	background: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}
.toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):not(:active):hover, .toolbarbutton-1:not([open="true"]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),  .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
	background-color: hsla(190,60%,70%,.5) !important;
	border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8) !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 0 1.5px rgba(255,255,255,.1) inset, 0 1px 0 rgba(0,0,0,.1), 0 0 3.5px hsl(190,90%,80%) !important;
	-moz-transition: background-color .4s ease-in,  border-color .2s ease-in,  box-shadow .2s ease-in !important;
}

[skyli]

#browser-border-start,
#browser-border-end {
  display: none !important;
}

Thanky you!!!!! And what about that line near the refresh button? :/

[SoapyHamHocks Member]

Thanky you!!!!! And what about that line near the refresh button? :/

Umm looks like a border on reload/stop/go, give this a shot.

#urlbar toolbarbutton {
  border: 0 !important;
}

[skyli]

Umm looks like a border on reload/stop/go, give this a shot.

#urlbar toolbarbutton {
  border: 0 !important;
}

Yeaaah that was it! ^^ Thank you very much! :D

[Lingj]

Is there any way to make this more transparent like the rest of the browser?