Share your custom Firefox/Minefield 4 stylish scripts

[Semtex]

@ foxxyn8

Thank You very much, working perfect!!

[vasa1]

I wanted to change the appearance of the window (Browser Preferences) that comes up on Alt, Tools, Options in Firefox to make it darker (and minimal).

This is what I came up with using Aurora on WinXP SP3.

I relied quite a bit on this style (http://userstyles.org/styles/42333/firefox-4-options-in-content-style-horizontal) as a starting point.

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

* {text-shadow: none !important}

*[disabled = "true"] {color:#555!important; font-weight: bold!important}

tooltip { -moz-appearance: none !important; color: #666611 !important; background-color: black !important; font-size: 15px !important; border: 2px solid #666633 !important; -moz-border-radius: 3px !important}

menupopup, popup { background-color: grey !important; border: 3px solid #666611 !important; -moz-border-radius: 6px !important}

button, menulist 
{ -moz-appearance: none !important; background: -moz-linear-gradient(top, #454545, #252525)!important; border-radius: 3px !important; color: orange !important; font-weight: bold !important; border: 2px solid #777 !important}


@-moz-document url("chrome://browser/content/preferences/preferences.xul") {

#BrowserPreferences { background-color: #444 !important}

.paneSelector { border: 0 !important; background: transparent !important}

.paneDeckContainer { background-color: #444 !important}

#paneMain, #paneTabs, #paneContent, #paneApplications, #panePrivacy, #paneSecurity, #paneSync, #paneAdvanced {background: #444 !important}

groupbox { -moz-appearance: none !important; background: #555 !important; border: none !important; box-shadow: none !important}

.groupbox-body { -moz-appearance: none !important; background: #555 !important; border: none !important; box-shadow: none !important}

.caption-text, .text-link { color: maroon !important; font-weight: bold !important}

.caption-text { font-size: 120% !important; margin-bottom: 2em !important}

caption { -moz-appearance: none !important; background: none !important; margin-bottom: -2em !important}

.menulist-label-box { border: 1px solid transparent !important; background: #444 !important}

.menulist-label-box > .menulist-label { color: #888 !important; font-weight: bold !important}

menulist[open] .menulist-label-box > .menulist-label { color: pink !important}

.menulist-dropmarker { -moz-appearance: none !important; border: 0 !important; background: #777!important; padding: 0 !important}

menulist[open] .menulist-dropmarker { list-style-image: url(chrome://browser/skin/appmenu-dropmarker.png) !important}

/* Textboxes */
filefield { -moz-appearance: none !important; border: 0 !important; margin: 3px 4px !important}

filefield .fileFieldContentBox, textbox:not(.fileFieldLabel) { -moz-appearance: none !important; border-radius: 2px !important; border: 1px solid #222 !important; background-color: #555 !important}

/*Richlistbox/item */
richlistitem { max-height: 35px !important; min-height: 35px !important}
richlistitem .actionsMenu { -moz-margin-end:15px !important}
#handlersView .box-inherit.scrollbox-innerbox { padding-bottom: 2px !important}

/* Tabs */
#tabsElement tab { -moz-appearance: none !important; -moz-transition: none !important; background: #444 !important; color: #777 !important; font-weight: bold !important; border: none !important}

#tabsElement tab[selected="true"] { -moz-appearance: none !important; -moz-transition: none !important; color: orange!important; border: none !important; margin: 0 0 0 0 !important; border-bottom: 0 !important; padding: 0 7px 0 7px !important}

#tabsElement { -moz-appearance: none !important; border-bottom: 1px solid #444 !important; background: none !important; padding: 0 3px !important}

tabpanels { -moz-appearance: none !important; border: none !important; background: #444 !important}
.tabs-right { border: 0 !important}

/* SpinButtons*/
spinbuttons { -moz-appearance: spinner; cursor: default}

.spinbuttons-button { min-width: 13px; min-height: 11px; margin: 0 !important; border: none !important; background: none !important}

.spinbuttons-button > .button-box { border: 0}

.spinbuttons-up { list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAIAAACepSOSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAZ0lEQVR4nI2NIQ4EIQwAOVFDeEUtSPgCpp9F8xdIKvoDEnrFrNlLLqt25IwY596QUmqtxRifoZQy59x7jzFyzrcFACISETM755iZiBARADhEZGZV/f5QVWZGxI/3vtYaQvhfrLV67xcIJTc0rm8x5wAAAABJRU5ErkJggg==) !important}

.spinbuttons-down { list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAIAAACepSOSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAYklEQVR4nG3MMQrAIAxA0XQUvEN2cc0NzHW9gFdJxtxAMI1Lp9JS+tYP/0gpMXPOGV7mnGMMQEQRcffz5u4igogAAMxsZhGx944IM2utPRMiUtW1lqoSEXzUWnvvpZRv+HUBquQ2s8aPQ64AAAAASUVORK5CYII=) !important}

}

[Poom]

Hi, this is my current layout.

Would someone please help me with some issues I've been trying to fix (via stylish scripts)? I have pointed to the areas I want help with along with numbers corresponding to the list below.

1. How can I change inactive tab so that it's glassy and translucent like an old firefox 4 mockup here http://tungule.files...me-windows.jpg? I only want the translucent background though, not the round corners and other stuff.

2. I'm currently using this for my navigation ba

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

I like that there's some transparency in the navbar. However, this does not match the current tab and there's a noticeble line dividing the different colors/transperencies. How can I change the active tab so that it'll have the same look as my navbar?

3. There's quite some space between the tabgroup button and the minimize button. This is even more noticeable when you maximize the window. How can I get rid of some of the blank space?

4. I removed the dropdown in the URL bar using this code.

#appmenuSecondaryPane { box-shadow: none !important; }

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

#star-button { -moz-box-ordinal-group: 2 !important; }

Now, the bookmark star is too close to the refresh button. How can I create some blank space?

5. How can I change this corner to be sharp? (i.e. rectangular corner instead of rounded corner) Same for the corresponding corner for the right side...

6. The window frame is significantly thicker for Firefox than for other windows applications like notepad etc. Is it possible to reduce the thickness of the window frame to be like other windows applications?

7. Also, I found a way to remove the tab close button on inactive tabs unless you hover on them. I can't seem to find it anymore...

I'm sorry if some of these have been addressed. I already tried searching this thread but perhaps it's hard for me to think of good search queries. Any help will be very appreciated! Thanks in advance!

Also, sorry for duplicate post in the other thread (which is mainly for showing browser layout not for discussing stylish scripts). I posted in the wrong one by accident and can't delete it anymore.. Hopefully a mod will kindly delete it for me.

[trag3dy]

@Poom: you should check out the Stratiform addon, I think it does a lot of the things you are after.

Get it here:

https://addons.mozilla.org/en-US/firefox/addon/stratiform/

[Poom]

Thanks trag3dy.

I've actually fixed the tab background gradients to fit what I want though so I don't think I'll need stratiform for the tab transparency stuff anymore?

So now I have 3-7 left that I want to fix. Any help will be greatly appreciated!

[foxxyn8]

Thanks trag3dy.

I've actually fixed the tab background gradients to fit what I want though so I don't think I'll need stratiform for the tab transparency stuff anymore?

So now I have 3-7 left that I want to fix. Any help will be greatly appreciated!

4.

#star-button { -moz-box-ordinal-group: 2 !important; margin-right: 2px !important;}

5.

#nav-bar {border-radius: 0 !important}

7. This will hide the close button on inactive tabs until you hover the tab, not sure if that's what you were wanting:

.tabbrowser-tab:not([selected="true"]) .tab-close-button {
visibility: hidden !important;}

.tabbrowser-tab:not([selected="true"]):hover .tab-close-button {
visibility: visible !important;}

[Poom]

Wow thank! Those work great!

The tab close button does not appear even on hover when you have a lot of tabs open because that's how Firefox operates by default. I guess it's not possible to make it appear on hover because the UI element is probably not even there?

I found out how to remove some space between the tab groups button and the minimized button when the window is not maximized by editting the -moz-padding-end as below.

#main-window[sizemode=normal] #navigator-toolbox[tabsontop] > #toolbar-menubar[autohide] ~ #TabsToolbar {
-moz-padding-start:0px!important;
-moz-padding-end:103px!important;
}

But I can't do it when it's maximized. Does anyone know how?

[foxxyn8]

Wow thank! Those work great!

The tab close button does not appear even on hover when you have a lot of tabs open because that's how Firefox operates by default. I guess it's not possible to make it appear on hover because the UI element is probably not even there?

ok, try this instead:

.tabbrowser-tab:not([selected="true"]) .tab-close-button {
visibility: hidden !important;}

.tabbrowser-tab:not([selected="true"]):hover .tab-close-button {
visibility: visible !important;
display: -moz-box !important;}

and for the tab groups button try this:

#TabsToolbar > .titlebar-placeholder:last-child { 
    margin-left: 8px !important; 
}

[Crixler]

How can I get the gap between the FF button and my first tab to be the same as the distances on the FF button's other 2 edges?

Edit: That tiny gap above the tabs bothers me as well. I kinda want it either gone, or being the same distance as the other gaps.

[Crixler]

Are we only able to edit a post a limited number of times? I don't see the edit button on my last post anymore.

Anyway, does anyone know of a way to make it so when you use an image in the progress bar of status-4-evar, it stretches the image instead of tiling it?

[Poom]

Thank you so much foxxyn8!! Those work great!

I have only two tiny details left now.

This is when it's maximized. How can I get rid of the space on the left? Also, can I get rid of the 1 pixel above the tabs as well?

The borders of the tab and the navbar seem inconsistent. How do I make them consistent, especially that one pixel between the tab and the navbar that's much darker than the rest? I have not done anything to any of the borders. Relevant codes would include:

.tabbrowser-tab[selected] {
background-image: -moz-linear-gradient(rgba(242,246,251,.5), rgba(231,237,246,1)) !important;
}

.tabbrowser-tab:not([selected]){
background-image: -moz-linear-gradient(rgba(242,246,251,.1), rgba(231,237,246,.2)) !important;
}

.tabbrowser-tab:not([selected]):hover{
background-image: -moz-linear-gradient(rgba(242,246,251,.4), rgba(231,237,246,.55)) !important;
}

.tabs-newtab-button {
background-image: -moz-linear-gradient(rgba(242,246,251,.1), rgba(231,237,246,.2)) !important;
}

.tabs-newtab-button:hover{
background-image: -moz-linear-gradient(rgba(242,246,251,.4), rgba(231,237,246,.55)) !important;
}

and

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

Oh, also, can I make the tab close button actually gone altogether instead of just hidden? The difference would be that the name of the webpage can extend and occupy where the tab close button was, instead of having a blank space there.

Thank you so much in advance. I really appreciate your kind help!

[Samurizer]

Compared to Fx4, Fx5 doesn't have "shadows" beneath toolbar buttons, which makes them look crisper IMO.

Does anyone know how to get rid of those shadows in Fx4? Thanks in advance.

[parry]

Compared to Fx4, Fx5 doesn't have "shadows" beneath toolbar buttons, which makes them look crisper IMO.

Does anyone know how to get rid of those shadows in Fx4? Thanks in advance.

I think this is what your looking for?

[Samurizer]

I think this is what your looking for?

Nearly. I don't want to change the buttons in any way EXCEPT remove the shadow. Thanks very much though.

[Poom]

Nearly. I don't want to change the buttons in any way EXCEPT remove the shadow. Thanks very much though.

Try importing the code and retain only the no-shadow section (remove everything else)?

[Poom]

Sorry for double post. This editing time limit thing is really unnecessary I think...

I've managed to fix some of the things I asked on my own. :)

Removing the 1 pixel padding above tabs when maximized:

#main-window[sizemode="maximized"] #titlebar  {
  margin-bottom: -23px !important;
}

Make the tab title actually occupying the old space of where the tab close button was:

.tabbrowser-tab:not([selected="true"]) .tab-close-button {
display: none !important;
}

The difference is that I used "display: none" instead of "visibility: hidden"

I'm still looking for ways to remove the left padding of tabs when maximized and to fix the tab border not being consistent with the navbar border. Any help would be gladly appreciated. Thanks!

[parry]

How would I change just the colour of the identity box on a secure site, I want the default button style but in a different colour.

[vasa1]

Any idea how to darken the page that we get when we click on a cache item?

url(about:cache) catches what we get when we type about:cache

url(about:cache?device=disk) works for the next part.

But I don't know how to get the page that will show individual cache items to work. For example, about:cache-entry?client=HTTP&sb=1&key=https://www.neowin.net/forum/public/style_extra/post_icons/icon6.gif

This is what I have for now:

@-moz-document 
url(about:about), 
url(about:blank), 
url(about:), 
url(about:cache), 
url(about:cache?device=disk), 
url-prefix(about:neterror), 
url-prefix(about:neterror?e=netTimeout), 
url-prefix(about:certerror) 
{ 
  html 
         { background-color: black !important;
         } 
}

[luving]

Any chance of getting the firefox 4.0 buttons back in the latest nightlys? They reduced the drop shadows and rounded corners :(

I've been digging through the firefox 4.0 code but couldn't quite figure it out without messing up everything.

I really hope someone can help me out here. Thanks in advance :)

[foxxyn8]

Any idea how to darken the page that we get when we click on a cache item?

url(about:cache) catches what we get when we type about:cache

url(about:cache?device=disk) works for the next part.

But I don't know how to get the page that will show individual cache items to work. For example, about:cache-entry?client=HTTP&sb=1&key=https://www.neowin.net/forum/public/style_extra/post_icons/icon6.gif

url-prefix(about:cache) isn't working for that purpose?

[vasa1]

url-prefix(about:cache) isn't working for that purpose?

Not only does it work :) , but I then don't need the other two entries. This url-prefix trick is quite neat. Staring at the DOM Inspector screen for ages didn't help!

In edit:

I guess that both these aren't needed either:

url-prefix(about:neterror)

url-prefix(about:neterror?e=netTimeout)

Just the first should do. Let's see. I commented out the second for now.

[Ji@nBing]

How can I align the tab bar with the address bar both maximized and minimized? I'm sure it's already been posted, but I can't find it.

[Poom]

How can I align the tab bar with the address bar both maximized and minimized? I'm sure it's already been posted, but I can't find it.

Normal Window:

#main-window[sizemode=normal] #navigator-toolbox[tabsontop] > #toolbar-menubar[autohide] ~ #TabsToolbar {
-moz-padding-start:0px!important;
}

Maximized Window:

#TabsToolbar > .titlebar-placeholder { 
    margin-left: 0px !important; 
}

Hope that helps.

[trag3dy]

You could try this, but you'll have to adjust the margin to fit probably:

edit: beatin to it

[Ji@nBing]

Normal Window:

#main-window[sizemode=normal] #navigator-toolbox[tabsontop] > #toolbar-menubar[autohide] ~ #TabsToolbar {
-moz-padding-start:0px!important;
}

Maximized Window:

#TabsToolbar > .titlebar-placeholder { 
    margin-left: 0px !important; 
}

Hope that helps.

Thanks. The normal window worked, but I'm still 1 pixel off on the maximized. I tried adjusting the number in the script and nothing happened no matter what number I put.