Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Enthusiast

mNiosu

Posted
Posted

Sorry for double post!

@panoc

Using your idea I modified the code and styled it a bit. Also modified it's margin not the padding so now when you hover the area where the down button of the scroll bar is the add-on bar doesn't pop-up ! I still don't know how to add delay to it popping up and staying up thought ...

#addon-bar {
  position: fixed;
  bottom: -21px;
  right: 1px;
  border: 0 !important;
  -moz-appearance: none !important;
  -moz-transition: bottom .7s;
  padding-top: 12px !important;
  margin-right: 20px !important;
}

#addon-bar:hover {
 bottom: 1px;
}

#main-window[sizemode="maximized"] #addon-bar {
  bottom: -22px;
  right: 0;
  -moz-transition: bottom .7s;
}

#main-window[sizemode="maximized"] #addon-bar:hover {
  bottom: 0;
}

#addon-bar > #status-bar {
  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 4px 0 0;
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

BTW deleted the blue style lines of the background, add it back if you want that. I like it better gray, fits my other styles ...

Explorer

dert07

Posted
Posted

@mNiosu

Hey, I edited my style so that it doesn't obscure the vertical scrollbar anymore. I just edited the "right" properties to move it more to the left so you don't have to use margins. But there still is the problem with what to do if there is a horizontal scrollbar. It should be possible to adjust the addon-bar's position to the visibility of the different scrollbars but I don't know which selectors to use.

#addon-bar {
  position: fixed;
  bottom: -21px;
  right: 19px;
  border: 0 !important;
  -moz-appearance: none !important;
  -moz-transition: bottom .5s;
  padding-top: 22px !important;
}

#addon-bar:hover {
 bottom: 1px;
}

#main-window[sizemode="maximized"] #addon-bar {
  bottom: -22px;
  right: 18px;
  -moz-transition: bottom .5s;
}

#main-window[sizemode="maximized"] #addon-bar:hover {
  bottom: 0;
}

#addon-bar > #status-bar {
  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 4px 0 0;
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgb(207, 219, 236) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgb(207,220,236)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

Grand Master

Steven P. Administrators

Posted
  • Author
  • Administrators
Posted

I found code for a loading bar similar to IE8/9 one, I think it looks a lot better than the small line you normally see, but not too keen on the color, can anyone improve it and make it look more like a glass loader, like in Windows?

post-2-12856802648889.png

PRETTY PLEASE WITH SUGAR ON TOP!

My Code:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

#urlbar {
position: relative!important;
z-index: 2 !important;
}

#urlbar-progress {
position: relative !important;
z-index: -1 !important;
height: 20px !important;
margin: -21px 0 1px 1px !important;
}

#urlbar-progress .progress-bar, 
#tabbrowser-tabs .progress-bar {
background: rgba(0,61,245,0.5) -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)) repeat scroll 0% 0% !important;
}

#urlbar-progress .progress-bar {
-moz-border-radius: 3px 0 0 3px !important;
}

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

}

Apprentice

panoc

Posted
Posted

try these, they don't interfere with both horizontal and vertical scroll bars

but i can't get it work with animation

transparent background

#addon-bar:hover {
margin-top:-21px;
bottom: 0px;
margin-right: 20px;
border: 0 !important;
-moz-appearance: none !important;}

#addon-bar:not(:hover) {
posititon: fixed;
margin-bottom: -21px;

border: 0 !important;
-moz-appearance: none !important;}

#addon-bar > #status-bar {
-moz-appearance: -moz-win-glass !important;
background: none !important;
margin: 0 !important;
padding: 0 2px 0 2px;
border-radius: 4px 0 0 0;
border: 0 !important;
border-left: 1px solid rgba(0,0,0,.25) !important;
border-right: 1px solid rgba(0,0,0,.25) !important;
border-top: 1px solid rgba(0,0,0,.25) !important;
}

colored background

#addon-bar:hover {
margin-top:-21px;
bottom: 0px;
margin-right: 20px;
border: 0 !important;
-moz-appearance: none !important;}

#addon-bar:not(:hover) {
posititon: fixed;
margin-bottom: -21px;

border: 0 !important;
-moz-appearance: none !important;}

#addon-bar > #status-bar {
  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 4px 0 0;
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgb(207, 219, 236) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgb(207,220,236)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

I found code for a loading bar similar to IE8/9 one, I think it looks a lot better than the small line you normally see, but not too keen on the color, can anyone improve it and make it look more like a glass loader, like in Windows?

i prefer the opposite one (light in the beginning becoming darker at the end)

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

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

#urlbar-progress .progress-bar {
background-image: -moz-linear-gradient(left, transparent 10%, rgba(65, 105, 255, 0.4) 90%, rgba(65, 105, 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;
}
}

i also use different color for the url preview 

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

Community Regular

foxxyn8

Posted
Posted

I found code for a loading bar similar to IE8/9 one, I think it looks a lot better than the small line you normally see, but not too keen on the color, can anyone improve it and make it look more like a glass loader, like in Windows?

post-2-12856802648889.png

PRETTY PLEASE WITH SUGAR ON TOP!

My Code:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

#urlbar {
position: relative!important;
z-index: 2 !important;
}

#urlbar-progress {
position: relative !important;
z-index: -1 !important;
height: 20px !important;
margin: -21px 0 1px 1px !important;
}

#urlbar-progress .progress-bar, 
#tabbrowser-tabs .progress-bar {
background: rgba(0,61,245,0.5) -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)) repeat scroll 0% 0% !important;
}

#urlbar-progress .progress-bar {
-moz-border-radius: 3px 0 0 3px !important;
}

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

}

You may prefer mNiosu's version over mine:

Fission-like, windows-style progress bar

Enthusiast

mNiosu

Posted
Posted

@Neobond

Another fan ... :laugh: :cool:

@dert07

Yes, it's kind of the same thing. Anyway I'm happy with it the way it is, don't like panoc's version. I don't know about the horizontal scroll bar thought, I have encountered any such page since using your style and is not such a big problem for me. What I'm looking for now is to style something like Win7's Aero Slate (graphite) color theme (glass and dark grey). Any help?

Explorer

dert07

Posted
Posted

@panoc

Hi,

I tried your style but it didn't really work. It still overlaps the horizontal scrollbar. You also got a typo in the "position" property, when I fix it it doesn't work anymore.

- - -

@all

I switched back to my first style for now. I don't really care if it obscures either of the scrollbars since I can't click the arrows anyway when the bar is shown and I don't like the look of the addonbar with the blank space at the right when no scrollbar is there. It is more of a problem when you don't autohide but I'm good for now.

If you don't want the autohide use SoapyHamHock's code and maybe move it a bit to the left so it at least doesn't overlap the vertical scrollbar although icons don't seem to change instantly.

Mozilla will come up with their own style soon, I hope. I don't know when the theme is supposed to be finished, i guess in the first RC.

- - -

@mNiosu

Yeah that's what I thought, too. Horizontal scrollbars hardly ever occur and if they do you could always just take the big slider to scroll.

I'm not exactly sure what you mean by the Aero Slate style. If you want the addonbar to be glassed it isn't that easy. You can apply the -moz-win-glass stuff only to #browser-bottombox which contains both the addon-bar and statusbar. But if you apply Glass to it the webpage doesn't shine through.

Apprentice

panoc

Posted
Posted

@panoc

Hi,

I tried your style but it didn't really work. It still overlaps the horizontal scrollbar. You also got a typo in the "position" property, when I fix it it doesn't work anymore.

- - -

hm i just noticed the typo, so that means that ti doesn't need the position property.

strangely the style works fine for me.

it autohides addon bar and does not interfere with the scroll bars, but i will check it in new profile and see if it works

Enthusiast

mNiosu

Posted
Posted
@mNiosu

Yeah that's what I thought, too. Horizontal scrollbars hardly ever occur and if they do you could always just take the big slider to scroll.

I'm not exactly sure what you mean by the Aero Slate style. If you want the addonbar to be glassed it isn't that easy. You can apply the -moz-win-glass stuff only to #browser-bottombox which contains both the addon-bar and statusbar. But if you apply Glass to it the webpage doesn't shine through.

I know how to make it transparent but I want to copy the win7 grey color theme style, not just plain transparency but I'm not very good with color mixing...

Anyway the best solution to scroll-bar overlap would be my idea few posts back, to force the add-on bar under the scroll bar but I don't know if it is possible...

@panoc

Didn't have much time to study the style code but you use a different method for styling the add-on bar witch is not a bad thing but it kind of forces you to use another autohide code that I don't like at all. Also your style has some unnecessary lines. I'll give it a look when I'll have some time ...

Enthusiast

mNiosu

Posted
Posted

well programming is not my forte :p

most of the css styles i write are made by trial and error.

i would be glad if you can shrink my styles and correct them !

I'm not good at programming either. I really don't see the advantages of your style over dert07's except the icons react in real time but that isn't a problem for me as they do change as the bar hides on dert07's style. The problem is that I don't think his idea of autohide works with streetwolf's fix for the icons so I really can't do much to edit your style so I'll stick with the one I modified after dert07's idea because I like it better ...

BTW doesn't anyone have a solution for me to add something like 500ms delay to the add-on bar popping up and also something like 500ms to keep it showing after I stopped hovering it ? That would be really great! :D

Community Regular

foxxyn8

Posted
Posted
Anyway the best solution to scroll-bar overlap would be my idea few posts back, to force the add-on bar under the scroll bar but I don't know if it is possible...

I don't think that's possible. Personally, I just hide those scrollbars. :)

Explorer

dert07

Posted
Posted

BTW doesn't anyone have a solution for me to add something like 500ms delay to the add-on bar popping up and also something like 500ms to keep it showing after I stopped hovering it ? That would be really great! :D

Oh sorry, I forgot about your delay question. You could either use:

-moz-transition-property: bottom;
-moz-transition-duration: .5s;
-moz-transition-delay: .5s;

or easier, just put everything into the -moz-transition property:

-moz-transition: bottom .5s .5s;

If you want to edit the timings the values are -moz-transition: [property] [duration] [delay];

Community Regular

foxxyn8

Posted
Posted

SoapyHamHocks and I tweaked the style a bit more and now the icons also change instantly!

The style can be found here: http://boneyardbrew.posterous.com/

I have two problems:

1 - flexible spacers don't work

2 - findbar won't display

Is it just me?

Explorer

dert07

Posted
Posted

@foxxyn8

You're right, the findbar doesn't show up anymore, we didn't try that. We'll see if we can fix this. I can't add flexible spacers in between icons even without the style. And to the left or right to all icons it doesn't really make sense since the bar adjusts its width automatically.

Community Regular

foxxyn8

Posted
Posted
You're right, the findbar doesn't show up anymore, we didn't try that. We'll see if we can fix this. I can't add flexible spacers in between icons even without the style. And to the left or right to all icons it doesn't really make sense since the bar adjusts its width automatically.

You can't add flexible spacers to the statusbar icons, but if you customize and add buttons to the add-on bar you can. The problem is that with this style enabled they don't work.

In the following images there is one expandable spacer used to push the button to the far left:

Without style:

screenhunter30sep282253.jpg

With Style:

screenhunter31sep282255.jpg

As you can see, with your style applied the expandable spacer isn't working. However this seems to be a common problem with any of the styles which are using a position:fixed for the add-on bar.

Concerning the findbar - if you add bottom: 0 to #browser-bottombox the contents of the findbar will display, but without a background.

Apprentice

panoc

Posted
Posted

@ dert07 i made some modification to your style according to foxxyn8's suggestion

#addon-bar {
  position: fixed;
  bottom: -21px;
  right: 20px;
  border: 0 !important;
  -moz-appearance: none !important;
  -moz-transition: bottom .5s 1s ease-in;
  /*padding-top: 22px !important;*/
}

#browser-bottombox {
position: fixed;
}

#addon-bar:hover {
 bottom: 0;
 -moz-transition: bottom .5s .4s ease-out;
}

#main-window[sizemode="maximized"] #addon-bar {
  right: 20;
}

#addon-bar > #status-bar {
  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 4px 0 0;
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgb(207, 219, 236) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgb(207,220,236)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

with the above code addon bar does not hover when you scroll horizontal.

can you try this and tell if it works ?

Enthusiast

mNiosu

Posted
Posted

What is the identifier for the search box. I want to style it a bit ... :D

@foxxyn8

I have a background but it displays only half the search box. That's not such a big problem but a little styling would be better that's why I want the identifier.

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

  • Recently Browsing   0 members

    • No registered users viewing this page.