Share your custom Firefox/Minefield 4 stylish scripts

[Deo Domuique]

Soapy give it a try! For those who haven't Tabs on Top, I think certainly is better!...

But the fact is that you need for sure light-backgrounds... Not a problem for me, cause I use anyway light backgrounds.

[Deo Domuique]

Soappy... Bro, just a suggestion... I thought you will exclude Nav-Bar! Lost it's perfect color... My personal opinion is to leave the Nav-Bar with Solid color... Transparent only Personal and Tab bars when Tabs aren't on Top.

Also... When I hover on Addon Bar, the first button on the right, appears on the Scroll-bar... I don't know if you consider this as bug, but couldn't be a bit more left?

And something last... Could you give us an option if we want Tabs on Title bar or not? It could be nice feature in your userstyle page...

And something really last... Whichever button I place on Tab bar I would like to take the exact shape of "Open New Tab" button...

Well... These weren't just one suggestion!

Of course the choice is yours :p

[SoapyHamHocks Member]

Soappy... Bro, just a suggestion... I thought you will exclude Nav-Bar! Lost it's perfect color... My personal opinion is to leave the Nav-Bar with Solid color... Transparent only Personal and Tab bars when Tabs aren't on Top.

Also... When I hover on Addon Bar, the first button on the right, appears on the Scroll-bar... I don't know if you consider this as bug, but couldn't be a bit more left?

And something last... Could you give us an option if we want Tabs on Title bar or not? It could be nice feature in your userstyle page...

And something really last... Whichever button I place on Tab bar I would like to take the exact shape of "Open New Tab" button...

Well... These weren't just one suggestion!

Of course the choice is yours :p

I have no clue how to use the userstyles.org settings :blush: Or I would make almost everything an option. If you don't want Tabs in titlebar I have it commented near the bottom of the code and you can remove it.

My main priority was to make tabs on bottom actually work and look decent, I'll see what people think about it and make changes if needed. Again if I can figure out the settings I'll add an option to make buttons like tabs in the TabsToolbar.

[Deo Domuique]

I know that I can remove the proper code... But I'm just saying that could be better, generally! You know well that if you give options the user is happier!

Well, about buttons on tab-bar, if you make 'em exactly like "Open New Tab" ( shape, width etc ) could be perfect! But then we need Tabs NOT on Title bar, because we loose precious space. Especially If we willing to put buttons on Tab-bar.

What about the Add-on Bar? It touches the Scroll-bar and its function of "Down button"

Just suggestions, bro... I don't have any personal request.

P.S. I don't know either how to create options in userstyle.org. The Mentor foxxyn8 knows! If you meet him, ask him! He helps everyone! Along with Tabs on Title bar or Not, you could give us option for Solid Nav-Bar or Fully Transparent!

[bogas04]

http://userstyles.org/styles/39508

[vajlent]

Any opinions on this? I tried to bring back some of the ideas from Firefox 3.7 mockups. I find myself skining more of the UI so I'll end up making this into a theme once Firefox 4 RC hits.

Perfection! ;)

[leomeloxp]

Hey Soapy, I tried to apply your style but got a little error.

Have you got it before? Is there a fix already?

I tried to edit your code to see if I could at least find where is the problem, but didn't find much, sorry =X

If it is just with me, maybe it is the Personas that caused it...

Besides that, your style looks amazing, good job o/

[SoapyHamHocks Member]

Hey Soapy, I tried to apply your style but got a little error.

Have you got it before? Is there a fix already?

I tried to edit your code to see if I could at least find where is the problem, but didn't find much, sorry =X

If it is just with me, maybe it is the Personas that caused it...

Besides that, your style looks amazing, good job o/

Looks to be personas or maybe another userstyle you have enabled? I need to add support for personas..

[dert07]

I'm currently working together with SoapyHamHocks on his Firefox 4 Windows 7 style and just wanted to give you an impression of what our In-Content UI could look like, if we manage that everything opens in a new tab instead of a Pop-up.

http://dl.dropbox.com/u/4681041/in-content.jpg

[aznkid25]

Since I've installed beta 7, when I click on the firefox menu button, the button turns transparent. I think that it may have to do with the stylish code I posted below. I'm not sure what I need to change to fix the problem though. Anyone know how to fix it?

#appmenu-button .button-text
{ 
    color: transparent !important;
    text-shadow: none !important;
    margin-left: -27px !important;
    margin-right: -33px !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADK0lEQVQ4jV2TTWxUZRSGn++7d+bey3SYMgMzdNLMTCu2VcE0CjG1qYqRSEhYKElTA66MooaNLozDwh8WjAs3JsSFSxeKRg0axSj+EApFYotAS0ctWmeEOpTS6fx0fu+9n4v+pPqsTk7yvuck57wCIGXIT4BUsu6OBbr2bO+p5J71OfWHxvzxMEuMA6eBLwu/nxxlDWLZQAGcDG09Ou/xDR3IXegE2F9zEMDg/rd59eky1z467575pfLdrrmLRw7dqJxjWXwgZUh1682gShlSra2Ha0qdK9nq63xDbXniLTUx8pz68Y1+9U5XuPrhwMZBACkEjwRDGgD7hoLE457V9c4GNF5u9XK1WGfw4B4efT1B594eHnvlHrNUku99/mRks9SkuL/jTk+jkrVxF6ps7/Ovmu0bChKXUEQnH9uCMrx8MNJK4sEIoZgVKN9sJqXHENFou+ZtVl18iaXp1UKEjbuf4dPj86hTC1y+eJuJM3/hojF5rUGhYNO9K8TiXG2nrhTrfa0SXQoqJUnLwB0A6J5JAGamcuQn05RmctiuzlhaYkmHSNxkMe/06PWaa2CD2SYZ/rZE8/tRZnIKgKOPv0vz/Y8RysGSLtWaIJKo0Lp+nnylQq1o69LwiHKpoEBAMKKxye/S1iYBOPzNi3zW9wOv7chQnJ2jUczzcHsW8vOUf72J1SIqugZX/sk2+/0bNLruNvl73GZbXOfeHSY+0+ZC5hacOI3d/jwxK8vB3jT1XIPrZ/Nowh3XbUcdnxpv3BcI6VY4ZtK+LYjdcBj7aZHMHw3gKknfU/Sv+40Xdt8mpNVZmFpg8mcNb2vwlEgZssXSGNaF6N055Mc0dBxHR5oa03kvc8Ua68QisXCTRMKgik56pMyfGau4ObapWwAcMeQDluQLS4rw1j6LSFRD1ySapjCkjeMIbMAMQSarmLhUr81NOwPJujsqVr4uZcheQ+MrBdFQi6Sz20sgKNAtwCOYvd4kc0OgqnYlN+v2J+vupdUwrXDMp3W4gpdcpfY6UiQce+k6piHYEJA1p6lOlBfU4UOLzvR/0vh/jvm0DuAuILrcmgHSa4Ur/AsXclHwqDchzQAAAABJRU5ErkJggg==") no-repeat 16px !important; }

Here's a screenshot showing what I'm referring to:

[foxxyn8]

Since I've installed beta 7, when I click on the firefox menu button, the button turns transparent. I think that it may have to do with the stylish code I posted below. I'm not sure what I need to change to fix the problem though. Anyone know how to fix it?

Do you have something like this in your script:

#appmenu-button:hover:active, #appmenu-button[open] 
{
    background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset !important;
}

If so just adjust the rgba values of the background image gradient OR just set a solid background.

Example:

#appmenu-button:hover:active, 
#appmenu-button[open] {
    background-image: -moz-linear-gradient(rgba(255,0,0,.5), rgba(255,0,0,.4)), -moz-radial-gradient(14px, circle cover, rgba(255, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset !important;
    border-radius: 0 0 5px 5px !important;
}

[aznkid25]

Ok I found this in my code:

#appmenu-button:hover:active, #appmenu-button[open]
{    background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;  }

Which part do I need to change in order to make the button orange when clicked, instead of transparent, like it currently is?

[foxxyn8]

Ok I found this in my code:

#appmenu-button:hover:active, #appmenu-button[open]
{    background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;  }

Which part do I need to change in order to make the button orange when clicked, instead of transparent, like it currently is?

if you just want it solid orange replace

background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;  }

with

background: orange !important;

If you want to keep the gradients then look at the example I gave in my previous post, which turned the appmenu button red.

[aznkid25]

What is the rgba code for orange? I want to keep the button looking the same. The only thing I want to change is the background color to orange.

[foxxyn8]

What is the rgba code for orange? I want to keep the button looking the same. The only thing I want to change is the background color to orange.

The rgb value for orange is (255,165,0). The "a" is the alpha value which determines the level of transparency. Values are from 0 - 1 with 1 being fully opaque and 0 being fully transparent.

[aznkid25]

The rgb value for orange is (255,165,0). The "a" is the alpha value which determines the level of transparency. Values are from 0 - 1 with 1 being fully opaque and 0 being fully transparent.

This is the current code I have:

#appmenu-button:hover:active, #appmenu-button[open]
{    background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;  }

which part of the code do I edit in order to change the background color to orange, when the button is clicked? I've tried changing the numbers that are in the rgba parentheses, but I just get errors.

[foxxyn8]

This is the current code I have:

#appmenu-button:hover:active, #appmenu-button[open]
{    background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;  }

which part of the code do I edit in order to change the background color to orange, when the button is clicked? I've tried changing the numbers that are in the rgba parentheses, but I just get errors.

Just use this:

#appmenu-button:hover:active, 
#appmenu-button[open] {
    background-image: -moz-linear-gradient(rgba(255,165,0,.8), rgba(255,165,0,1)), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset !important;
    border-radius: 0 0 5px 5px !important;
}

[Darrian]

Since I've installed beta 7, when I click on the firefox menu button, the button turns transparent. I think that it may have to do with the stylish code I posted below. I'm not sure what I need to change to fix the problem though. Anyone know how to fix it?

They are finally getting around to releasing it? It's so far behind beta8pre now that I shudder to think about using it.

[aznkid25]

Just use this:

#appmenu-button:hover:active, 
#appmenu-button[open] {
    background-image: -moz-linear-gradient(rgba(255,165,0,.8), rgba(255,165,0,1)), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset !important;
    border-radius: 0 0 5px 5px !important;
}

Thanks. That works perfectly. So is it supposed to be transparent when you click on the firefox button, or is it a known bug?

[SoapyHamHocks Member]

Thanks. That works perfectly. So is it supposed to be transparent when you click on the firefox button, or is it a known bug?

It's supposed to be transparent when the window is inactive.

[foxxyn8]

Can anyone help me to understand why I can't install Stylish on the latest build of Minefield...?

I have done the about:config - extensions.checkCompatibility.4.0b and set it to False. This is saved and then restarted but I get the warning and refusal to allow Stylish to install and I assumed that entering what I have done would disable the compatibility check..? This has worked for me on the previous beta builds of FF 4.

Thanks

Just use this extension to disable compat check: Add-on Compatibility Reporter

[leomeloxp]

Looks to be personas or maybe another userstyle you have enabled? I need to add support for personas..

Not really, when I was testing yours I removed all the other scripts I have. Now I'm currently using a custom one that is like pieces of scripts I got and a bit of mine as well... But I must say yours look better, the only point I really mind is the Minefield Button, which I can easily edit on most scripts.

[Deo Domuique]

It happens with any script if it has Tabs on Title bar. Probably needs extra support.

Soapy you've to give attention to something else too... At your AppMenu button, when FF losing focus, the Blue button remains blue. But when you're in Private Mode, the Purple button becomes Transparent... Shouldn't behave both with the same way?

Foxxyn, bro, how I can move 1 px all bars closer to App menu button? ( Tabs not in Title bar )

[SoapyHamHocks Member]

It happens with any script if it has Tabs on Title bar. Probably needs extra support.

Soapy you've to give attention to something else too... At your AppMenu button, when FF losing focus, the Blue button remains blue. But when you're in Private Mode, the Purple button becomes Transparent... Shouldn't behave both with the same way?

Foxxyn, bro, how I can move 1 px all bars closer to App menu button? ( Tabs not in Title bar )

The current value in my skin is -8 so try -9.

#main-window[chromemargin^="0,"][sizemode="normal"]:not([inFullscreen="true"]) #navigator-toolbox {
 margin-top: -9px !important;
}

[Deo Domuique]

I'm trying to build a code that can adjust every button about #toolbar buttons -except the #back button... But it doesn't working well...

Can you please fix it for me? With the normal numbers... Padding, Border-radius etc... Something like this:

#nav-bar toolbarbutton:not([#back-button]){
    margin: 5px !important;
    border-radius: 1px !important;
    padding: 0 8px !important;
    box-shadow: none !important;
    min-height: 22px !important;
}

Soapy, the update is coming?