Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Collaborator

vasa1

Posted
Posted

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}

}

Apprentice

Poom

Posted
Posted

Hi, this is my current layout.

W5CGf.png

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.

Apprentice

Poom

Posted
Posted

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!

Community Regular

foxxyn8

Posted
Posted

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

Apprentice

Poom

Posted
Posted

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?

Community Regular

foxxyn8

Posted
Posted

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

Neowinian

Crixler

Posted
Posted

Distancestabbarffstuff.png

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.

Neowinian

Crixler

Posted
Posted

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?

Apprentice

Poom

Posted
Posted

Thank you so much foxxyn8!! Those work great!

I have only two tiny details left now.

nITW8.png

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?

CLGPj.png

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!

Apprentice

Poom

Posted
Posted

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!

Collaborator

vasa1

Posted
Posted

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

Rookie

luving

Posted
Posted

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.

5643609595_ba1c6e5041_o.png

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

Community Regular

foxxyn8

Posted
Posted

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?

Collaborator

vasa1

Posted
Posted

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.

Apprentice

Poom

Posted
Posted

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.

unled1uqs.png

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.

Grand Master

Ji@nBing

Posted
Posted

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.

unled1zc.png

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

  • Recently Browsing   0 members

    • No registered users viewing this page.