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

    • State of Decay 3 is out in 2027, reveals Plague Nests with new co-op gameplay trailer by Pulasthi Ariyasinghe A few months ago, Undead Labs broke its silence about the third entry in the State of Decay series since its announcement in 2020. Today, the studio had a brand-new trailer to reveal at the Xbox Games Showcase, finally giving players a look at the Unreal Engine 5-powered title. A broad 2027 release window is now attached to State of Decay 3 too. The studio confirmed that every scene seen in the gameplay trailer (except for the studio logo) released today is from the game with no cinematic footage. "The quality bar of the moment-to-moment experience is higher than anything we’ve achieved in Undead Labs’ history," says the studio. "State of Decay 3 is being built in Unreal Engine 5, and we’re creating better quality versions of what makes our game the survival sandbox it is, and the combat experience is really, really important to us, and I think you can see it coming through in this trailer." One new aspect of this upcoming entry is the Plague Nests. These are supposed to be dynamic, dungeon‑like enemy hubs with varied “personas” that change tactics each time one appears on a map. These areas will have the best loot in the game for players brave enough to tackle them. The combat system is being overhauled too, letting players do quick and power attacks depending on the situation. This isn't just on the player's side though, as zombies themselves now have multiple new types of behaviors depending on how fresh or decayed they are. "All of these play very differently, especially as you start getting outnumbered or when you’re making noise and running around and trying to save your rear end or the rear end of your friend next to you," adds the developer. Of course, settlement building and community management are massive parts of this third entry too. These are being further expanded with the cooperative focus, giving players much more freedom for playing together than in State of Decay 2. Players will even be able to split up and build settlements in different areas of the same map with different goals. Undead Labs confirmed that playtests are already ongoing for the title, and interested players can sign up to participate by heading over here once more slots open up ahead of the full release. State of Decay 3 is coming out on PC, Xbox Series X|S, PlayStation 5, and Xbox Game Pass sometime in 2027.
    • Doom: The Dark Ages Revelations expansion gives the Slayer a brutal Chain Spear by Pulasthi Ariyasinghe Last year, id Software released Doom: The Dark Ages as a prequel to its reboot series, offering a look at the legendary Slayer character during an ancient war between Hell and Heaven. Today, at the Xbox Games Showcase, id Software returned with a new announcement that unveiled Doom: The Dark Ages Revelations as its first story expansion. The expansion will see the Slayer being betrayed and cast into a "merciless purgatory only escapable by confronting haunting truths." Somehow, there is one ally in all this chaos seemingly attempting to help our protagonist escape his fate. Players will be ascending this prison and fighting plenty of new demons and abominations as they work to free the Slayer's followers. One new aspect of the expansion will be the Chain Spear. This new weapon is described by the studio as a "uniquely satisfying combat system that rewards mastery with a potent combination of power and mobility." Check out the trailer below to see the new weapon in action, where the Slayer is seen using it to even pin enemies to walls. id Software is also preparing a free update to all owners of Doom: The Dark Ages that will land alongside the new paid expansion. Dubbed the Ripatorium 3.0 update, this will add more customization options, an improved pass code generation system, and preset options for players diving into the game's arena challenge mode. Expansion buyers will also receive additional maps, demons, and new weapons to use in this mode in addition to the story levels. Doom: The Dark Ages Revelations expansion is out on July 7 across PC, Xbox Series X|S, and PlayStation 5 with a $19.99 price tag. Those who own the Premium Edition or the Collector's Bundle will receive the expansion for no extra cost as well.
    • Hyped for this. Replayed the remasters recently and they're so well done, and Crash 4 was great too. I trust this team to deliver.
    • Ninja Theory's new Hellblade game is action-focused and set in Purgatory by Pulasthi Ariyasinghe Ninja Thery has been building its award-winning Hellblade series since 2017, delivering Senua's Sacrifice and Senua's Saga since then. Today at the 2026 Xbox Games Showcase, the studio had a brand-new installment announcement featuring Senua again, but this time, she is in a version of purgatory, and the focus is on the action. Simply named Senua, this new entry is described as a "full-on action-adventure" experience, delivering an expanded focus on combat, puzzle-solving, and freedom of exploration. The developer says that it is keeping the same high production values and storytelling features of the previous games while giving what players have been asking for in the gameplay department. The entirety of Ninja Theory is now working on Senua, giving the project much more manpower than ever before, while also letting the team draw on its action roots from Devil May Cry and prior titles. However, the studio also confirmed that its previously announced Project Mara horror experience is no longer in development. Alongside snappier traversal moves, Senua will be able to take stealth and direct combat routes. She has access to her own sword, plus any enemy weapons as well, with dual wielding also being an option for most dropped melee swords, axes, and other weapons. Outside of melee combat, Senua will be able to use special abilities that let her alter the reality around her. The world is said to be about twice the size of Hellblade 2. While this won't be an open-world experience, the linear story will let players explore their surroundings further than before. The story of Senua will be set after the events of previous Hellblade titles, with our protagonist being stuck in her own version of Purgatory. The series' well-explored psychosis themes will return as well. "She’s trapped between life and death on a quest to reach the afterlife and be reunited with the ones that she’s loved and lost," adds the studio. "Her belief is that by healing the wounds of her life, she can find the peace that is the key that unlocks the gate to the afterlife." Senua is releasing on Xbox Series X|S, PC, and PlayStation 5 sometime in 2027.
  • Recent Achievements

    • Proficient
      Eric Biran went up a rank
      Proficient
    • Dedicated
      Conjor earned a badge
      Dedicated
    • Week One Done
      Windows Guy earned a badge
      Week One Done
    • Dedicated
      Mark Spruce earned a badge
      Dedicated
    • Collaborator
      conkir earned a badge
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      492
    2. 2
      PsYcHoKiLLa
      248
    3. 3
      Steven P.
      72
    4. 4
      +Edouard
      68
    5. 5
      ATLien_0
      67
  • Tell a friend

    Love Neowin? Tell a friend!