Share your custom Firefox/Minefield 4 stylish scripts

[Darrian]

This is how I do it:

Works for me, thanks!

[+Gary7 Subscriber²]

This is how I do it:

.progress-remainder {
background-image: none !important;
}

.progress-bar {
background-image: -moz-linear-gradient(0% 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8)) !important;
background-color: royalblue !important; 
-moz-border-radius: 0 0 0 5px !important;
}

This works great , Thanks!

[mNiosu]

This is how I do it:

.progress-remainder {
background-image: none !important;
}

.progress-bar {
background-image: -moz-linear-gradient(0% 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8)) !important;
background-color: royalblue !important; 
-moz-border-radius: 0 0 0 5px !important;
}

How do I edit it's position and height (width) ? I want to make it Fission style ...

[foxxyn8]

How do I edit it's position and height (width) ? I want to make it Fission style ...

Like this (you may need to adjust height and margin-top depending on your configuration):

.progress-remainder {
background-image: none !important;
}

.progress-bar {
background-image: -moz-linear-gradient(0% 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8)) !important;
background-color: royalblue !important; 
-moz-border-radius: 3px 0 0 3px !important;
}

#urlbar-progress{
height: 22px !important;
margin-top: -22px !important;
margin-bottom: 0px !important;
}

[mNiosu]

Like this (you may need to adjust height and margin-top depending on your configuration):

Jesus man, you're a Guru :laugh:. Thanks a lot!! Using your codes made this (win 7 style loading bar):

#urlbar-progress{
height: 22px !important;
margin-top: -22px !important;
margin-bottom: 0px !important;
margin-left: 28px !important;
}

.progress-bar
{
   -moz-appearance: progresschunk !important;
   background-color: transparent !important;
   opacity: .4 !important;
   -moz-border-radius: 3px 0 0 3px !important;
background-image: -moz-linear-gradient(0% 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8)) !important;
}

Of course, if you don't like the grey background add this to it:

.progress-remainder {
background-image: none !important;
}

Question: is there a way to make the left spacing dynamic so it doesn't cover the page icon, even for large ones (maybe I'm not very clear but you might got the idea ) ?

[foxxyn8]

Jesus man, you're a Guru :laugh:. Thanks a lot!! Using your codes made this (win 7 style loading bar):

#urlbar-progress{
height: 22px !important;
margin-top: -22px !important;
margin-bottom: 0px !important;
margin-left: 28px !important;
}

.progress-bar
{
   -moz-appearance: progresschunk !important;
   background-color: transparent !important;
   opacity: .4 !important;
   -moz-border-radius: 3px 0 0 3px !important;
background-image: -moz-linear-gradient(0% 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8)) !important;
}

Of course, if you don't like the grey background add this to it:

.progress-remainder {
background-image: none !important;
}

Question: is there a way to make the left spacing dynamic so it doesn't cover the page icon, even for large ones (maybe I'm not very clear but you might got the idea ) ?

Can you give the url of a site that uses a larger icon? I have an idea, but nothing to test it on.

[Darrian]

Does anybody know if it's possible to hide favicons on tabs? The script I was using has been broken for a while now.

[+Gary7 Subscriber²]

Does anybody know if it's possible to hide favicons on tabs? The script I was using has been broken for a while now.

http://userstyles.org/styles/browse/global/hide%20favicons?per_page=100&sort=created_date&sort_direction=desc

You may be able to tweak the above to work?? The Ultra Minimalist.

[Darrian]

.tabbrowser-tab .tab-icon-image
 	{display:none!important}

Was the line I was looking for. Works great, thanks for the link.

[Brandon H Supervisor]

is the left-side-star addon ever going to be updated to work again?

[mNiosu]

Can you give the url of a site that uses a larger icon? I have an idea, but nothing to test it on.

LINK

Thanks a lot for the help so far by the way! :beer:

[SkyDX]

Anyone got the stylish identifier for the hover URL text? I mean the new text that appears on the right side of the URL bar when you hover over a link.

I would like to change it's color.

[mNiosu]

Anyone got the stylish identifier for the hover URL text? I mean the new text that appears on the right side of the URL bar when you hover over a link.

I would like to change it's color.

Yeah, I want that too, but just to make it a little darker! :D

[mNiosu]

Sorry for double post!

I would also like to find out the stylish identifier for the new progress bar over tabs !

The "fission like-style" for the new url progress bar is also affecting my tab progress bars. I want to prevent it from doing that or ,if not possible, to disable the tab progress bars ...

[foxxyn8]

Anyone got the stylish identifier for the hover URL text? I mean the new text that appears on the right side of the URL bar when you hover over a link.

I would like to change it's color.

overlink text (just change the color to your liking):

.urlbar-over-link-host-label, 
.urlbar-over-link-path-label {
   color: red !important;
}

[mNiosu]

overlink text (just change the color to your liking):

.urlbar-over-link-host-label, 
.urlbar-over-link-path-label {
   color: red !important;
}

Something wrong with your post! :D Anyway, thanks for the code! Any ideas what the stylish identifier for the progress bar in tabs might be?

[foxxyn8]

Something wrong with your post! :D Anyway, thanks for the code! Any ideas what the stylish identifier for the progress bar in tabs might be?

Yeah Firefox is acting silly today. Anyway:

#tabbrowser-tabs .progress-bar

#tabbrowser-tabs .progress-remainder

Question: is there a way to make the left spacing dynamic so it doesn't cover the page icon, even for large ones (maybe I'm not very clear but you might got the idea ) ?

The only thing I could figure out for this was just to hide the label, which you may or may not consider to be a viable option:

#identity-icon-labels {
display: none !important;
}

:)

[mNiosu]

Yeah Firefox is acting silly today. Anyway:

#tabbrowser-tabs .progress-bar

#tabbrowser-tabs .progress-remainder

:)

Thanks a lot, you're a lifesaver! Tried a lot of silly combinations, was pretty close at one point actually ! Thanks again!

The only thing I could figure out for this was just to hide the label, which you may or may not consider to be a viable option:

No worries, that's not such a big issue (even if fission was doing that somehow :huh: ).

My new problem: to keep my win 7 -like progress bar without it affecting my tab progress bar. Tried this, but it disables the style for both of them for some reason:

    #urlbar-progress{
    height: 21px !important;
    margin-top: -21px !important;
    margin-bottom: 0px !important;
    margin-left: 28px !important;
    margin-right: 2px !important;
    }

    .progress-bar :not(#tabbrowser-tabs .progress-bar)
    {
     -moz-appearance: progresschunk !important;
     background-color: transparent !important;
     opacity: .5 !important;
     }

[foxxyn8]

Thanks a lot, you're a lifesaver! Tried a lot of silly combinations, was pretty close at one point actually ! Thanks again!

No worries, that's not such a big issue (even if fission was doing that somehow :huh: ).

My new problem: to keep my win 7 -like progress bar without it affecting my tab progress bar. Tried this, but it disables the style for both of them for some reason:

    #urlbar-progress{
    height: 21px !important;
    margin-top: -21px !important;
    margin-bottom: 0px !important;
    margin-left: 28px !important;
    margin-right: 2px !important;
    }

    .progress-bar :not(#tabbrowser-tabs .progress-bar)
    {
     -moz-appearance: progresschunk !important;
     background-color: transparent !important;
     opacity: .5 !important;
     }

Invalid :not() selector. Do it like this instead:

     #urlbar-progress .progress-bar {
     -moz-appearance: progresschunk !important;
     background-color: transparent !important;
     opacity: .5 !important;
     }

[mNiosu]

Invalid :not() selector. Do it like this instead:

     #urlbar-progress .progress-bar {
     -moz-appearance: progresschunk !important;
     background-color: transparent !important;
     opacity: .5 !important;
     }

You are wright, that is the simpler approach. Thought about that to be honest, but used the wrong identifier (something like " #urlbar .progress-bar"). Anyway, considering I never used CSS codes before Firefox 4, I learned a thing or two ... :)

Thanks a lot again! I owe you a "virtual" beer ... Actually, come to think of it, I owe you something like a dozen ! :laugh:

[foxxyn8]

You are wright, that is the simpler approach. Thought about that to be honest, but used the wrong identifier (something like " #urlbar .progress-bar"). Anyway, considering I never used CSS codes before Firefox 4, I learned a thing or two ... :)

Thanks a lot again! I owe you a "virtual" beer ... Actually, come to think of it, I owe you something like a dozen ! :laugh:

No problem, I'm glad to help someone out.

:)

[aznkid25]

So which is the correct stylish code to get the tab progress bar? I've tried the codes above, but none worked. Are add-ons required for it to work?

[+Gary7 Subscriber²]

So which is the correct stylish code to get the tab progress bar? I've tried the codes above, but none worked. Are add-ons required for it to work?

.progress-remainder {
background-image: none !important;
}

.progress-bar {
background-image: -moz-linear-gradient(0% 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8)) !important;
background-color: royalblue !important; 
-moz-border-radius: 0 0 0 5px !important;
}

The above worked for me. Just place it in userchrome.css I changed the royalblue to red.

[foxxyn8]

So which is the correct stylish code to get the tab progress bar? I've tried the codes above, but none worked. Are add-ons required for it to work?

In order to have the tab progress bars you must be using the latest Firefox 4 nightly. It is not yet available in the official beta.

[foxxyn8]

Sorry for the double post! :unsure:

Jesus man, you're a Guru :laugh:. Thanks a lot!! Using your codes made this (win 7 style loading bar):

#urlbar-progress{
height: 22px !important;
margin-top: -22px !important;
margin-bottom: 0px !important;
margin-left: 28px !important;
}

.progress-bar
{
   -moz-appearance: progresschunk !important;
   background-color: transparent !important;
   opacity: .4 !important;
   -moz-border-radius: 3px 0 0 3px !important;
background-image: -moz-linear-gradient(0% 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8)) !important;
}

Of course, if you don't like the grey background add this to it:

.progress-remainder {
background-image: none !important;
}

Question: is there a way to make the left spacing dynamic so it doesn't cover the page icon, even for large ones (maybe I'm not very clear but you might got the idea ) ?

DeathWolf over at mozillaZine gave me a really good idea for this. Let's set the background-color as transparent, then configure the background-image gradient so that it's transparent at the left. Something like this (test it and let me know what you think):

.progress-remainder {
background-image: none !important;
}

#urlbar-progress .progress-bar {
background-image: -moz-linear-gradient(left, transparent 10%, rgba(102, 51, 255, 0.4) 90%, rgba(102, 51, 255,0.8)) !important;
background-color: transparent !important; 
}

#urlbar-progress{
height: 22px !important;
margin-top: -22px !important;
margin-bottom: 0px !important;
margin-left: 28px !important;
}