Recommended Posts

I'll do some more investigating, but it looks like your approach is the only one working at the moment(at least if you're wanting to keep the 22px tab bar). I would however reduce the height to 23px since its the minimum necessary to keep a 16px icon. Then again I thought the 15px icon looked aesthetically better.

you did notice that it's all the tab icons; whether they're in pinned or normal tabs is irrelevant?

The odd thing is that using ".tab-throbber, .tab-icon-image min-height: 16px" or ".tabbrowser-tab[pinned] min-height: 24px" the icons remain 16x16 in the 22px tabs. Only pinned tabs when alone they are 16x15.

And right now I discovered another problem. When scrollbox is activated, the pinned tabs is messed up showing 24px and overlapping nav-bar.

I think "pinned tabs", "pinned tabs only" and "tabs" have different css. But in browser.css I found nothing.

Maybe I should accept to live with the 23px.

I'm not a programmer and do not like to code, css etc, I am like old fashion graphic designer, so my skill is low on that. But it seems to me that the UX team is a mess with css. Many redundancies and many peculiarities that looks like patches upon patches.

The odd thing is that using ".tab-throbber, .tab-icon-image min-height: 16px" or ".tabbrowser-tab[pinned] min-height: 24px" the icons remain 16x16 in the 22px tabs. Only pinned tabs when alone they are 16x15.

And right now I discovered another problem. When scrollbox is activated, the pinned tabs is messed up showing 24px and overlapping nav-bar.

I think "pinned tabs", "pinned tabs only" and "tabs" have different css. But in browser.css I found nothing.

Maybe I should accept to live with the 23px.

I'm not a programmer and do not like to code, css etc, I am like old fashion graphic designer, so my skill is low on that. But it seems to me that the UX team is a mess with css. Many redundancies and many peculiarities that looks like patches upon patches.

try this :

#tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab[pinned] {
	min-height: 23px !important;
}

#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
	height: 22px !important;
}

I tried it and the icon size didn't change even though the tab was resized on overflow.....:hmmm:

It'll be better if it is non-transparent.

my code isn't transparent. You need to add a background to #PersonalToolbar.

oops, my fault. Working now, anyway, what do I need to change so that it will only appear when I hover on the address bar and not when I'm hovering on the tabs?

use

#nav-bar:hover ~ #PersonalToolbar[collapsed="false"],
#PersonalToolbar:hover {

instead of:

#navigator-toolbox:hover > #PersonalToolbar[collapsed="false"]

nice, thanks! everything is set on my browser now (I think), since I can't figure out how to have the persona skin for the autohide bookmarks toolbar, what I did is to crop a screenshot of my persona and used it as the bookmark's background :p

thanks a lot foxxy :D

Edit: Just one more, what do I need to change so that while I'm hovering at the bookmarks, it will not fade out?

nice, thanks! everything is set on my browser now (I think), since I can't figure out how to have the persona skin for the autohide bookmarks toolbar, what I did is to crop a screenshot of my persona and used it as the bookmark's background :p

thanks a lot foxxy :D

Edit: Just one more, what do I need to change so that while I'm hovering at the bookmarks, it will not fade out?

#nav-bar:hover ~ #PersonalToolbar[collapsed="false"],
#PersonalToolbar:hover {

#PersonalToolbar:hover prevents that from happening. If you're having problems with that, post the entire modified code you're using.

here it is:

/*App Menu*/
#main-window[sizemode="maximized"] #appmenu-button .button-icon {
  list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAB5klEQVQoz3WSu04bQRSGBwShAFFAiiClBCE6Kpo0PAEEpcsDEJkCiYoKCoQQTwBPQBeFClFE6WiDBDZSJBvZ67vXF3m9vq0968l3Vl5kEB7p11zOP/85559RitHtdr+pkdHr9abBp3DfbrcnwXqn09mDG2G9OspXzWbT4vBcax2BsN/v96Ng6Q1nFs534k/AZb0VBBqNxgQbhwuGrIa14IYLH9Q7A/6867r3rVbLIeGG8jxvRy6iGlwmYCAwtbKVSuVqjMiW4ziGpEfS/w29hZkDsM+ABTVmkPlYEsH5JQYlRGCIQbVa9Sj/msrWxwmQ+VyqljJVvV5PS/<< racial epithet >>qlurFYzCQSiY/jLsP7Av4OBSqqVCo9cOCLQDab1el02liW9cj6JJfLXYJ/hUJhd+RJv1KhL0nBH0XwFFNcOSBgarWawbyzZDLZyWQydj6f/8E8NfwvK+BUkgmfKg5VPB5fRkRs94aqgh6ZDnB6JsyMJ2sgClwEnoXD+nMQROSCUuVz+AgNQiGINme3EO/IpuWMtcQteBcvxiAwh3H39O+Xy2VNG5p2+mAQlhv+EdnzT6Jg/pW7GLfIK/xmFjMNvRsM9ovForZtO/BGPg+vds28+O4TITBBK9vgJwIW0PijEUrJrwSbb+/8B7t0QamEFz2OAAAAAElFTkSuQmCC);
}

#main-window[sizemode="maximized"] #appmenu-button {
  padding: 0 2px 1px !important;
  min-width: 0 !important;
}

#main-window[sizemode="maximized"] #appmenu-button .button-text {
  visibility: collapse;
}



/* Addon bar */
/*
#addonbar-closebutton {
  display: none;
}

#browser-bottombox {
  position: fixed;
  bottom: 0;
  background: none !important;
}

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

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

#addon-bar > #status-bar {
  margin: 0 1px 1px 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 0 0 0;
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.30) !important;
  border-top: 1px solid rgba(0,0,0,.30) !important;
  background: -moz-linear-gradient(#FBFCFD, #E6F0FA 50%, #DCE6F4 51%, #DDE9F7) padding-box !important;
}
*/

.tabbrowser-tab:not([selected="true"]) {
	background-image: -moz-linear-gradient(rgba(190,190,190,.55), rgba(120,120,120,.55), rgba(50,50,50,.7)) !important;
}
.tabbrowser-tab:not([selected="true"]):hover {
	background-image: -moz-linear-gradient(rgba(255,255,255,.55), rgba(230,230,230,.55), rgba(120,120,120,.7)) !important;
}
.tabbrowser-tab[selected="true"] {
	background-image: -moz-linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.55), rgba(255,255,255,.55)) !important;
}
/*New Tab*/
#appcontent,
#content > tabbox > tabpanels {
  background: url("file:///D:/My%20Pictures/Wallpapers/firefox.jpg");
  background-color: transparent !important;
  background-position: center;
}

#main-window[stylish-url="about:blank"]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content browser{ 
opacity: 0 !important;
}

/*Animated Add-on Bar and Find Bar fixes*/
/*Remove/comment this block if you prefer add-on Bar always showing*/
#addonbar-closebutton {
  display: none;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox {
	position: fixed;
	bottom: 0;
	left: 0;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar {
	-moz-appearance: none !important;
	padding: 2px 10px 0 10px !important;
	margin-bottom: -1px !important;
	border: none !important;
	border-radius: 2px 2px 0 0 !important;
	margin-right: 25px !important;
	background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
	box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset !important;
	position: fixed;
	bottom: -7px;
	left: 0;
	opacity: 0;
	-moz-transition: bottom 0.25s 0.5s ease-in, opacity 0.1s 0.65s ease-in;
}
#addon-bar .toolbarbutton-1 {
	padding-bottom: 4px !important;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar:hover {
	bottom: 0;
	opacity: 1;
	-moz-transition: bottom .25s .25s ease-out, opacity 0.1s 0.25s ease-out;
}
#FindToolbar {
	border: none !important;
}
#FindToolbar .findbar-container {
	margin-bottom: -2px !important;
	margin-left: -2px !important;
	border-radius: 0 2px 0 0 !important;
	background: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
	box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset !important;
}
#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;
}
/*Adjust tab size*/
/*
.tabbrowser-tab:not([pinned])[fadein] {
  max-width: 130px !important;
}
*/
#main-window[sizemode="maximized"] #TabsToolbar[tabsontop="true"] {
        margin-bottom: -2px !important;
        background: none !important;
        background-image: none !important
}

/*Bookmarks Toolbar*/
#navigator-toolbox:not([customizing]) #PersonalToolbar {
	position: fixed !important;
	top: 80px !important;
	left: 0 !important;
	right: 0 !important;
	background-color: rgb(207, 219, 236)!important;
	border-bottom: 1px solid !important;
	-moz-border-bottom-colors: threedshadow threedhighlight !important;
	color: #000 !important;
	text-shadow: none !important;
	visibility: collapse !important;
	opacity: 0 !important;
	-moz-transition: visibility .9s, opacity .9s ease-out !important;
	-moz-transition-delay: 1.25s!important;
}

#main-window[sizemode="normal"] #PersonalToolbar {
	top: 73px !important;
	border-radius: 0 !important;
}

#main-window[tabsontop="true"] #PersonalToolbar {
	top: 54px !important;
}

#main-window[sizemode="normal"][tabsontop="true"] #PersonalToolbar {
	top: 75px !important;
}

#main-window[stylish-url="about:addons"] #PersonalToolbar {
	display:none !important
} 

#personal-bookmarks {
background:url("file:///D:/My%20Pictures/Wallpapers/test.JPG");
	width: 100% !important;
	padding-left: 4px !important;
	padding-right: 4px !important;
}

#nav-bar:hover ~ #PersonalToolbar[collapsed="false"],
#PersonalToolbar:hover {
	visibility: visible !important;
	opacity: 1 !important;
	-moz-transition: .2s ease-in !important;
	-moz-transition-delay: 1.25s!important;
}

Hope you can help me. Thanks :D

I commented some parts of the code that I don't use but may use later.

here it is:

Hope you can help me. Thanks :D

I commented some parts of the code that I don't use but may use later.

To fix the bookmark toolbar hover change #navigator-toolbox:not([customizing]) #PersonalToolbar to #PersonalToolbar:not([customizing])

For some reason I'm having difficulty displaying tabs in the title bar only when Firefox isn't maximized. I've tried a few of the suggestions in this thread but they seem to do nothing but adjust the spacing between the first tab and the menu button.

Also, would there be a way to adjust the opacity and font color of the Awesome and Search bars? If I could also somehow remove everything but the icons themselves and their dividers from the minimize, maximize, exit buttons in the top left, that'd be great.

Thanks in advance.

post-372898-0-19823700-1297755651.png

For some reason I'm having difficulty displaying tabs in the title bar only when Firefox isn't maximized. I've tried a few of the suggestions in this thread but they seem to do nothing but adjust the spacing between the first tab and the menu button.

Also, would there be a way to adjust the opacity and font color of the Awesome and Search bars? If I could also somehow remove everything but the icons themselves and their dividers from the minimize, maximize, exit buttons in the top left, that'd be great.

Thanks in advance.

Normal Window Tabs In Titlebar

url/search bars

#urlbar, #searchbar .searchbar-textbox {
       background-color: rgba(0,0,0,0.5) !important;
       color: #ccc !important
}

I don't think it's possible to modify the caption buttons like that with css

try this :

#tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab[pinned] {
	min-height: 23px !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
	height: 22px !important;
}

I tried it and the icon size didn't change even though the tab was resized on overflow.....:hmmm:

This did the job! Thank you very much.

Style has been updated Drifus - Firefox 4 project - aero clean

Changelog:

- feb.15.2011

* Fixes, due to the latest Firefox trunk (Add-on Bar and tabs)

* Removed tweaks of the tabbar buttons and scrolls buttons - Firefox UX team did a great update there.

Normal Window Tabs In Titlebar

url/search bars

#urlbar, #searchbar .searchbar-textbox {
       background-color: rgba(0,0,0,0.5) !important;
       color: #ccc !important
}

I don't think it's possible to modify the caption buttons like that with css

Thanks so much!

How can I get rid of the "bottom border" that appeared some builds ago under the navbar (see attached pic)? it doesn't seem to be the "bottom-border" of any object, and I can move it only by changing the margin of the navbar or personal toolbar in CSS. Is it some background image? of which element?

post-311154-0-63253300-1297877312.png

How can I get rid of the "bottom border" that appeared some builds ago under the navbar (see attached pic)? it doesn't seem to be the "bottom-border" of any object, and I can move it only by changing the margin of the navbar or personal toolbar in CSS. Is it some background image? of which element?

#navigator-toolbox::after {
	height: 0px !important; 
}

#navigator-toolbox::after {
	height: 0px !important; 
}

Hey, thanks for that from me too! ;)

BTW, when is the latest beta of status 4 evar add-on going to get final? It seems like ages since I wait for the UI bugs to get fixed ... :angry:

BTW, when is the latest beta of status 4 evar add-on going to get final? It seems like ages since I wait for the UI bugs to get fixed ... :angry:

That would be a question only Bluefang can answer

Mozillazine - Status-4-Evar 2011.02.07.02b

What if I want to display status text to be how it looks like by default (lower left corner, appears only when loading), I only want to use status4eva as a substitute to fission. What do I need to change? I tried playing with the options and the best it could do is to display the status text on the addon bar, which is useless since my addon bar autohides. Hope you can help me, thanks.

What if I want to display status text to be how it looks like by default (lower left corner, appears only when loading), I only want to use status4eva as a substitute to fission. What do I need to change? I tried playing with the options and the best it could do is to display the status text on the addon bar, which is useless since my addon bar autohides. Hope you can help me, thanks.

WFM. Are you using the latest version - Version 2011.02.07.02b

post-350326-0-17491300-1298049829.png

Experts, two requests ....

First ...

I'd like to know if there's a way to color spacers added by dragging from the Customize screen.

Currently, I have all my stuff on a single row:

from left to right, New Tab icon, Home icon, Tabs, URL bar, Stylish icon, and AdBlock Plus icon.

I've put in two spacers to get some gap between the right-end of the right-most tab and the start of the URL bar.

I'm going for a minimal look (but with enough contrast). The code that I have is below but it leads to the spacers being indistinguishable

from the tabs to the left and the URL bar to the right.

My second request is for a way to make the tab-close-button a little more visible for both active and inactive tabs. It's okay

if it's not possible to make the tab-close-button appear differently on hover.

Any help will be most appreciated.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 
#nav-bar { display: none !important; }
#TabsToolbar { background: maroon !important; }
#TabsToolbar:-moz-window-inactive {background-color: grey !important; }

#context-openlink, #context-bookmarkpage, #context-bookmarklink, #context-setWallpaper, 
#context-setDesktopBackground, #context-viewimage, #context-blockimage, #context-back, 
#context-forward, #context-reload, #context-stop,  #context-sendpage, #context-sendlink, 
#context-sendimage, #context-undo, #appmenu-button, #search-container,  #star-button,
#go-button, .urlbar-history-dropmarker, #identity-box.unknownIdentity, #page-proxy-favicon, 
#identity-icon-label, #titlebar {display:none !important; 
	}

#urlbar {
	background-color: maroon !important;
	font-size: 16px !important;
	font-weight: bold !important;
	color: #b0b0b0 !important;
	border: none !important;
	box-shadow: none !important;
	min-width: 300px !important;
	}
.tabbrowser-tab[selected="true"] {
	background-color: maroon !important;
	background-image: none !important; 
	font-size: 14px !important;
	font-weight: bold !important;
	color: yellow !important;
	border: none !important;
	box-shadow: none !important;
	padding-left: 5px !important;
	}
.tabbrowser-tab:not([selected="true"]) {
	background-color: maroon !important;
	background-image: none !important;
	font-size: 14px !important;
	font-weight: bold !important;
	color: #b0b0b0 !important;
	text-shadow: none !important;
	text-decoration: none !important; 
	border: none !important;
	box-shadow: none !important;
	padding-left: 5px !important;
	}
.tabbrowser-tab .tab-icon-image {
	display: none !important; 
	}
/*Prevents White pre-load flash*/
tabbrowser tabpanels {
	background-color: #b0b0b0 !important;
	}
.statuspanel-label {
	border: none !important;
	background: #808080 !important;
	color: maroon !important;
	font-weight: bold !important;
	font-size: larger !important;
	}

Experts, two requests ....

First ...

I'd like to know if there's a way to color spacers added by dragging from the Customize screen.

...

This works:

toolbarspacer {background-color: green !important; opacity: 1 !important; }

though I'll see if the opacity bit is necessary.

Help still wanted for the tab-close-button !

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!