Jump to content



Photo

Share your custom Firefox/Minefield 4 stylish scripts


  • Please log in to reply
2391 replies to this topic

#1 Steven P.

Steven P.

    aka Neobond

  • Tech Issues Solved: 64
  • Joined: 09-July 01
  • Location: Neowin HQ

Posted 18 July 2010 - 09:08

Apologies to bogas04 but I thought it would be cool to have a thread where customizations were shared, for reference, as well as the Firefox 4 Beta 1 thread.

Here's mine (Firefox 4, Beta 1)

ff4b1.png

Blue Button & Home Button

#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: 0px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}
#TabsToolbar > #home-button {
-moz-appearance: none !important;
background: transparent -moz-linear-gradient(left center , transparent, transparent 1px, rgba(128, 128, 128, 0.1) 1px, rgba(128, 128, 128, 0.1)) repeat scroll -6px 0 !important;
background-clip: border-box !important;
background-origin: padding-box !important;
background-size: 200% auto !important;
margin: 0 !important;
padding: 0 1px !important;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 3 5 3 6 / 3px 5px 3px 6px !important;
-moz-border-radius: 6px 4px 0 0 !important;
margin-left: 3px !important;
}
#TabsToolbar > #home-button:hover {
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.4)) !important;
}
#TabsToolbar > #home-button > .toolbarbutton-icon
{
margin-top: -1px !important;
margin-bottom: -1px !important;
}

Blue Toolbar (was Aqua Vista Toolbar)

@namespace url(http://www.mozilla.o...ere.is.only.xul);

#main-window #navigator-toolbox #PersonalToolbar
{
border-top: 0 none !important;
-moz-appearance: none !important;
/* Thanks to Carl Booth for the aqua image - public domain license I assume */
background-image: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
padding: 1px 3px 0px 3px !important;
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton
{
padding: 0 5px !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton > label
{
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar > toolbaritem > menubar > menu
{
padding-top: 2px;
margin-bottom: 1px !important;
}

#main-window #navigator-toolbox #PersonalToolbar > toolbaritem > menubar > menu > label
{
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar .toolbarbutton-menu-dropmarker
{
margin-left: 5px;
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjMwQIRHEAAAAHpJREFUKFNjYCABMAPVcgKxEBBLArEMEgbxQeIgeQa2/3gAUF4fiMVACkGqlbCpBYpXAbEfSB5sItQqD2TFQLENQNwIxB5QeQaQG/mhViSCFAPZq4B4MhAnQsVB8mCArDgQyE8BYhANch9IEUgeDmCK5YEiGkAMouGKAOOdSG/rm13TAAAAAElFTkSuQmCC) !important;
}

Tabs in Titlebar (with inactive tab text tweak, and window controls clearance tweak)

@namespace url(http://www.mozilla.o...ere.is.only.xul);

#appmenu-button-container{
position: fixed !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 95px !important;
}
#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Firefox" !important;
}
#appmenu-button{
padding: 1px 10px 3px 9px !important;
height: 22px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 90px !important;
padding-top:3px !important;
}
#main-window #navigator-toolbox[tabsontop="true"] #TabsToolbar
{
margin-right: 92px !important;
}
tab:not([selected="true"])
{
color: white !important;
}

Some of my scripts were modified, so if there are errors, fixes appreciated, except for the toolbar stylish script, all customizations were found in the original Firefox Beta 1 thread (Y) :p


#2 +SoapyHamHocks

SoapyHamHocks

    Neowinian Senior

  • Joined: 06-March 04

Posted 19 July 2010 - 02:53

Use this so the Firefox button is closer to the edge of the window frame.

#main-window {
  margin-top: 1px !important;
}


#3 +Brando212

Brando212

    Neowinian Senior

  • Tech Issues Solved: 11
  • Joined: 15-April 10
  • Location: Omaha, NE
  • OS: OS X Mavricks, Windows 7/8.1 Pro
  • Phone: Sony Xperia ZL, Nokia Lumia 925

Posted 19 July 2010 - 03:00

how do i make it so tabs are only in the title bar when maximized?

Spoiler
:p

#4 Unrealistic

Unrealistic

    Laughter is all we have.

  • Tech Issues Solved: 1
  • Joined: 11-January 09

Posted 19 July 2010 - 03:09

Hide that retarded "Bookmarks" button on the Bookmark Toolbar.

/*Hides bookmarks button, bug scheduled to be fixed in later releases*/
#bookmarks-menu-button {display: none;}



#5 Inklin

Inklin

    Neowinian Senior

  • Joined: 11-April 08
  • Location: Kent, UK
  • OS: Windows 8.1 Pro

Posted 19 July 2010 - 03:15

Here is mine (originally posted in other thread but many many pages back now)
This is not all my work, so thank you to other users who have been working on these scripts.

Untitled-1.jpg

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

#appmenu-button-container{
position: fixed !important;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 95px !important;
}


#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 78px !important;
padding-top:1px !important;
padding-right:107px !important;
}


#appmenu-button{
padding: 3px 14px 3px 14px !important;
margin-top:3px !important;
}

#appmenu-button
{
background-color: rgba(54, 121, 166, 0.2) !important;
}

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


Glassy Nav/bookmarks bar
/*:::::::::::::::::::::::::::::::::::::::Do Not Remove This Line::::::::::::::::::::::::::::::::::::::: */

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

#navigator-toolbox:not([tabsontop=true]) #nav-bar
{
-moz-box-shadow: threedshadow 0 -1px inset !important;
padding-bottom: 7px !important;
}

#navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245, 0.5) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

#navigator-toolbox:not([tabsontop=true]) #PersonalToolbar
{
background: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)) !important;
}

#navigator-toolbox:not([tabsontop="true"]) #TabsToolbar
{
padding-top: 2px !important;
}

#navigator-toolbox[tabsontop=true]
{
border-bottom: 1px solid threedshadow !important;
}

#navigator-toolbox[tabsontop=true] #TabsToolbar
{
-moz-box-shadow: inset threedshadow 0px -1px !important;
}

#navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,.3) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

#navigator-toolbox[tabsontop=true] #nav-bar
{
padding-top: 0px !important;
padding-bottom: 1px !important;
background: -moz-linear-gradient(top, rgba(242,246,251,1), rgba(255,255,255,0)) !important;
}

.tabbrowser-tab[selected=true]
{
font-weight: bold !important;
}

Only works with tabs on top, placing tabs on bottom places the nav bar in the title bar rendering the nav bar over the top of the menu button and window toggles.

this works with small buttons only but to make it look good with the default large button option change:
#navigator-toolbox[tabsontop=true] #nav-bar
{
padding-top: 0px !important;
padding-bottom: 1px !important;
background: -moz-linear-gradient(top, rgba(242,246,251,1), rgba(255,255,255,0)) !important;
}

to:
#navigator-toolbox[tabsontop=true] #nav-bar
{
padding-top: 5px !important;
padding-bottom: 5px !important;
background: -moz-linear-gradient(top, rgba(242,246,251,1), rgba(255,255,255,0)) !important;
}

Note: You may need to make some adjustments depending on the windows theme you are using.

#6 +SoapyHamHocks

SoapyHamHocks

    Neowinian Senior

  • Joined: 06-March 04

Posted 19 July 2010 - 03:18

how do i make it so tabs are only in the title bar when maximized?

Spoiler
:p


This should do it, you might have to change some values if you use any custom styles for the Firefox button.

#main-window[sizemode="maximized"] #appmenu-button-container {
  position: fixed !important;
}

#main-window[sizemode="maximized"] #TabsToolbar {
  padding: 0 110px 0 110px !important;
}


#7 Darrian

Darrian

    The Apathetic

  • Tech Issues Solved: 1
  • Joined: 22-October 01

Posted 19 July 2010 - 03:38

20100728minefield.png

Menu Buttons (adjust margin-top to fit your Firefox version and/or Windows theme)
Red
#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(251,89,65,1), rgba(189,40,25,1), rgba(157,6,0 ,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: -1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(251,89,65,1), rgba(251,55,65,1)) !important;
}

Green
#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(112,178,66,1), rgba(0,147,14,1), rgba(77,154,6,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: -1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(112,178,66,1), rgba(82,178,14,1)) !important;
}

Blue
#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: -1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}

Tabs in Titlebar
#appmenu-button-container{
position: fixed !important;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 82px !important;
padding-top:1px !important;
}

Toolbar transparency (may want to change padding-top to 2 or 3 pixels if using large buttons)
#navigator-toolbox:not([tabsontop=true]) #nav-bar
{
-moz-box-shadow: threedshadow 0 -1px inset !important;
padding-bottom: 7px !important;
}

#navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,1) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

#navigator-toolbox:not([tabsontop=true]) #PersonalToolbar
{
background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)) !important;
}

#navigator-toolbox:not([tabsontop="true"]) #TabsToolbar
{
padding-top: 2px !important;
}

#navigator-toolbox[tabsontop=true]
{
border-bottom: 1px solid threedshadow !important;
}

#navigator-toolbox[tabsontop=true] #TabsToolbar
{
-moz-box-shadow: inset threedshadow 0px -1px !important;
}

#navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,.6) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

#navigator-toolbox[tabsontop=true] #nav-bar
{
padding-top: 1px !important;
padding-bottom: 0px !important;
background: -moz-linear-gradient(top, rgba(242,246,251,1), rgba(255,255,255,.0)) !important;
}

.tabbrowser-tab[selected=true]
{
font-weight: bold !important;
}

Remove RSS from address bar
/* Remove live feed icon in Address url toolbar */

#feed-button 
{
  display: none !important;
}

Hide bookmarks "star" button from address bar
toolbar #star-button{
display:none !important;
}

Remove back button dropmarker
#back-forward-dropmarker { display: none !important; }

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

Or, alternatively, hide bookmark labels in bookmarks toolbar (probably shouldn't be used in conjunction with hiding favicons)
@-moz-document url-prefix('chrome://') {
toolbarbutton.bookmark-item > label[class="toolbarbutton-text"]:not([value="Linux"]),
toolbarbutton.bookmark-item .toolbarbutton-menu-dropmarker { display: none !important; }
}

Fix tab overlap when tabs on top
#main-window #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 105px !important;
}

#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 105px !important;
}

Combine stop/reload buttons
#stop-button[disabled="true"] { display:none; } 
#stop-button:not([disabled]) + #reload-button { display:none; }

Home button as app tab (if you're using nightlies, not recommended for beta 1)
#TabsToolbar > #home-button {
-moz-appearance: none !important;
background: transparent -moz-linear-gradient(left center , transparent, transparent 1px, rgba(128, 128, 128, 0.1) 1px, rgba(128, 128, 128, 0.1)) repeat scroll -6px 0 !important;
background-clip: border-box !important;
background-origin: padding-box !important;
background-size: 200% auto !important;
margin: 0 !important;
padding: 0 1px !important;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 3 5 3 6 / 3px 5px 3px 6px !important;
-moz-border-radius: 6px 4px 0 0 !important;
margin-left: 3px !important;
}

#TabsToolbar > #home-button:hover {
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.4)) !important;
}

#TabsToolbar > #home-button > .toolbarbutton-icon {
margin-top: -1px !important;
margin-bottom: -1px !important;
}

Whew, I think I got all of them. Some of them are really old, but maybe people will find it convenient that I reposted them instead of making them search for them.

Much thanks to Unrealistic for posting the hide bookmarks button; I've been waiting forever for somebody to share that. I won't repost that script here since it's only a few posts back.

#8 Unrealistic

Unrealistic

    Laughter is all we have.

  • Tech Issues Solved: 1
  • Joined: 11-January 09

Posted 19 July 2010 - 03:42

Here is mine (originally posted in other thread but many many pages back now)
This is not all my work, so thank you to other users who have been working on these scripts.


Looks great, except the transparency doesn't work as well as I thought it would with the bookmarks toolbar. Text is a bit hard to read.

Not to go off topic, but is there an x-marks build that works with FF 4?

edit:

Darian's transparency works much better. Cheers for that one! :)

#9 Darrian

Darrian

    The Apathetic

  • Tech Issues Solved: 1
  • Joined: 22-October 01

Posted 19 July 2010 - 03:59

They're probably virtually identical scripts; we both probably got them from the Firefox 4 beta 1 thread. I just tweaked the padding and opacity some. With the rgba values there are 4 numbers; the 4th number is opacity with 0 being completely transparent and 1 being completely opaque. Use decimals to get somewhere in between.

#10 Unrealistic

Unrealistic

    Laughter is all we have.

  • Tech Issues Solved: 1
  • Joined: 11-January 09

Posted 19 July 2010 - 04:01

The opacity was what I liked. I didn't know where the opacity setting was, otherwise I would have tweaked his. Regardless, yours works extremely well. The only thing holding me back from using FF 4 Beta 1 as a full fledged browser is getting XMarks to work. I force installed it and it would never let me sign on.

#11 +Brando212

Brando212

    Neowinian Senior

  • Tech Issues Solved: 11
  • Joined: 15-April 10
  • Location: Omaha, NE
  • OS: OS X Mavricks, Windows 7/8.1 Pro
  • Phone: Sony Xperia ZL, Nokia Lumia 925

Posted 19 July 2010 - 04:08

This should do it, you might have to change some values if you use any custom styles for the Firefox button.

#main-window[sizemode="maximized"] #appmenu-button-container {
 position: fixed !important;
}

#main-window[sizemode="maximized"] #TabsToolbar {
 padding: 0 110px 0 110px !important;
}


i give up it keeps screwing up when posting

Edited by Brando212, 19 July 2010 - 04:18.


#12 Darrian

Darrian

    The Apathetic

  • Tech Issues Solved: 1
  • Joined: 22-October 01

Posted 19 July 2010 - 04:08

@Unrealistic: Thanks. I'm pretty happy with it, myself. I just thought if you might have preferred it slightly more or less transparent I'd lead you to where you could fiddle with it.

I'm waiting on XMarks, myself, but it's not holding me back because it's only useful when I travel so for everyday use it's fine for my 1 PC, and when I work on my daughter's laptop I can just copy my entire profile over on my thumb drive :D

#13 +SoapyHamHocks

SoapyHamHocks

    Neowinian Senior

  • Joined: 06-March 04

Posted 19 July 2010 - 04:16

how would i get it to work with this?




Can you re-post that using code tags rather than quote? The formatting got messed up.

#14 +Brando212

Brando212

    Neowinian Senior

  • Tech Issues Solved: 11
  • Joined: 15-April 10
  • Location: Omaha, NE
  • OS: OS X Mavricks, Windows 7/8.1 Pro
  • Phone: Sony Xperia ZL, Nokia Lumia 925

Posted 19 July 2010 - 04:21

how can i combine these two?

#main-window[sizemode="maximized"] #appmenu-button-container {
  position: fixed !important;
}

#main-window[sizemode="maximized"] #TabsToolbar {
  padding: 0 110px 0 110px !important;
}


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

#appmenu-button-container{
position: fixed !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 95px !important;
}
#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Firefox" !important; 
}
#appmenu-button{
padding: 1px 10px 3px 9px !important;
height: 22px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 80px !important;
padding-top:3px !important;
}
#main-window #navigator-toolbox[tabsontop="true"] #TabsToolbar
{
margin-right: 96px !important;
}
tab:not([selected="true"]) 
{
color: white !important;
}

basically i want it like the second script but only to put the tabs on top when maximized

Can you re-post that using code tags rather than quote? The formatting got messed up.


i know, i had to abandon that post and create a new one because the board kept acting up and screwing up the formatting

#15 +SoapyHamHocks

SoapyHamHocks

    Neowinian Senior

  • Joined: 06-March 04

Posted 19 July 2010 - 04:24

how can i combine these two?


i know, i had to abandon that post and create a new one because the board kept acting up and screwing up the formatting



Here you go:
#main-window[sizemode="maximized"] #appmenu-button-container {
  position: fixed !important;
}

#appmenu-button{
 padding: 1px 10px 3px 9px !important;
  height: 22px !important;
}

#appmenu-button .button-text { 
  display:none !important; 
}

#appmenu-button dropmarker:before { 
  content: "Firefox" !important; 
}

#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
  padding: 0 110px 0 80px !important;
}

tab:not([selected="true"]) {
  color: white !important;
}




Click here to login or here to register to remove this ad, it's free!