Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Mentor

+KibosJ Subscriber²

Posted
  • Subscriber²
Posted

I tried this new style, but I just can't get away with that back/forward button. Personally don't like it, prefer the older theme. :\

Community Regular

foxxyn8

Posted
Posted

I'm trying something new with back/forward buttons.

Before apply this you need move the back/forward buttons to Tab Bar.

This is just for Bars on Top.

Little lazy changelog:

1 - new back/forward button on Tab Bar;

2 - new square layout for url and search bar;

3 - fix double-click issue on Tab Bar;

4 - comment custom css for Status-4-Evar addon;

5 - uncomment custom css for default Add-on Bar;

The code is a bit out of order. I need to polish it later.

Actually, I do not like codes and programming. I am a graphic designer. My brain does not work well for codes. :blush:

So, if someone can check everything for me, thank you.

Got a issue that could not solve yet: if you use the auto hide menu bar (ALT key), the buttons are clipped when return to hide menu.

I tried to force zIndex negative on titlebar and mainmenu, but without success.

Please, give-me some feedback about this changes.

Thank you everyone for your help.

I didn't see any clipping (Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101007 Firefox/4.0b8pre ID:20101007042624), but you should do this so that it only applies the back/forward button styling when those buttons are placed on the tab bar:

#TabsToolbar #back-button {
	border-radius: 10000px !important;
	margin-top: -10px !important;
	margin-bottom: 5px !important;
	width: 30px !important;
	height: 30px !important;
	position: relative !important; 
	z-index: 1 !important;
	border: none !important;
	background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%, rgba(231,232,233,.45) 51%, rgba(225,226,229,.2)) !important;
	box-shadow: 0 0 0 3px rgba(255,255,255,.3) inset, 0 0 0 2px rgba(255,255,255,.1) inset, 0 0 0 1px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3), 1px 2px 1px rgba(0,0,0,.2) !important;
}
#TabsToolbar #forward-button {
	border-radius: 0 5px 5px 0 !important;
	padding-left: 7px !important;
	padding-right: 3px !important;
	margin-top: -5px !important;
	margin-bottom: 10px !important;
 	width: auto !important;
 	height: auto !important;
	border: none !important;
 	-moz-margin-start: -5px !important;
	background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%, rgba(231,232,233,.45) 51%, rgba(225,226,229,.2)) !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 0 2px rgba(255,255,255,.1) inset, 0 0 0 1px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3), 1px 2px 1px rgba(0,0,0,.2) !important;
	mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask) !important;
}

Contributor

Drifus

Posted
Posted

I didn't see any clipping (Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101007 Firefox/4.0b8pre ID:20101007042624), but you should do this so that it only applies the back/forward button styling when those buttons are placed on the tab bar:

#TabsToolbar #back-button {
	border-radius: 10000px !important;
	margin-top: -10px !important;
	margin-bottom: 5px !important;
	width: 30px !important;
	height: 30px !important;
	position: relative !important; 
	z-index: 1 !important;
	border: none !important;
	background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%, rgba(231,232,233,.45) 51%, rgba(225,226,229,.2)) !important;
	box-shadow: 0 0 0 3px rgba(255,255,255,.3) inset, 0 0 0 2px rgba(255,255,255,.1) inset, 0 0 0 1px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3), 1px 2px 1px rgba(0,0,0,.2) !important;
}
#TabsToolbar #forward-button {
	border-radius: 0 5px 5px 0 !important;
	padding-left: 7px !important;
	padding-right: 3px !important;
	margin-top: -5px !important;
	margin-bottom: 10px !important;
 	width: auto !important;
 	height: auto !important;
	border: none !important;
 	-moz-margin-start: -5px !important;
	background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%, rgba(231,232,233,.45) 51%, rgba(225,226,229,.2)) !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 0 2px rgba(255,255,255,.1) inset, 0 0 0 1px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3), 1px 2px 1px rgba(0,0,0,.2) !important;
	mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask) !important;
}

Perfect!

Thanks again!

About the clipping:

Direct10 enable, d2d etc. Same version as yours. In a clean profile, same issue.

When I come back from ALT Key, the clippling occurs. I need hover mouse on title or tabbar to force redraw.

Community Regular

foxxyn8

Posted
Posted

Perfect!

Thanks again!

About the clipping:

Direct10 enable, d2d etc. Same version as yours. In a clean profile, same issue.

When I come back from ALT Key, the clippling occurs. I need hover mouse on title or tabbar to force redraw.

I tested it again. You're right about the clipping. I'm not sure how to go about fixing it though.

Community Regular

foxxyn8

Posted
Posted

Does anyone know the IDs for the two Panorama buttons? The close and search buttons on the right to be exact.

I can't find anything from Panorama in DOM Inspector for some reason:

29ofsc9.jpg

#exit-button is the close button

#actions is the outside of the search button

#actions #searchbutton is the inside of the search button (the part with the image)

Panorama is here: chrome://browser/content/tabview.html

Contributor

Drifus

Posted
Posted

In order to avoid spamming here with long long threads I posted/updated the code on the userstyles.org.

Thus, any change will do directly there and post here the screenshot and link.

For now:

Explorer

dert07

Posted
Posted

@foxxyn8 Hey, thank you so much for the IDs and the tabview.html!

- - -

I played a bit with the buttons and searchbox and here's what I came up with so far:

2lk775x.jpg

I removed the exit-button for now since it's just an image at the moment and therefore can't be changed using CSS, at least I don't know how it could be done. You can always use the Escape key to get out of Panorama.

The style is quite simple so feel free to edit it to your liking:

@-moz-document url("chrome://browser/content/tabview.html") {
 #bg {
  display: none;
 }

 #exit-button {
  display: none;
 }

 #actions {
  opacity: 1 !important;
  background: -moz-linear-gradient(top,rgb(245,183,93) 0%,rgb(220,115,35) 100%) !important;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(0,0,0,.5) inset !important;
  margin-top: -97px;
  margin-right: 4px;
 }

 #actions:hover {
  background: -moz-linear-gradient(top,rgb(245,183,93) 0%,rgb(234,140,55) 100%) !important;
 }

 #actions #searchbutton {
  opacity: 1 !important;
 }

 #searchbox {
  background: rgba(255,255,255,.8) !important;
  color: #000 !important;
 }
}

If you want to edit the dark overlay while searching you could use something like this:

#search {
 background-color: [color] !important;
}

I think the default looks pretty good so I didn't put it in the main style.

Have fun!

Community Regular

foxxyn8

Posted
Posted

@foxxyn8 Hey, thank you so much for the IDs and the tabview.html!

- - -

I removed the exit-button for now since it's just an image at the moment and therefore can't be changed using CSS, at least I don't know how it could be done. You can always use the Escape key to get out of Panorama.

You can style the exit button:

#exit-button {
  background-color: orange !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(0,0,0,.5) inset !important;
  border-radius: 4px !important;
  margin-right: 4px !important;
}

Explorer

dert07

Posted
Posted

You can style the exit button:

#exit-button {
  background-color: orange !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(0,0,0,.5) inset !important;
  border-radius: 4px !important;
  margin-right: 4px !important;
}

Wow, thank you again!^^ I only tried it with background instead of background-color. I used background-image though to get the gradient but had to create a Panorama icon in white myself.

- - -

So, I think it looks pretty good now. I uploaded it to userstyles.org since the style is a bit long because of the base64 images: http://userstyles.org/styles/37944?r=1286567046

post-309006-12865674827954.jpg

Community Regular

foxxyn8

Posted
Posted

Looks good. Nice job! :yes:

FYI : "background:" is CSS shorthand. It allows you to specify all background properties with one property. It's usage is:

background: background-color | background-image | background-repeat | background-attachment | background-position;

Collaborator

Deo Domuique

Posted
Posted

Drifus... Bro! LoL! I don't deserve at all man to place my name in your Script's page... I don't have a clue about scripts... I just suggested one thing... LoL!

Guys, the Progress line will be history in a while... Mozilla will place only a Throbber inside the tab. There where the favicon is... Progress line spending 30% more resources and many other are the reasons!...

So, get ready! :p By the way, I like the progress line... But certainly I prefer a more resources-free FireFox!

Contributor

Drifus

Posted
Posted

Drifus... Bro! LoL! I don't deserve at all man to place my name in your Script's page... I don't have a clue about scripts... I just suggested one thing... LoL!

Guys, the Progress line will be history in a while... Mozilla will place only a Throbber inside the tab. There where the favicon is... Progress line spending 30% more resources and many other are the reasons!...

So, get ready! :p By the way, I like the progress line... But certainly I prefer a more resources-free FireFox!

Deo, you gave me a good suggestion... square urs bars and search. I'm using them. :yes:

About progress bar: maybe a matter of habit, but I prefer the throbber style.

Explorer

dert07

Posted
Posted

Nice style dert07. Just edited a custom version of my own inspired by yours. I have a question: how can I disable the "minimize/maximize/close" buttons in panorama, I mean the titlebar bar altogether ?

You can hide the Titlebar:

#titlebar {
 visibility: hidden;
}

Although the min/max/close buttons don't hide then. They have IDs, too but I can't get them to hide. You also would have to somehow check if Panorama is active and then hide it, maybe someone else knows how to do that.

can anyone help me with this problem? why my status bar is at the left side?

What Stylish styles do you use?

- - -

I did another version of the Exit and Search buttons from Panorama and also slightly edited the Exit icon with a small X to indicate the resulting close. What do you guys think, which one looks better?

2mep9gg.jpg

Mentor

lordtinuviel

Posted
Posted (edited)

You can hide the Titlebar:

#titlebar {
 visibility: hidden;
}

Although the min/max/close buttons don't hide then. They have IDs, too but I can't get them to hide. You also would have to somehow check if Panorama is active and then hide it, maybe someone else knows how to do that.

What Stylish styles do you use?

- - -

This one:

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

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

and if I use this style http://userstyles.org/styles/37366 the bar totally dissapear

Community Regular

foxxyn8

Posted
Posted

and if I use this style http://userstyles.org/styles/37366 the bar totally dissapear

You can't hide the caption buttons in Aero because they're supplied by Windows DWM. The caption button IDs dert07 spoke of are the Fx supplied caption buttons. They are disabled if Aero is in use.

Concerning the statusbar: Are you using the Status-4-Eva addon?

Mentor

lordtinuviel

Posted
Posted

You can't hide the caption buttons in Aero because they're supplied by Windows DWM. The caption button IDs dert07 spoke of are the Fx supplied caption buttons. They are disabled if Aero is in use.

Concerning the statusbar: Are you using the Status-4-Eva addon?

nop, using FF 4.6

Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

You can't hide the caption buttons in Aero because they're supplied by Windows DWM. The caption button IDs dert07 spoke of are the Fx supplied caption buttons. They are disabled if Aero is in use.

Concerning the statusbar: Are you using the Status-4-Eva addon?

I do and I have it shown on hover and it does work. I only have Yahoo mail notifier in it though.

Community Regular

foxxyn8

Posted
Posted

I do and I have it shown on hover and it does work. I only have Yahoo mail notifier in it though.

I know it works. I had only asked because one of the earlier versions of that add-on had moved the status bar over to the left on my system. The OP's problem was caused by trying to use Minefield scripts in Firefox b6. You can't style the add-on bar if there is no add-on bar.

Collaborator

Excelsis

Posted
Posted

I found this code

#urlbar hbox[anonid="textbox-input-box"]
{
   -moz-box-ordinal-group: 2;
}

#urlbar hbox[anonid="textbox-input-box"] + hbox
{
   margin-left: 3px;
}

#urlbar-icons
{
   padding: 0px !important;
}

To put the Bookmark Star on the left of the address bar but there's one problem, when I hover over a link, the star dissapears, anyway to fix this?

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

  • Recently Browsing   0 members

    • No registered users viewing this page.