Recommended Posts

One more issue. I went ahead and installed the latest Minefield and moved over the scripts (didn't need your last fix). The active tab stylish you posted works on toolbar tabs, but not on App Tabs you create. Anyway you could make your stylish to include those as well?

post-277424-1279877174056.png

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button),
.tabbrowser-tab[pinned="true"] {
  -moz-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-position: -6px -2px !important;
  background-repeat: no-repeat !important;
  background-size: 200% !important;
  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
  -moz-border-radius: 10px 8px 0 0 !important;
  background-image: -moz-linear-gradient(left, transparent, transparent 1px,
                                                 rgba(255,255,255,.4) 1px, rgba(255,255,255,.4)) !important;
}

Figured at least one person might like this.

post-49492-1279877486013.png

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
  -moz-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-size: 200% !important;
  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
  -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button)  {
  background-position: -5px -2px !important;
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.70),
                                   rgba(151,160,172,.70)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover {
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.8),
                                   rgba(151,160,172,.8)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

Is it even possible to come close to this with stylish:

post-251611-12796373481978.png

1. the thin bright line around the menu button.

2. colour/gradient on active tab & nav & bookmarks toolbar.

3. colour/gradient on inactive tab. (same as home button)

4. colour/gradient on home button. (same as inactive tab)

Cheers

Does your Firefox look the way as it look in that screenshot? If so, could you tell me how you've done that? The toolbar buttons look way nicer compared with the original ones.

I use Chrome myself but I still have to use Firefox for our school website, so I might as well mess around a little with the beta of Firefox 4 :p

Does your Firefox look the way as it look in that screenshot? If so, could you tell me how you've done that? The toolbar buttons look way nicer compared with the original ones.

I use Chrome myself but I still have to use Firefox for our school website, so I might as well mess around a little with the beta of Firefox 4 :p

It's actually just a mockup by SpewBoy

Updated my combined stop/reload script.

post-49492-12798968274443.png

Changes:

Fixed background color on a blank tab.

Added a inner glow to make the buttons "pop" a bit.

Changed the icons to newer ones from the mockups.

Changed the way the code is applied. Only works if the stop/reload buttons are directly after the Urlbar.

http://userstyles.org/styles/33745

Feedback would be great :)

Any scripts to make the navigation and bookmarks toolbar that blue-ish gradient seen in some of the pictures instead of the gray that I seem to have? The gray is pretty dull.

Its because you're using a non-default Windows theme. Here is a snip of code that should give you that blue.

#navigator-toolbox > toolbar:not(#TabsToolbar) {
  background-color: rgb(227,237,246) !important;
}

#navigator-toolbox[tabsontop="true"] .tabbrowser-tab[selected="true"] {
  background-image: -moz-radial-gradient(center top, white, rgba(255,255,255,0) 60%),
                    -moz-linear-gradient(left, transparent, transparent 1px,
                                               rgba(255,255,255,.5) 1px, rgba(255,255,255,.5)),
                    -moz-linear-gradient(left, transparent, transparent 1px,
                                               rgb(227,237,246) 1px, rgb(227,237,246)) !important;
}

Of course you know I'm going to clean up your code :p Great job though, looks nice.

Edit: This is how I would do it. Should make it slimmer when maximized as well.

#main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop="true"]:not([inFullscreen="true"]) #TabsToolbar{
  padding: 7px 110px 0 4px !important;
}

#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar{
  padding: 0 110px 0 0 !important;
}

.tabbrowser-tab[fadein] {
  max-width: 210px !important;
}

#appmenu-button-container {
  display: none !important;
}

You want to mess with the margin value.

#toolbar-menubar {
margin: top right bottom left !important;
}

If you still have issues, post the code you're using and I'll give you a hand.

#feed-button 
{
  display: none !important;
}




toolbar[mode="icons"][currentset*="urlbar-

container,reload-button,stop-button"] #urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba

(0,0,0,.37) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -3px !important;
  list-style-image: url

("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAY

AAABm

+U3GAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2R

pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77

u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ld

GEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhN

UCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjo

wMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3Ln

czLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjc

mlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5h

ZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnM

uYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxucz

p4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9ya

WdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozQkQ3OTNFRTYwOTZERjExODRF

OUQ2RDI3Qzg1RENGMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0ODA

wNTk3Rjk2NjExMURGOTRBMUI2RTAyRUYxRjAxNiIgeG1wTU06SW5zdGFuY2

VJRD0ieG1wLmlpZDo0ODAwNTk3RTk2NjExMURGOTRBMUI2RTAyRUYxRjAxN

iIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRv

d3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1

wLmlpZDozQ0Q3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIgc3RSZW

Y6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQkQ3OTNFRTYwOTZERjExODRFOUQ2R

DI3Qzg1RENGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8

L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoZDigQAAAN3SURBVHj

ajJJ/aBNnGMefy11ySS65kOtilyZNurX+rAYzEJ2DaVn9R

+vAsblUN2m1UK2KKM5J/bEaVnGsqfujigqWOqZVmJPqtO3arbINEcfEiVpb

tYKm1NCY1OSa5HJ573yutFDY/tgLH7jn5b3v

+7zP90s9HonrAMCE8IgV/r1yCLOybGnFQP

+DZvi/C4VtyMyvvz26xOUubDCY7ReBy

+sz2J0XnQVFQW1/1py5u4Ay9amqChVFBVWIQ/ueDu4JyKapmtJEd9bVzLva

0bXFIOQZXM4ZYY/b/TIhivnxV8k3QadTiKLSRM7CO5lIO0vTJ0FH3ZVzpPz

Sk

+ejWnNrigsFPUP3gqL6JUK2dwyFW5jzP7TlXbvcVWtzFYiHDtR3ra8MvFBU

NaMoqvR5dc1HY4nxhQaTEZJjMag/ePhJW8O+iBSP

+XI03RuY5S1HXWJhDb16AL9BsEU3HAg

+1i6j3B7vVxFRXhY60nh2XSAwnM7KYUkm2ZVl71eIYFhd6CkEjuMgGX8Jt/

o6Vz0beFj3XW317uyrsXx8zV1QgQDJ+Rmej+440Rp6q3RBC

+qKFKM3XSqe7xu98fv1y5Kcu5+ScjIatXZwaHi1p6QEBEEAhmZATMSh//bN

MvzJHB4cqDu9c

+tuRUzmg6Lgjim68ejxkHfe/AlRrWOGUIzF5XI9xaenUDSubV7ru/Gzxai/

iXMT/sPvVOfpU

+0sy26nFYK62LCezfScaT1f802zOHUIm9GL6VTajnOVsaaRJBIWM3IUQMbR

gRZHosVOsBihesFMwW7lr9g5zmN8wxGlVELGRl647/3W01E19+3ytv6hCUN

1+YL1n9FYzHuuvd2Ldd5klrULVO1ihJ1sYhzNEvRompFS/TqzOfpJQ2NobW

NTk95mjbAU+LRk4BnHhPCmzXW/SBlJvvDjTx

+fOnli9qS4E3EE9+8vXfHeu5/

+cf1XF9YW1sx9hg36wcRFNxxpDrlmz2lxFpccrwoda6J5PoIB9hk5rmoiFV

qO9+7Z4xt4NFhrsfIMIeQpZnQ4mUw60+lM8Xgill1fWXnuiy/39ngdfEHrw

fpDHwTW/TndKM3Q55iWnrPfL98YPBzE

+pYmbMOPGZ1Xr3i6u7s/TIipEimbNaMrot3GP9q2dcvfS5csjuFc7uCMR/D

sIqR/mujUMiOlyF9a8VqAAQCMEogyPkkkHQAAAABJRU5ErkJggg==") !

important;
  opacity: 1 !important;
  padding: 0 6px 0 6px !important;
  -moz-transition: -moz-box-shadow .1s !important;
}

#urlbar-container + #reload-button {
  -moz-image-region: rect(0 11px 12px 0) !important;
}

#urlbar-container + #reload-button + #stop-button {
  -moz-image-region: rect(0 22px 12px 11px) !important;
}

#urlbar-container + #reload-button:not([disabled]):hover{
  background-image: -moz-linear-gradient(#9eccf1, #6fb1e1 

49%,
                                   #5b9fd9 50%, #5198d2 

60%,
                                   #3e8ac9) !important;
  -moz-box-shadow: 0 0 1px 0 rgba(255,255,255,.40) inset !

important;
}

#urlbar-container + #reload-button + #stop-button{
  background-image: -moz-linear-gradient(#e6a18a, #d17764 

49%,
                                   #c05d4e 50%, #b95546 

60%,
                                   #c15a4a) !important;
  -moz-box-shadow: 0 0 1px 0 rgba(255,255,255,.40) inset !

important;
}

#urlbar-container + #reload-button:not

([disabled]):hover:active,
#urlbar-container + #reload-button + #stop-button:not

([disabled]):hover:active {
  -moz-box-shadow: inset 0 0 3px rgba(0,0,0,.8) !important;
}

#stop-button .toolbarbutton-icon,
#reload-button .toolbarbutton-icon{
  height: auto !important;
  width: auto !important;
}



#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not

(#new-tab-button) {
  -moz-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-size: 200% !important;
  -moz-border-image: url

("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 

5px 3px 6px !important;
  -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not

(#new-tab-button)  {
  background-position: -5px -2px !important;
  background-image: -moz-linear-gradient(top,rgba

(198,201,206,.70),
                                   rgba(151,160,172,.70)),
                    -moz-linear-gradient(bottom, rgba

(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not

(#new-tab-button):hover {
  background-image: -moz-linear-gradient(top,rgba

(198,201,206,.8),
                                   rgba(151,160,172,.8)),
                    -moz-linear-gradient(bottom, rgba

(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}



#toolbar-menubar
{
 position: fixed !important;
 margin: -25px 0 0 100px !important;
 background: -moz-linear-gradient(top, rgba(255, 255, 255, 

0.1) 0%, rgba(255, 255, 255, 0.5) 100%)!important;
 -moz-border-radius: 0px 0px 4px 4px !important;
 text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 3px 

rgba(255, 255, 255, 0.8), 0 0 3px rgba(255, 255, 255, 0.8), 

0 0 3px rgba(255, 255, 255, 0.8) !important;
 -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5), 0 0 1px 

rgba(30, 30, 30, 0.5) inset, 0 0 1px rgba(60, 60, 60, 0.9) 

inset, 0 0 3px rgba(0, 0, 0, 0.7) inset !important;

}

Thanks SoapyHamHocks, not very good at this yet

Also something Ive noticed, when clicking on the search engine symbol in omnibar to change engine, the window is clear, using Beta 4.02b

Of course you know I'm going to clean up your code :p Great job though, looks nice.

Edit: This is how I would do it. Should make it slimmer when maximized as well.

The thing is that i think we need few pixels above the tab bar for dragging the window , that's why im against reducing the gap to 0~1px

Anyway , thanks for appreciating , i really did not do anything , i just designed it , rest is done by Active members @ Meet Firefox 4.0 :D

Doesnt work for me?

bring the stop reload (Correct Order : Reload then Stop) buttons to right of the location bar , most probably between search and awesome bar

The thing is that i think we need few pixels above the tab bar for dragging the window , that's why im against reducing the gap to 0~1px

Anyway , thanks for appreciating , i really did not do anything , i just designed it , rest is done by Active members @ Meet Firefox 4.0 :D

It only makes it 0 on top when maximized. I find that easier, I can just move my mouse all the way to the top and select a tab.

Try this:

margin: -22px 0 0 110px !important;

#toolbar-menubar
{
 position: fixed !important;
 margin: -22px 0 0 110px !important;
 background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 100%)!important;
 -moz-border-radius: 0px 0px 4px 4px !important;
 text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 3px rgba(255, 255, 255, 0.8), 0 0 3px rgba(255, 255, 255, 

0.8), 0 0 3px rgba(255, 255, 255, 0.8) !important;
 -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5), 0 0 1px rgba(30, 30, 30, 0.5) inset, 0 0 1px rgba(60, 60, 60, 

0.9) inset, 0 0 3px rgba(0, 0, 0, 0.7) inset !important;

}

Like this? Didint work, when I show menu bar, I get Windows frame

Are you using alt to show the menubar, or do you have it always visible? The numbers I used should bring it next to the Firefox button along the top.

Ok, using alt button works, is it possible to allways keep it there, and also I think it is sitting to high, maybe a 1px gap on top. Thanks SoapyHamHocks

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
      neufuse
      67
  • Tell a friend

    Love Neowin? Tell a friend!