Share your custom Firefox/Minefield 4 stylish scripts

[Makmende]

I for starters... I just checked in to see if anyone made a script to fix that :rolleyes:

[Steven P. Administrators]

I don't have that problem with my script, use the parts that work for you:

#appmenu-button-container{
margin: 0px 0px 1px 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;
}
#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Firefox" !important; }

Maximized

Window

Someone else who noticed the large gap between the menu button

and tabs?

Maximized

Minimized

Looking at your shots, you'll see the spacing is correct maximized and as a window, there are ways around it tho, like I have done (credit to SoapyHamHocks for his script).

[Makmende]

I don't have that problem with my script, use the parts that work for you:

code

Maximized

Window

Looking at your shots, you'll see the spacing is correct maximized and as a window, there are ways around it tho, like I have done (credit to SoapyHamHocks for his script).

Neobond did you update your minefield to the latest hourly? Your code doesn't fix the "problem".

[Steven P. Administrators]

Yes it's what I'm using now!

[Makmende]

Strange then... i don't know maybe it's because i have set tabs height to 21px.

[Makmende]

#main-window[tabsontop="true"] #toolbar-menubar
{
     margin-top: -6px !important;
}

This fixes the problem for me.

[cga]

Since the latest nightly tabs in titlebar are no longer working for me. I'm using this code:

@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: 90px !important;
padding-top:3px !important;
}
#main-window #navigator-toolbox[tabsontop="true"] #TabsToolbar
{
margin-right: 92px !important;
}
tab:not([selected="true"])
{
color: white !important;
}

[Chasethebase Veteran]

Vajlent, script please. :)

I updated my Addon Manager Userstyle to match mockups:

This script doesn't work correctly, sorry. :(

[SkyDX]

This script doesn't work correctly, sorry. :(

Do you have the Minimal Theme installed? If so you have to disable it.

[Brandon H Supervisor]

Since the latest nightly tabs in titlebar are no longer working for me. I'm using this code:

this happened once before, it should be back to normal again within the next few nightlies

[vajlent]

Vajlent, script please. :)

What script?

[vajlent]

I don't have that problem with my script, use the parts that work for you:

Looking at your shots, you'll see the spacing is correct maximized and as a window, there are ways around it tho, like I have done (credit to SoapyHamHocks for his script).

That code doesn't help or fix anything.

#main-window[tabsontop="true"] #toolbar-menubar
{
 margin-top: -6px !important;
}

This fixes the problem for me.

The code do work in minimized mode but not in maxi!

In maxi the tabs overlaps the menubutton etc.

[Lewkwarm]

Whats the style to hide the Bookmarks Toolbar entry in the bookmark menu? The one I used for FF3 doesn't work here.

[SkyDX]

Anyone can tell me what I need to write in a Stylish Script so it affects TabCandy mode? I want to alter it but I don't know the identifier.

[+Gary7 Subscriber²]

Hi, I would like to have the Firefox button even with the Navigational bar and have the entire button moved to the right so that the gap is gone between it and the first tab. Any help would be appreciated.

[SkyDX]

Anyone can tell me how to add a border next to the website part of Firefox/Minefield?

#main-window {
border-left: 1px solid !important;
border-right: 1px solid !important;
color: rgba(0,0,0,0.5) !important;
}

My code works just the lines extend to the close button of the window which is too far.

EDIT: Got it :laugh:

#main-window #browser

{
border-left: 1px solid !important;
border-right: 1px solid !important;
color: rgba(0,0,0,0.5) !important;
}

[+Gary7 Subscriber²]

Hi, I would like to have the Firefox button even with the Navigational bar and have the entire button moved to the right so that the gap is gone between it and the first tab. Any help would be appreciated.

No one Knows???

[Darrian]

Look at your script(s) and mess with the margin values. Be sure to preview each change instead of save so you can undo any catastrophe.

[+Gary7 Subscriber²]

Look at your script(s) and mess with the margin values. Be sure to preview each change instead of save so you can undo any catastrophe.

Thanks but I can't review them as I do not use stylish. I will just have to change the margins on the hovered and not hovered button and close and reopen Fx every time. It is not that bad so I may just leave it alone. Thanks for the reply!

[Kyang]

Thanks but I can't review them as I do not use stylish. I will just have to change the margins on the hovered and not hovered button and close and reopen Fx every time. It is not that bad so I may just leave it alone. Thanks for the reply!

If you really don't want to keep stylish installed and are avoided that for whatever reason, at least consider leaving it installed only until you get your theme worked out, then ditch it after you copy your finished masterpiece to your userchrome.css

Maybe that would be a workable compromise?

[dragon0823]

Hi,everyone! it is my new Appmenu Button styles, Now sharing with you.

_{background-image: url(data:image/png;base64,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) !important;}

[Dunstark]

Anyone can tell me what I need to write in a Stylish Script so it affects TabCandy mode? I want to alter it but I don't know the identifier.

Here you go:

The original CSS: chrome://browser/content/tabview.css

The Platform Specific CSS: chrome://browser/skin/tabview/tabview.css

To edit Tabcandy(or whatever is the new official name):

@-moz-document url("chrome://browser/content/tabview.html") {

/* Your code here */

}

[SkyDX]

Here you go:

The original CSS: chrome://browser/content/tabview.css

The Platform Specific CSS: chrome://browser/skin/tabview/tabview.css

To edit Tabcandy(or whatever is the new official name):

@-moz-document url("chrome://browser/content/tabview.html") {

/* Your code here */

}

Thank you very much, worked like a charm!^^

[argonite]

As soon as I moved from 3.6 to the nightlies, I wanted to get the kind of UI cleanliness I saw in Google Chrome and the StratumFusion theme for Firefox 3.6 (which is awesome, btw, check it out!).

- Only six Stylish scripts required.

- Intended for tabs-on-top.

- Uses Omnibar extension and Stylish extension.

Note the draggable areas: In a normal window, they are below the app button and below the window controls. In a maximized window, the area above the tabs becomes draggable.

Uses the following Stylish scripts, without change (except minor margin adjustments):

Firefox 4 better app button style

Firefox 4 combine stop/reload with urlbar

Disclaimer: I do not claim any of the below code is entirely mine.

Bookmark Toolbar Icons Only (useful if you have only a few bookmarks and they all have favicons)

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

#personal-bookmarks toolbarbutton[image] > label {
    display:none!important
}

Navigator Toolbar Shadows and Curved Corners (with work, could become the white underglow in the Office 2010 titlebar)

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

/* Shadow above navigator toolbar, curved corners */
#navigator-toolbox[tabsontop="true"] #nav-bar {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-box-shadow: 0px -3px 5px rgba(0,0,0,0.3);
}

Any Button in Tab-Bar Looks Like Tab

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

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
    -moz-appearance: none !important;
    background-position: -5px -2px !important;
    background-repeat: no-repeat !important;
    background-size: 136% !important;
    -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
    background-image: -moz-linear-gradient(left, transparent, transparent, rgba(255,255,255,.3) 1px, rgba(255,255,255,.3)) !important;
}

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover {
    background-position: -4px -2px !important;
    background-size: 134% !important;
    background-image: -moz-linear-gradient(top, rgba(255,255,255,.5) 1px, rgba(255,255,255,.3)) !important;
}

/* The titlebar spacer "blocks" any normal button in the titlebar from being pressable, let's get rid of it */
#titlebar-spacer { 
    display: none !important;
}

Tabs in Titlebar

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

/* Move tabs up to titlebar in maximized window */
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
    margin-top: -16px !important;
    padding-left: 112px !important;
    padding-right: 112px !important;
}

/* Move tabs up to titlebar in normal window */
#main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
    margin-top: -21px !important;
    padding-left: 109px !important;
    padding-right: 109px !important;
}

[+Gary7 Subscriber²]

If you really don't want to keep stylish installed and are avoided that for whatever reason, at least consider leaving it installed only until you get your theme worked out, then ditch it after you copy your finished masterpiece to your userchrome.css

Maybe that would be a workable compromise?

I can't use it as my scripts do not show up in it. This is do to the fact that I have altered scripts/combined some so in stylish none of them show up.