Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Collaborator

Deo Domuique

Posted
Posted

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!

Veteran

Frylock86

Posted
Posted

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.

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted
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;
 }

thanks for the find, i really like it!

Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

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

Collaborator

vasa1

Posted
Posted

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)

?di=512991610285

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.

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted

I've ended up with this:

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

44843_after.png

Not finished yet though.

Enthusiast

mNiosu

Posted
Posted

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!

post-344974-0-64536600-1299257342.png

Community Regular

foxxyn8

Posted
Posted

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

Explorer

r0bc

Posted
Posted

I've ended up with this:

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

44843_after.png

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 :)

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted

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.

Collaborator

Deo Domuique

Posted
Posted

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.

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted

@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

Collaborator

Deo Domuique

Posted
Posted

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

ijqV1k.png

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.

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

  • Recently Browsing   0 members

    • No registered users viewing this page.