Recommended Posts

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

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

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

}

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

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

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

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

@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

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

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

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

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

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?

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

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.

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

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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • A few years ago walmart had the 512 models on clearance for $35. I bought 3 of them. I should have purchased more.
    • I'm fine with a little reasonable promotion of Edge, but the degree which they do it right now I consider extremely unreasonable. 
    • Microsoft AI boss no longer believes that AI will replace human workers by David Uzondu Mustafa Suleyman, the head of Microsoft AI, recently took back his statements concerning white-collar jobs that he gave to the Financial Times in an interview made back in February, where he claimed that AI would replace office workers within 12 to 18 months. On Monday's episode of The Verge's Decoder, Suleyman recast the technology as more like a helpmate than a tool designed to take over your job. He explained that smaller office duties will "increasingly become digitized, automated" as people generate more digital materials. During the discussion, Suleyman emphasized a "very important distinction" between "tasks" and "jobs" to clarify his previous claims. He argued that his earlier comments only referred to individual actions that people perform at their desks. Suleyman used to work for DeepMind, the research lab he co-founded in 2010 alongside Demis Hassabis and Shane Legg, before he left in 2022 to establish Inflection AI and build an empathetic digital assistant. Microsoft hired him in March 2024 to lead its newly formed "Microsoft AI" division, placing him in charge of consumer products like Copilot, Bing, and Edge. His February comments also detailed plans for Microsoft to achieve self-sufficiency with a $140 billion infrastructure budget to train frontier models, predicting that creating a customized AI will soon feel like creating a podcast or a new blog: The 41-year-old is not the only AI executive who's softened his "AI will replace you" stance. OpenAI's CEO, Sam Altman, last month used X to push back against employment panic by arguing that his startup builds tools to assist humans rather than build replacements. He had previously garnered backlash by suggesting that many modern office roles that AI might replace did not qualify as "real work" in the first place, at least when you compare desk jobs to physical, historical labor like farming.
    • Adobe Acrobat Reader DC 2026.001.21662 by Razvan Serea Adobe Acrobat Reader DC software is the free, trusted standard for viewing, printing, signing, and annotating PDFs. Its the only PDF viewer that can open and interact with all types of PDF content – including forms and multimedia. It’s connected to Adobe Document Cloud – so you can work with PDFs on computers and mobile devices. Adobe Document Cloud is a revolutionary, modern and efficient way to get work done with documents in the office, at home or on-the-go. At the heart of Document Cloud is the all-new Adobe Acrobat DC, which will take e-signatures mainstream by delivering free e-signing with every individual subscription. Document Cloud includes a set of integrated services that use a consistent online profile and personal document hub. With Adobe Document Cloud, people will be able to create, review, approve, sign and track documents whether on a desktop or mobile device. Businesses will be able to take advantage of Document Cloud for enterprise which provides enterprise-class document services that integrate into systems of record such as CRM, HCM, CLM, and CMS, adding speed, efficiency and transparency to getting business done with documents. Adobe Acrobat Reader DC new feature highlights: Work with PDFs from anywhere with the new, free Acrobat DC mobile app for Android or iOS. Select functionality is also available on Windows Phone. Use the new Fill & Sign tool in your desktop software to complete PDF forms fast with smart autofill. Download the free Adobe Fill & Sign mobile app to add the same option to your iPad or Android tablet device. Save money on ink and toner when printing from your Windows PC. Store and access files in Adobe Document Cloud with 5GB of free storage. Get instant access to recent files across desktop, web, and mobile devices with Mobile Link. Sync your Fill & Sign autofill collection across desktop, web, and iPad devices. Adobe PDF Pack premium features includes: Convert documents and images to PDF files. Use your mobile device camera to take a picture of a paper document or form and convert it to PDF. Turn PDFs into editable Microsoft Word, Excel, PowerPoint, or RTF files. Combine multiple files into a single PDF (web only). Get signatures from others with a complete e-signature service. Send, track, and confirm delivery of documents electronically instead of using fax or overnight services (tracking not available on mobile). Store and access files online with 20GB of storage. Download: Adobe Acrobat Reader DC 64-bit | 719.0 MB (Freeware) Link: Adobe Acrobat Reader DC Home Page | Release Notes | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Meta will now use data from outside businesses to personalize AI responses by David Uzondu In an update that's rolling out globally (except in a handful of countries), Meta will use your data from outside businesses to personalize your AI responses and your primary feeds. Meta already utilizes your shopping activity to target ads, but the company now plans to expand this tracking to personalize other "parts of your experience" like feed algorithms and AI assistant chats. The company is replacing the two settings ("Your activity off Meta technologies" and "Activity from other businesses") that currently let you disconnect off-platform activity with a single, renamed setting called Activity from other businesses. If you don't want Meta to manipulate your feed and AI responses using your outside history, you can just turn the Activity from other businesses setting off in your account settings. This toggle resides within your Accounts Center, applying your choice to every connected profile. Turning this off will not stop companies from sending your data to Meta. The company will still collect your web interactions, but it only uses them to train products, while still accessing external accounts you connect. When The Verge spoke to Meta spokesperson Emil Vazquez, the representative said that this update will exclude several locations at launch, including the European region, the UK, Brazil, Thailand, South Africa, Turkey, South Korea, Ecuador, Nigeria, and Kenya. The new update comes at a time when the social media giant is recovering from a major PR disaster involving generative AI. Last week, there was a huge security issue on Instagram where attackers figured out a way to trick Meta AI into handing over account ownership (even if the victim had 2FA enabled). Some of the affected accounts include the dormant Obama White House profile, cosmetics brand Sephora, the Chief Master Sergeant of the Space Force, and security researcher Jane Manchun Wong. Internally, the company also had to scale back plans on its Model Capability Initiative (MCI), an employee-monitoring program designed to train corporate AI models by recording worker keystrokes and screen activity, after employees raised privacy concerns and complained about severe battery life drain.
  • Recent Achievements

    • One Year In
      Primer1st earned a badge
      One Year In
    • Experienced
      JayZJay went up a rank
      Experienced
    • Reacting Well
      Sir_Timbit earned a badge
      Reacting Well
    • Week One Done
      rubentuben8 earned a badge
      Week One Done
    • Week One Done
      ARaclen earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      512
    2. 2
      PsYcHoKiLLa
      229
    3. 3
      Edouard
      134
    4. 4
      ATLien_0
      87
    5. 5
      Steven P.
      80
  • Tell a friend

    Love Neowin? Tell a friend!