Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

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!

Enthusiast

mNiosu

Posted
Posted

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 ...

Community Regular

foxxyn8

Posted
Posted

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

Enthusiast

mNiosu

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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.

Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

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.

Veteran

SkyDX

Posted
Posted

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.

Enthusiast

mNiosu

Posted
Posted

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

Enthusiast

mNiosu

Posted
Posted

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 ...

Community Regular

foxxyn8

Posted
Posted

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

Enthusiast

mNiosu

Posted
Posted

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?

Community Regular

foxxyn8

Posted
Posted

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

:)

Enthusiast

mNiosu

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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

Enthusiast

mNiosu

Posted
Posted

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:

Community Regular

foxxyn8

Posted
Posted

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.

:)

Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

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.

Community Regular

foxxyn8

Posted
Posted

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.

Community Regular

foxxyn8

Posted
Posted

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

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

  • Recently Browsing   0 members

    • No registered users viewing this page.