Share your custom Firefox/Minefield 4 stylish scripts

[Deo Domuique]

Heartripper... Can you please share the code for the Squared Buttons?

I removed the style of buttons entirely because I can't find a fully working one...

http://min.us/llyw6w

By the way, check this bug https://bugzilla.mozilla.org/show_bug.cgi?id=603790

In the future propably they will make the Theme squared to fit with new tabs and Windows 7 generally... But can't wait :p Whatever is rounded/curved just sickens me!

[grayscale]

Is it different from the ones he posted above?

[Deo Domuique]

lol

no... I'm just stupid.

But that code needs a fix... Being in normal mode, breaks the back-button...

[foxxyn8]

Whatever is rounded/curved just sickens me!

All this "square" stuff sickens me! :p

[Frylock86]

Whatever is rounded/curved just sickens me!

Agreed. Rounded corners rarely work on a GUI.... Just take a look at the default AERO skin on Windows 7, set your wallpaper to a bright picture, then look at the top left and right corners of the start menu.... Someone forgot to AA that crap! It looks horrible! I really wish I could find a nce enough skin with square corners.

[+Heartripper Subscriber¹]

But that code needs a fix... Being in normal mode, breaks the back-button...

sorry, i didn't think to it since i always use small icons.

 #main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop="true"] #nav-bar{
   border-radius: 2.5px 2.5px 0 0 !important;
 }

 #nav-bar>.toolbarbutton-1,
 #searchbar .searchbar-textbox,
 #urlbar{
   border-radius: 2.5px !important;
 }

 #navigator-toolbox[iconsize="small"] #unified-back-forward-button #back-button{
   border-radius: 2.5px 0 0 2.5px !important;
 }

 #unified-back-forward-button #forward-button{
   border-radius: 0 2.5px 2.5px 0 !important;
 }

By the way, check this bug https://bugzilla.mozilla.org/show_bug.cgi?id=603790

thanks for the find, i really like it!

[+Gary7 Subscriber²]

can anyone make a new "non grey tabs" the old one leaves a weird line above the tabs in the new nighltys with square tabs.

Install The Latest Dev version of Tab Mix Plus, you can change the colors and more of any tab.

http://tmp.garyr.net/forum/viewtopic.php?t=10888

[vasa1]

Is there a way to change the color of the 'tab arrow'? (I don't know it's name, it's the one that appears when there's too many tabs and used to navigate)

These lines work for me in Stylish & Minefield of 20110303:

.scrollbutton-up .toolbarbutton-icon { background-color: red !important; }
.scrollbutton-down .toolbarbutton-icon { background-color: red !important; }

I don't know why, but the LHS one is muted whereas the RHS one is brighter.

I also didn't see if it works in userChrome.css directly.

[+Heartripper Subscriber¹]

By the way, check this bug https://bugzilla.mozilla.org/show_bug.cgi?id=603790

I've ended up with this:

http://userstyles.org/styles/44843/

Not finished yet though.

[mNiosu]

Hey foxxyn8 I would really appreciate your help again with something. My custom tabs style is broken again.

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

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
        -moz-appearance: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background-repeat: no-repeat !important;
        background-size: 200% !important;
        background-position: -5px -2px !important;
        -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
        -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]), 
.tabs-newtab-button, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
        background-image: -moz-linear-gradient(top,rgba(198,201,206,.70), rgba(151,160,172,.70)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover, 
.tabs-newtab-button:hover, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button):hover {
        background-image: -moz-linear-gradient(top,rgba(198,201,206,.8), rgba(151,160,172,.8)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
        text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

#main-window[sizemode="maximized"] #TabsToolbar > #home-button {
        margin-left: -3px !important;
}

.tabbrowser-tab, .tabs-newtab-button {
   -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 3 2 3 / 4px 3px 2px 3px repeat stretch !important;
}

.tabs-newtab-button, #TabsToolbar > .toolbarbutton-1  {
width: 28px !important;
}

The border and background of the buttons in tabs-toolbar are broken. Also tried to combine the style with the thinner tabs style but the icon padding in the buttons is off. Can you please help me fix the style, can't manage to do it properly myself?

Thanks in advance!

[xoperax]

Does anyone know how to put the tab bar below the location bar without the title bar? It can be done in Fireofx 4 menu but that way will waste an entire row for the menu button..... Thanks

[foxxyn8]

Hey foxxyn8 I would really appreciate your help again with something. My custom tabs style is broken again.

The border and background of the buttons in tabs-toolbar are broken. Also tried to combine the style with the thinner tabs style but the icon padding in the buttons is off. Can you please help me fix the style, can't manage to do it properly myself?

Thanks in advance!

Does this work any better for ya?

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

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
        -moz-appearance: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background-repeat: no-repeat !important;
        background-size: 200% auto !important;
        background-position: -2px -2px !important;
        -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 3 2 3 / 4px 3px 2px 3px repeat stretch !important;
        -moz-border-radius: 7px 7px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]), 
.tabs-newtab-button, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button) {
        background-image: -moz-linear-gradient(top,rgba(198,201,206,.70), rgba(151,160,172,.70)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover, 
.tabs-newtab-button:hover, 
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):not(#tabview-button):hover {
        background-image: -moz-linear-gradient(top,rgba(198,201,206,.8), rgba(151,160,172,.8)), -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
        text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

#main-window[sizemode="maximized"] #TabsToolbar > #home-button {
        margin-left: -3px !important;
}

.tabbrowser-tab, .tabs-newtab-button {
   -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 3 2 3 / 4px 3px 2px 3px repeat stretch !important;
}

.tabs-newtab-button, #TabsToolbar > .toolbarbutton-1  {
width: 28px !important;
}

[r0bc]

I've ended up with this:

http://userstyles.org/styles/44843/

Not finished yet though.

It looks nice! I preferred the original 4.0 mockups, but with the new tabs it fits better. why a background in the buttons? I removed it so they look good on a translucent navbar as do the original ones :)

[+Heartripper Subscriber¹]

It looks nice! I preferred the original 4.0 mockups, but with the new tabs it fits better. why a background in the buttons? I removed it so they look good on a translucent navbar as do the original ones :)

by default buttons in the navbar have a background, i only changed it according to the mockup in the bug posted above.

[Deo Domuique]

You did well! Nice, thank you!

That bug I suspect will be fixed in long time... Unfortunately. You fixed also the back-button in normal mode.

Can I suggest something? You have nice backgrounds on verified domain & identity boxes... But you removed entirely the unknown identity... Could you just remove entirely the background so it fits well with search box icon? Just saying...

So... Will remain only the site's icon which looks the same with search-engine icon... Both without backgrounds...

Also this code

#appmenu-button { 
  border-radius: 2px !important;
}

is giving the same border-radius ( 2px ) to appmenubutton so it's identical with all buttons. Anyway, that's a personal choice.

And this fixes the border-radius of status-panel

.statuspanel-label {
  border-radius: 1px !important;
}

Trying to design everything identical... Squared corners.

[Deo Domuique]

Uknown identity ( normal, not secure site icon ) without background

#identity-box.unknownIdentity {
  background: none !important;
}

[mNiosu]

Does this work any better for ya?

That seems to be perfect! Thanks a lot man, you're one in a million! :beer: ;)

[ruiderson]

I've ended up with this:

http://userstyles.org/styles/44843/

Not finished yet though.

Heartripper, can you, please, share the url drop-down button style? That looks good!

Thanks.

[+Heartripper Subscriber¹]

@Deo Domuique: I'm working on it to remove the excessive space between the icon and the url

@ruiderson: i've pasted it here: http://pastebin.com/TQPTzEq9

[Deo Domuique]

Heartripper... Will you try to give the same appearance on the Addon-bar buttons?

[ruiderson]

@Deo Domuique: I'm working on it to remove the excessive space between the icon and the url

@ruiderson: i've pasted it here: http://pastebin.com/TQPTzEq9

Thanks a lot guy!!!! :laugh:

[Deo Domuique]

Heartripper Check my current design/idea for Addon-bar buttons:

I have the mouse pointer on the ABP button to see the hover effect which is the normal, bluish style.

I've bookmarked your style to keep tracking your progress.

[foxxyn8]

If anyone here wants the rounded tabs back:

Fx4 Minefield Rounded Tabs

[ajua]

I've ended up with this:

http://userstyles.org/styles/44843/

Not finished yet though.

Can you keep the Favicon?

Also, if I apply it on Beta 12 the tabs don't get the squared look. Everything else works well.

[grayscale]

Beta 12 does not have the squared tabs yet.