Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Contributor

BantryRed

Posted
Posted

Print screen + paste in image editor of your choice works well, or if you have Windows 7 the snipping tool is awesome.

Thanks perfect. This is my layout, I just wished that the tabs window was not glass, and that the background tabs were also not glass, I would like to have it a little more like the blue in the first post. Thanks. Just tried colorful tabs addon, and it didn't work. Also that Firefox Icon on the top left is my Personal menu, which has a flame movement in the globe, pretty cool I think. Sorry one more thing, there is a line just under the minimize button that just stops, not important but Id like to remove it.

post-346088-12796249488231.png

Veteran

Darrian

Posted
Posted

Just for fun :whistle:

post-1972-12796285172764.png

#appmenu-button .button-text {
color: transparent !important;
text-shadow: none !important;
margin-left: -12px !important;
margin-right: -18px !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAK/SURBVDhPY2BAAps3b2acFxLCtFhamhFZ/Pr160L9DAxCyGJY2Tdv3lTpY2dXW66ry4Ss4P79e3oHWppDm9jYjJYoKaHIwdWdOnmS//a5c+mdDAxx6KZ3d3Uwvn3zes7q5KTd3QICYdMZGNgxXHDz+nWfyxvWL25mYKjB5rxPHz+su7Z71/O53t4ngJY4o6g5cuQI75vnT7ecmD3rTiUDQx+6AefPnWH9/v3r809vX/87vmTRnw5Z2a3dDAwScHVXr15V+Pzh/Yvj8+Z+LWFgmI9uwLu3rx1//fz+D4j/P7l+9f80J6eXQGc6wtVdunhB+fu3Lz8eX7n0r5CF+U4PAwMLTPL9u7c2n16/vAvSDMIvbt/6vzQz430TA0MO3IBHDx5o/fj+9ffnd2/+F3FxfQM6jwcm+fnzp+afP76BNYPw5w/v/i/LyvxVy8CQDzfg7p3bKl8/f/x0ecvm38UszLse3bxhvrOtNW2ajIz7i6uXnb58ePcKZsC7Z0/+L8/J/lbPwFAIN2D3rh1Mnz99WPD0yuW35Tw8Fz6+fbNucXramemCglmvbt9y//rx/TuYAQdmzfzfoay8GmiAFEpYvXr10vrt0yeXbx878unm2dM/j0yc+OXktClngDZ+AGkGGvL/8q4df7u0tc8Co0kTI6rv3LnN/ODObY+3z5++fPLw/v/nQKfCbAVG4f9NjQ3/Z9tYL2hjYNDCm6TPnT1rfWrjxiXH9uz69PDc2d9rsrPerPTzm7jY0dFtc1aWxvq0NLWlQUEKc2RlBReKiTFjGHZg/36e/ZMmqR5asiTm+KKF83ZUVq5aFRHRvCo+Phqo2X+li4slyIATCxcaADOYCl7X7N+/X3B3ebnK0rQ0zR0pKWoTJSVFTu3bpzaFgUGZYM4EKTh27Bjz48eP2adNm8Z448YNcHa+cuUKSkYCAD6ngKt948p8AAAAAElFTkSuQmCC") no-repeat 16px !important;
}

#appmenu-button dropmarker:before {
content: "Phoenix" !important;
padding-right: 5px !important;
}

#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 3px 10px 3px 7px !important;
background: -moz-linear-gradient(top, rgba(251,89,65,1), rgba(189,40,25,1), rgba(157,6,0 ,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(251,89,65,1), rgba(251,55,65,1)) !important;
}

#appmenu-button-container{
position: fixed !important;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 102px !important;
padding-top:1px !important;
}

Veteran

Darrian

Posted
Posted

The Neowin fav icon needs to be in there imo ;)

hmm...

Nice! But mine doesn't look like yours!?!

You mean you apply the script and it doesn't appear like the screenshot?

Update: Hmm, something is different in the code I posted from the code in my Stylish and I can't go edit it now, so here (should be) the correct code:

#appmenu-button .button-text {
color: transparent !important;
text-shadow: none !important;
margin-left: -12px !important;
margin-right: -18px !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAK/SURBVDhPY2BAAps3b2acFxLCtFhamhFZ/Pr160L9DAxCyGJY2Tdv3lTpY2dXW66ry4Ss4P79e3oHWppDm9jYjJYoKaHIwdWdOnmS//a5c+mdDAxx6KZ3d3Uwvn3zes7q5KTd3QICYdMZGNgxXHDz+nWfyxvWL25mYKjB5rxPHz+su7Z71/O53t4ngJY4o6g5cuQI75vnT7ecmD3rTiUDQx+6AefPnWH9/v3r809vX/87vmTRnw5Z2a3dDAwScHVXr15V+Pzh/Yvj8+Z+LWFgmI9uwLu3rx1//fz+D4j/P7l+9f80J6eXQGc6wtVdunhB+fu3Lz8eX7n0r5CF+U4PAwMLTPL9u7c2n16/vAvSDMIvbt/6vzQz430TA0MO3IBHDx5o/fj+9ffnd2/+F3FxfQM6jwcm+fnzp+afP76BNYPw5w/v/i/LyvxVy8CQDzfg7p3bKl8/f/x0ecvm38UszLse3bxhvrOtNW2ajIz7i6uXnb58ePcKZsC7Z0/+L8/J/lbPwFAIN2D3rh1Mnz99WPD0yuW35Tw8Fz6+fbNucXramemCglmvbt9y//rx/TuYAQdmzfzfoay8GmiAFEpYvXr10vrt0yeXbx878unm2dM/j0yc+OXktClngDZ+AGkGGvL/8q4df7u0tc8Co0kTI6rv3LnN/ODObY+3z5++fPLw/v/nQKfCbAVG4f9NjQ3/Z9tYL2hjYNDCm6TPnT1rfWrjxiXH9uz69PDc2d9rsrPerPTzm7jY0dFtc1aWxvq0NLWlQUEKc2RlBReKiTFjGHZg/36e/ZMmqR5asiTm+KKF83ZUVq5aFRHRvCo+Phqo2X+li4slyIATCxcaADOYCl7X7N+/X3B3ebnK0rQ0zR0pKWoTJSVFTu3bpzaFgUGZYM4EKTh27Bjz48eP2adNm8Z448YNcHa+cuUKSkYCAD6ngKt948p8AAAAAElFTkSuQmCC") no-repeat 16px !important;

}

#appmenu-button dropmarker:before {
content: "Phoenix" !important;
padding-right: 5px !important;
}

#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 4px 7px !important;
background: -moz-linear-gradient(top, rgba(251,89,65,1), rgba(189,40,25,1), rgba(157,6,0 ,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(251,89,65,1), rgba(251,55,65,1)) !important;
}

#navigator-toolbox:not([tabsontop=true]) #nav-bar
{
-moz-box-shadow: threedshadow 0 -1px inset !important;
padding-bottom: 7px !important;
}

#navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,1) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

#navigator-toolbox:not([tabsontop=true]) #PersonalToolbar
{
background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)) !important;
}

#navigator-toolbox:not([tabsontop="true"]) #TabsToolbar
{
padding-top: 2px !important;
}

#navigator-toolbox[tabsontop=true]
{
border-bottom: 0px solid threedshadow !important;
}

#navigator-toolbox[tabsontop=true] #TabsToolbar
{
-moz-box-shadow: inset threedshadow 0px -1px !important;
}

#navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,.6) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

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

.tabbrowser-tab[selected=true]
{
font-weight: bold !important;
}

#main-window #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 105px !important;
}

#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 105px !important;
}

#appmenu-button-container{
position: fixed !important;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left:102px !important;
padding-top:1px !important;
}

Veteran

Darrian

Posted
Posted

I posted the updated code for the "Phoenix" button.

For just a blue button and no other changes use:

#appmenu-button{
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}

You can fiddle with the RGB values to get the color blue you want if that's not to your liking or grab somebody else's blue button styles (I've seen a couple, but I don't know if they shared their code).

--------------------------------------------------------------------------------

For Neobond:

post-1972-12796314436917.png

#appmenu-button .button-text {
color: transparent !important;
text-shadow: none !important;
margin-left: -12px !important;
margin-right: -18px !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjVJivzgAAACkklEQVQ4T22SXUhTYRjHD1FQF7mCwAulm6AuS0qxLiIWZKgVXS2jNAkxiDBHF4ZlQl5ESWSWJXPGJjrDSAw209iH+LGttLnN447b/NrmnGvoztS57Zzt37tDhUIP/Hkf3vf58fD834eitoXX690bi8WucRzXQWRMJBLGra2tjlAoJJHL5fu21/7LSUF+MplkPKsxKIwBPO6bx6PeWbQNeeAJRRGPx2m73X56B0ygs6lUaoMJbKKwZQaXZAu43LaIgrdOnHk2gZN1Q3g94ALH8RGTyXROgIPBoIhAHo5PIR091ghufV5Hee8GJJ1BAc59asLxOj2mfSyi0eiCVCo9RJE5quy+CPzhmACmcbWLx72BJMp6WBS/n0N+w3fkNQyjc2QBrsA6rFbrA4qY8K1R48JmnBfAvzHq5XC7m3R8YcOph3rcbJ/EkGMFL9UMlpaW9BTP8+6qjknEuSSW2QTUdAS+MCfwXpZDo3YZd1QzMM+vwTK/irvt4yAuuyliDF2tnEAkGkNJqw3nm6ZxRTYHpSlInEyAjEJM4YTT5FyBlNT6/X4mbY7qjdqGUdqHY9J+nKg1ILd+DHlEtd02rK6FwbKsoF6jCwr9THrGPsrhcBQ73Ito0/xE5nUlskq7cLj8o6Dssi7cf6cnM/nTXdCtt8MX+JWSyWQ3qIqKit0Mw/T3DxPwagsyCpqQcfGPSC4iecMHLZxOJ1zuWVgsFp2IhPCXCoUic2pqavzT4BjE1Z04WNyM/RdeQVTYjEyJHJLnX2GnHaBperKoqOjoju2pqak5YDabm8hasYPDP9D+ZQRKjRFGyzTcbndYq9W25uTkZP93X8nlrsrKyiyNRlNiMBie6HS6epVKVSoWi4+Qtz3bod8reAHfGw6GeQAAAABJRU5ErkJggg==") no-repeat 16px !important;
}

#appmenu-button dropmarker:before {
content: "Neowin" !important;
padding-right: 5px !important;
}

#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
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 dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}
#navigator-toolbox:not([tabsontop=true]) #nav-bar
{
-moz-box-shadow: threedshadow 0 -1px inset !important;
padding-bottom: 7px !important;
}

#navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,1) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

#navigator-toolbox:not([tabsontop=true]) #PersonalToolbar
{
background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)) !important;
}

#navigator-toolbox:not([tabsontop="true"]) #TabsToolbar
{
padding-top: 2px !important;
}

#navigator-toolbox[tabsontop=true]
{
border-bottom: 0px solid threedshadow !important;
}

#navigator-toolbox[tabsontop=true] #TabsToolbar
{
-moz-box-shadow: inset threedshadow 0px -1px !important;
}

#navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,.6) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

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

.tabbrowser-tab[selected=true]
{
font-weight: bold !important;
}

#main-window #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 105px !important;
}

#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 105px !important;
}

#appmenu-button-container{
position: fixed !important;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left:102px !important;
padding-top:1px !important;
}

Or (Replace the first part with this):

post-1972-12796324338605.png

#appmenu-button .button-text {
color: transparent !important;
text-shadow: none !important;
margin-left: -12px !important;
margin-right: -18px !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjVJivzgAAACxElEQVQ4T1WSazCUYRTHX5MuU1PTJ7dp6kPjiyRqFOtOWDTISCmpaUYfmgoxhAgrl3Udo0Ii1QzSmtFqmd1tlVuLdadFWbfcyjVi1+6+/15vmPrP/OY8H85vznlmDkFshpEk0bROFGtbJrZ4MDM6i1yyOlud0tokDsni18fCBZ7G4dW6pg+EO7f66QpAI4LzzehCnvQ9M2dQ6ZorwwZns/thkdKBU7GNKuPIDw0nowTuFvGivdvyj8VVreklOau0bX4uoHwGviVzNOeLJuD8+CsYyW0wjKyFeVxtn1tavY1Xet0OwiupWq9D9jOQmjrzS64Gt38NoXwFArgK+JUtwL1gDLbpPTCJacC5zM+qmwWthXbRVUcIN3Zd2MjMUjcl0llWkBCNqBAmVMK/dAGe+aOwY3fBJOoT/PMlyOQNzNnG8qMJV3Zj15pCub4lbtQ1JQnJxDpuc2bhmiEFI6YJJ0L5iKvoA699jLSO5fcTDol1a3SzQgXpxDIGp1agUKqhUpOQzcrBFkyBmd4G39wOiGUL6JZNwzSCpyTsWKLVFbkSLxom4JQthVveCO6/m8KXyd+0vBGSJKGm2Ejv8AxMI6uVhFOCsKdvfJH0eyqBabwYlsntsEnrhkdOL+r7Z+np/0YsnYQ9SzBEOMfXhJc3DY+bhHChf4cLg+AaGIYKcJzCPlaEqtZRSlZtu9zWUblLojCeuMquOhSY15Cie6kQWj6F0PEtht6VVxQvoXe5GFb3OOA1D2+tra5oGa/xSRMeJYamFjUsgjkMXe982X7HTNA4bUK9DzKz4Bhchsbu79Q3yar24XnLDN6AJn09RrfK9xkElHgfvvis+YB9qnq3WQJ2m7Fo9pg/grbHE/J6huijRDZnRcn/36t1FG+Xvv9zPbOgN9ccIioFp++WD50J4gwxH/JqbSMqbzBC3uqkcqV/J1H5AwyR8uFsu6HiAAAAAElFTkSuQmCC") no-repeat 16px !important;
}

Veteran

Darrian

Posted
Posted

No i havent disabled the addon checking and im usuing 2.23b2 thats on the addons website. How do i disable addon checking?

Thanks :D

Type about:config in your address bar.

Acknowledge the warning.

Create a new boolean named "extensions.checkCompatibility.4.0b" and set it to "False."

Restart Firefox (just in case).

That is freaking awesome

lol thanks

Rookie

sayjay09

Posted
Posted

Type about:config in your address bar.

Acknowledge the warning.

Create a new boolean named "extensions.checkCompatibility.4.0b" and set it to "False."

Restart Firefox (just in case).

Thanks alot it works like a charm :D just a few other things, where do i get stylish for 4.0b2? and what scripts do i use to just put the tabs at the very top, theres too many here and i dont even have stylish yet. Also where did you get that theme for fastdial?

Veteran

Darrian

Posted
Posted

Here's a purple button. I'll probably do black and maybe a yellow or orange and then I'll be done messing with colors for a while unless I get a request.

post-1972-12796337912267.png

#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
background: -moz-linear-gradient(top, rgba(153,123,179,1), rgba(131,98,162,1), rgba(120,93,159 ,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: -1px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(146,115,174,1), rgba(152,122,178,1)) !important;
}

Veteran

Darrian

Posted
Posted

Thanks alot it works like a charm :D just a few other things, where do i get stylish for 4.0b2? and what scripts do i use to just put the tabs at the very top, theres too many here and i dont even have stylish yet. Also where did you get that theme for fastdial?

You can get Stylish for 4.0b2 here. Check my first post on the first page of this thread for an itemized list of all the scripts I'm running, you'll find tabs in the titlebar there.

Rookie

sayjay09

Posted
Posted

You can get Stylish for 4.0b2 here. Check my first post on the first page of this thread for an itemized list of all the scripts I'm running, you'll find tabs in the titlebar there.

Managed to do all the tabs in top and move the padding on the minefield button :D where did you get the fastdial theme from?

Veteran

Darrian

Posted
Posted

Managed to do all the tabs in top and move the padding on the minefield button :D where did you get the fastdial theme from?

Oh yeah. Like 95% of every other customization I use I got it from DeviantArt, of course :D I'll go find a link.

Update: http://browse.deviantart.com/customization/skins/web/firefox/?qh=&section=&q=fastchrome#/d2nt3bh

Collaborator

vajlent

Posted
Posted

Is it even possible to come close to this with stylish:

post-251611-12796373481978.png

1. the thin bright line around the menu button.

2. colour/gradient on active tab & nav & bookmarks toolbar.

3. colour/gradient on inactive tab. (same as home button)

4. colour/gradient on home button. (same as inactive tab)

Cheers

Rookie

sayjay09

Posted
Posted

Oh yeah. Like 95% of every other customization I use I got it from DeviantArt, of course :D I'll go find a link.

Update: http://browse.deviantart.com/customization/skins/web/firefox/?qh=&section=&q=fastchrome#/d2nt3bh

much appreciated i apply the theme to a 5x5 grid and some of the white borders and soft edges just arent there. I dont use the icons for the representation i let the website previews do the work. Im not sure whats wrong

Veteran

Darrian

Posted
Posted

It's probably an extension causing it, or it could be a Stylish script. Try disabling your scripts one by one until you find the culprit. If that doesn't work try disabling your extensions one at a time.

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

  • Recently Browsing   0 members

    • No registered users viewing this page.