Recommended Posts

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

It works BUT,

You should keep the #addon-bar padding. That's basically the hot area for the hover. Without it you have to go all the way to the bottom of the window to make the addon bar appear.

This:

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

should be :

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

but you really don't need it at all since you've already set that exact same position here:

#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;*/
}

And here's some findbar styling (it's what I use feel free to modify it):

#FindToolbar .findbar-container {
  margin-bottom: -4px !important;
  border-radius: 0 4px 0 0;
  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;
  background-color: rgba(0,0,0,.8) !important;
  box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important; 
}

and the findbar textbox :

#FindToolbar  .findbar-textbox {
width:250px!important;  
-moz-appearance:none !important;
background:rgba(0,0,0,.9) !important; 
border:1px solid #444 !important;
-moz-border-radius: 4px !important; 
font-family:tahoma !important; 
font-weight:bold !important;
color:#eee !important; 
}

@foxxyn8

Thanks for that! This is kind of what I want to get:

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  border-radius: 4px 4px 0 0;
  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 4px rgba(161,161,161,.9) inset !important; 
}

But how do I get rid of the original background?

post-344974-12857399712969.jpg

@foxxyn8

Thanks for that! This is kind of what I want to get:

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  border-radius: 4px 4px 0 0;
  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 4px rgba(161,161,161,.9) inset !important; 
}

But how do I get rid of the original background?

#FindToolbar {
  -moz-appearance: none !important;
  margin-top:-25px !important;
}

if that doesn't do it then it's this

#browser-bottombox {
background: none !important; 
}

I'm pretty sure it's the second one. I use that first one for a different style.

Edited by foxxyn8

Great, thanks! First one does the job, what does the second one suppose to do ?

The second one will remove the border of any toolbar in that class. I use it in my main theme cause it's faster than declaring every toolbar.

And I hate borders. ;)

Can't seem to manage to reduce the right padding (reduce that blank space in the right of "mach case"). Tried editing margin and padding but doesn't seem to work...

This will hide that empty space until there's something to show:

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {
display:none !important;
}

This will hide that empty space until there's something to show:

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {
display:none !important;
}

Great, thanks a lot! What is the identifier for the status text in the find-bar? I want to add some padding to the right.

Sorry for double post.

Do not mind my last request, it isn't that important...

Here is a version of the style I had in mind for the find-bar:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  border-radius: 4px 4px 0 0;
  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;
  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;
}

#browser-bottombox {background: none !important;}

#FindToolbar {border:none !important;}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {
display:none !important;
}

They only work and use the color theme of a little modified version of SoapyHamHocks/dert07 style:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

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

#browser-bottombox {
  position: fixed;
  bottom: 0px;
}

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

#main-window[sizemode="maximized"] #addon-bar {
  right: 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;
  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;
}

Feel free to edit the background color and borders/margins to your liking ... Thanks everybody for their ideas !

post-344974-12857641057764.jpg

Great, thanks a lot! What is the identifier for the status text in the find-bar? I want to add some padding to the right.

The class for the status labels is .findbar-find-status You can use it to change its font properties, but it you can't add padding to it. If you want to add padding to the right, add it to #FindToolbar .findbar-container

Ok, I put all tweaks together into Soapy's and my style and adjusted it a bit to fit our initial look. Special thanks goes to mNiosu and foxxyn8 for their great work. We would like to publish the style on our blog if you are ok with that.

I added a transition for the opacity so the addonbar fades in and out while sliding which gives it an even better effect imo. Feel free to edit and tweak it to your liking.

The style is on my Dropbox since it's a bit longer now and I don't want to spam the forum: https://dl.dropbox.com/u/4681041/Firefox%204%20Better%20Addonbar.txt

I also created a style from all my ministyles I've been using for the last weeks, in which I tried to fix many of the bugs the UX Team posted in their Theme Timeline. It includes a thinner titlebar, rounded top corners for the nav-bar, a border around the whole content area and Panorama, removed back/forward dropmarker, mockup styled dropmarkers for toolbarbuttons and the "list all tabs" button, the new Addonbar with the Findbar fix and the tabs switch to the titlebar when Firefox is maximized, as in Google Chrome. The last one isn't in the Timeline but on one of the UX Team's blogs they said it is at least considered to work this way.

What's still missing is the new style for the dropmarker in the urlbar and the bookmarkstar icon. If you find other things that need to be fixed just tell me. I'll try to update the style with coming nightlies: https://dl.dropbox.com/u/4681041/Firefox%204.0%20Theme%20bugfixes.txt

I have a new problem:

For some reason the "smart bookmarks bar" add-on doesn't seem to work when installed on a fresh profile so I thought I should be able to obtain the effect thing with css codes. So I created this simple code in order hide bookmark icons labels and reduce the space between icons:

#PersonalToolbar label {display: none !important;}

#PersonalToolbar toolbarbutton image {margin: 0 !important;}

The problem is that in order to obtain the exact effects of the add-on I want to make the label to show up sliding to the right for an icon when I'm hovering that particular icon not just disable it for good, but have no idea how to do that. Anyone can help ?

I knew about the second think you said but it also adds padding to the find-bar when no status is shown and I want to keep it as short as possible. Is not such a big deal anyway... Thanks for the help!

...then this is what you want

#FindToolbar .find-status-icon[status="notfound"] + .findbar-find-status,
#FindToolbar .find-status-icon[status="wrapped"] + .findbar-find-status {
  padding-right:5px !important;
}

#FindToolbar .find-status-icon[status="notfound"],
#FindToolbar .find-status-icon[status="wrapped"] {
  margin-left: -1px !important;
}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) + .findbar-find-status {
  display:none !important;
}

@foxxyn8

Hey, that really wasn't such a big problem, you shouldn't have bothered that much for me. But now that you did, thanks a lot, that's exactly what I wanted! You're the best! :)

@dert07

That looks really good. I wanted to upload my find-bar style on userstyles and link it to your/Soapy's add-on bar style since they only work well together but had second thoughts first because most of the credits go to foxxyn8 and second because I thought I might still be able to improve it.

If you you want I think you and SoapyHamHocks should combine the 2 styles and update your style both on user-styles and on your blog, is fine by me ...

@mNiosu

Thanks for letting us post it. We'll use the my latest style which already combines the two. What do you think of the bugfixes style?

For your prolem with the #PersonalToolbar:

#PersonalToolbar .bookmark-item {
 max-width: 22px !important;
}

#PersonalToolbar .bookmark-item:hover {
 max-width: none !important;
}

Maybe you have to adjust the padding or margin but at least it works.

@mNiosu

Thanks for letting us post it. We'll use the my latest style which already combines the two. What do you think of the bugfixes style?

For your prolem with the #PersonalToolbar:

Maybe you have to adjust the padding or margin but at least it works.

Hey thanks for the code, that is a really simple and smart solution for my desired effect (and I was using an add-on for that :laugh: )... You should also add the new code foxxyn8 posted above, it makes the find-bar perfect in my opinion.

About your "bugfixes style": I've been following this two threads for some months now (since beta1) so I have my own list of styles (15 or so I use now and much more collected) so I haven't looked on your list. It's a problem of taste and personal style here, so if you really want to create a "bugfixes list" you should make a detailed one for each style and with print-screens so people can choose what they want...

LE: This is kind of the code I was looking for:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#PersonalToolbar .bookmark-item {
 max-width: 22px !important;
}

#PersonalToolbar .bookmark-item:hover {
 max-width: none !important;
}

#PersonalToolbar {
margin: -4px 0 -2px 2px !important;

#PersonalToolbar image {margin: 0 !important;}
}

Having one problem thought (a problem that the add-on had too): My personal-bar is almost full of icons and when I hover one and the label slides it forces that far right icons out of the window and they don't come back until I minimize/maximize. Do you think I can fix this effect somehow?

@mNiosu

Ok, I added foxxyn8's fixes, Soapy will update the style on the blog later.

Hmm I'm more a fan of one single style but I understand that it isn't that useful for everyone. I'll see if I can put some of the elements in seperate styles so everyone can pick what they need.

Ok, I put all tweaks together into Soapy's and my style and adjusted it a bit to fit our initial look. Special thanks goes to mNiosu and foxxyn8 for their great work. We would like to publish the style on our blog if you are ok with that.

I added a transition for the opacity so the addonbar fades in and out while sliding which gives it an even better effect imo. Feel free to edit and tweak it to your liking.

The style is on my Dropbox since it's a bit longer now and I don't want to spam the forum: https://dl.dropbox.com/u/4681041/Firefox%204%20Better%20Addonbar.txt

I also created a style from all my ministyles I've been using for the last weeks, in which I tried to fix many of the bugs the UX Team posted in their Theme Timeline. It includes a thinner titlebar, rounded top corners for the nav-bar, a border around the whole content area and Panorama, removed back/forward dropmarker, mockup styled dropmarkers for toolbarbuttons and the "list all tabs" button, the new Addonbar with the Findbar fix and the tabs switch to the titlebar when Firefox is maximized, as in Google Chrome. The last one isn't in the Timeline but on one of the UX Team's blogs they said it is at least considered to work this way.

What's still missing is the new style for the dropmarker in the urlbar and the bookmarkstar icon. If you find other things that need to be fixed just tell me. I'll try to update the style with coming nightlies: https://dl.dropbox.com/u/4681041/Firefox%204.0%20Theme%20bugfixes.txt

That's cool with me. :punk:

can anyone tell me how to get rid of this border ? (see pics)

this the code

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  margin-right: 5px !important;
}

#browser-bottombox {background: none !important;}

#FindToolbar {border:none !important;}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {display:none !important;}

#addon-bar > #status-bar {
background: none !important; 
}

post-350684-12857892164921.jpg

post-350684-12857892265616.jpg

@dert07

Have a look at the problem I wrote in my previous post. And I add another one (not a problem for me but I was thinking to upload the style on user-styles and it might be a problem for others): how can I force labels to always show for folders in the personal-bar ?

BTW is it ok with you if I upload this style on user-styles or it is already there (or maybe you should do it...) ? :D I mean there are a lot of people using that add-on for this style and I just don't see the point of doing it any more and this might help them...

LE: solved my second problem on my own. :)

Here is the new code:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#PersonalToolbar .bookmark-item:not([container="true"]) {max-width: 22px !important;}

#PersonalToolbar .bookmark-item:hover {max-width: none !important;}

#PersonalToolbar {margin: -4px 0 -2px 2px !important;}

#PersonalToolbar  image {margin: 0 !important;}

The problem with the far right icons not coming back is still there thought...

can anyone tell me how to get rid of this border ? (see pics)

this the code

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  margin-right: 5px !important;
}

#browser-bottombox {background: none !important;}

#FindToolbar {border:none !important;}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {display:none !important;}

#addon-bar > #status-bar {
background: none !important; 
}

probably this :

#addon-bar .toolbar-primary.chromeclass-toolbar {
border:none !important;
}

@mNiosu

Added :not() selectors to keep it from affecting the dropdown menu menuitems

#PersonalToolbar .bookmark-item:not(.menu-iconic):not(menuitem) {
 max-width: 22px !important;
}

#PersonalToolbar .bookmark-item:hover:not(.menu-iconic):not(menuitem) {
 max-width: none !important;
}

#PersonalToolbar {
margin: -4px 0 -2px 2px !important;
}

#PersonalToolbar image {margin: 0 !important;}

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • 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.
    • JetBrains is working to cut false positives in RustRover 2026.2 by David Uzondu Recently, JetBrains released the fifth EAP build of its dedicated IDE, RustRover 2026.2, bringing improvements like a Run gutter icon for criterion_main! macro benchmarking and a feature that alerts you when there are unused traits in your current scope. Now, the company is out with a blog post addressing one of the "most common" complaints from users: false positives. In RustRover, a false positive occurs when the editor incorrectly highlights something as an error even though the project compiles and runs successfully. This mismatch flags a gap between the IDE's internal intelligence and the actual compiler. When the editor flashes red warnings over perfectly valid code, developers lose trust in the tool, which stalls momentum. Traditionally, RustRover runs cargo check to detect compiler errors and warnings, but it also relies on its own code analysis engine to power real-time features. To provide quick feedback, this engine parses your source code into a syntax tree while inferring types and resolving names as you type. Because this engine must work on broken, half-written code and react instantly, its logic sometimes diverges from the compiler's, producing false positives that do not exist in the compiler's eyes. JetBrains said that it has a "dedicated task force" focused specifically on identifying and fixing false positives by analyzing user reports and examining large-scale open-source projects. To speed up this process, the team built an internal system modeled after Crater, the famous Rust project that compiles and runs tests for every single crate published on crates.io. This automated pipeline compares the diagnostics from RustRover's analysis with actual compiler output to catch discrepancies before they reach users, ensuring smoother workflows. RustRover, for those who're unaware, is a dedicated IDE designed specifically for Rust developers. It's been around for a couple of years now, providing features like built-in debugging via LLDB, seamless cargo integration, advanced macro expansion, and HTML support. JetBrains distributes the app under two licensing models: a paid commercial subscription and a free option for non-commercial use.
  • 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!